Basta ya de indagar por todo internet porque estás al sitio indicado, contamos con la solución que quieres hallar sin complicarte.
Solución:
Si está utilizando el módulo react-native-icons, puede intentar envolver tanto su icono como el texto en una vista, luego use TouchableHighlight encima. Algo como:
>
Pero será muy fácil si usa un módulo relativamente nuevo react-native-vector-icons. Puedes hacer como:
Login with Facebook
Logré hacerlo así. Me pregunto si hay una mejor manera.
var styles = StyleSheet.create(
btnClickContain:
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
alignSelf: 'stretch',
backgroundColor: '#009D6E',
borderRadius: 5,
padding: 5,
marginTop: 5,
marginBottom: 5,
,
btnContainer:
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'stretch',
alignSelf: 'stretch',
borderRadius: 10,
,
btnIcon:
height: 25,
width: 25,
,
btnText:
fontSize: 18,
color: '#FAFAFA',
marginLeft: 10,
marginTop: 2,
);
Sign In with Facebook
Expo tiene aa Button componente que hace lo que quieres, estilo y todo:
Sign in with Facebook
Sign in with Twitter
Cómo se ve ejecutarse en el simulador de iOS:
Si no está utilizando Expo, estudie la fuente y cree un componente similar.
Finalizando este artículo puedes encontrar las críticas de otros usuarios, tú igualmente tienes el poder mostrar el tuyo si lo deseas.