CODEWITHSUNDEEP
javascriptreactjsreact-native
Cheryl Blossom
Cheryl Blossom

Reputation: 185

Use View as Button - React Native

Is there anyway to use the view as button? Im kinda clueless of what Im doing.

return (
  <View style={styles.container}>
    <View style={styles.vicon} onClick={() => this.props.navigation.navigate('MessageScreen')}>
      <Image source={require('../misc/icon1.png')} style={styles.iicon} />
    </View>
    <View style={styles.vtexts} onClick={() => this.props.navigation.navigate('MessageScreen')}>
      <Text style={styles.tname}>{this.state.name}</Text>
      <Text style={styles.tmessage}>{this.state.message}</Text>
    </View>
  </View>
);

this is me so far. I need to use the view as a button to redirect to the messageScreen. Hope someone can help me. Thanksss

Upvotes: 1

Views: 3607

Answers (2)

Aavgeen singh
Aavgeen singh

Reputation: 443

You can put TouchableWithoutFeedback inside the View and then put the navigate function in onPress prop. 

return (
  <View style={styles.container}>
    <View style={styles.vicon}>
        <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('MessageScreen')}>
            <Image source={require('../misc/icon1.png')} style={styles.iicon} />
        </TouchableWithoutFeedback>
    </View>
    <View style={styles.vtexts}>
        <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('MessageScreen')}>
            <View>
              <Text style={styles.tname}>{this.state.name}</Text>
              <Text style={styles.tmessage}>{this.state.message}</Text>
            </View>
        </TouchableWithoutFeedback>
    </View>
  </View>
);

You can play around with the style prop to get the desired styling.

Happy Coding!

Upvotes: 1

oma
oma

Reputation: 1894

Just use TouchableOpacity. Is exactly what you need, check here the definition from react-native documentation:

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.

You can find details here: https://facebook.github.io/react-native/docs/touchableopacity.html

Upvotes: 0

Related Questions