Use View as Button - React Native

Question

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

Im sorry but can you be more specific? How should I change the View to TouchableHighlight or should I wrap it,and so on. — Cheryl Blossom
– Cheryl Blossom, Commented Apr 13, 2018 at 11:50
facebook.github.io/react-native/docs/touchableopacity.html & facebook.github.io/react-native/docs/handling-touches.html — PPL
– PPL, Commented Apr 13, 2018 at 12:31
if you need touch actions. use touchable components instead view — jose920405
– jose920405, Commented Apr 13, 2018 at 12:34
use touchableOpacity. you need to wrap view with touchableOpacity and declare click event there. facebook.github.io/react-native/docs/touchableopacity.html — heltdev
– heltdev, Commented Apr 13, 2018 at 13:18

Aavgeen singh · Accepted Answer · 2018-04-13 18:08:33Z

1

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!

edited Apr 13, 2018 at 18:08

answered Apr 13, 2018 at 12:01

Aavgeen singh

4431 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oma Over a year ago

As I know TouchableNativeFeedback is only for Android .

Aavgeen singh Over a year ago

Thanks for pointing it out @oma, i have edited the answer now.

oma · Accepted Answer · 2018-04-13 12:26:15Z

0

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

answered Apr 13, 2018 at 12:26

oma

1,89414 silver badges14 bronze badges

Collectives™ on Stack Overflow

Use View as Button - React Native

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related