Menu
I'm using react-native-icons package to include icons with buttons. They have a sample code listed in example folder. I'm trying to achieve onPress on View but turns out react-native doesn't have onPress function for <View> component.
I tried using <TouchableHighlight> but it can only have single child element in it not two like <Icon> and <Text> inside.
I also tried using <Text> with <Icon> and <Text> inside but <Text> can only have <Text> elements inside.
Has anyone have any luck achieving similar functionality ?
<View onPress={this.onBooking} style={styles.button}> <Icon name='fontawesome|facebook-square' size={25} color='#3b5998' style={{height:25,width:25}}/> <Text style={styles.buttonText}>Sign In with Facebook</Text> </View> 
776
To add a button with icons in React Native, we can use the react-native-elements package to add the icon. To install it, we run npm i react-native-elements . to add a TouchableHighlight to provide the highlight effect for the button. Then we add the button content in the View .
import { View, Button, StyleSheet, TouchableOpacity, Text } from "react-native"; To create custom buttons, you need to customize the <TouchableOpacity /> component and include the <Text /> component inside of it to display the button text.
React Native's <Button /> component does not accept a style prop, and its color prop is limited and appears differently across Android, iOS, and the web. With the <Pressable /> component, we can create custom buttons that fit our app's design.
If you are using react-native-icons module, you can try wrap both your icon and text in a view, then use TouchableHighlight on top of it. Something like:
<TouchableHighlight onPress={()=>{}}> <View> <Icon ... /> <Text ... /> </View> </TouchableHighlight> But it will be very easy if you use a relative new module react-native-vector-icons. You can do like:
<Icon name="facebook" style={styles.icon}> <Text style={styles.text}>Login with Facebook</Text> </Icon> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
