CODEWITHSUNDEEP
react-native
Andrei Roba
Andrei Roba

Reputation: 2322

React native TouchableHighlight not working

I'm trying to build a login page with this code:

<View style={styles.formContainer}>
    <TouchableHighlight onPress={this.props.authentication}>
        <Icon.Button name="facebook" style={styles.loginIconButton}>
            <Text style={styles.loginButtonText}>Login with Facebook</Text>
        </Icon.Button>
    </TouchableHighlight>
</View>

when running this it gives 'Touchable child must be native or forward setNativeProps to a native component', so I wrapped the Icon in a View, as suggested by other posts:

<TouchableHighlight onPress={this.props.authentication.bind(this)}>
    <View>
        <Icon.Button name="facebook" style={styles.loginIconButton}>
            <Text style={styles.loginButtonText}>Login with Facebook</Text>
        </Icon.Button>
    </View>
</TouchableHighlight>

now the on press event is not triggered any more. But if I remove the Icon.Button tag and leave just Text it works fine. How can I fix this layout?

Upvotes: 0

Views: 1746

Answers (1)

aaronofleonard
aaronofleonard

Reputation: 2576

Why not try getting rid of the outer TouchableHighlight and just add the onPress event to Icon.Button?

If you look into the code for Icon.Button here (I'm guessing that you're using react-native-vector-icons), you can actually see that it creates a TouchableHighlight element as an inherent part of the element: https://github.com/oblador/react-native-vector-icons/blob/master/lib/icon-button.js

Try moving onPress to Icon.Button, remove the extraneous wrapping views, and let us know how it works!

Upvotes: 1

Related Questions