onPress event not working on views, images, touchableopacity in react native

Question

I am newbie in React Native, I implemented onPress function on View component(I tried on touchableOpacity and NativeFeedBack) but it did not work on any of them. I don't understand why.

I wanted to implement buttons using images, so that when someone click on the button, the code runs. But things are not as expected.

import React, { Component } from 'react';
import {
    StatusBar,
    Image,
    View,
    Text,
    Dimensions,
    TouchableNativeFeedback
} from 'react-native';

import Constants from 'expo-constants';
class LandingScreen extends Component {

    render() {
        const resizeMode = 'cover';
        const text = '';
        const { width, height } = Dimensions.get('screen');
        return (
            <View
                  style={{
                    flex: 1,
                    backgroundColor: '#eee',
                    paddingStart:Constants.statusBarHeight
                  }}
                >
                      <StatusBar hidden />
                  <View
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: width,
                      height: height,
                    }}
                  >
                    <Image
                      style={{
                        flex: 1,
                        resizeMode,
                      }}
                      source={require('../assets/home.png') }
                    />
                  </View>
                  <TouchableNativeFeedback>
                  <View
                    style={{
                      position: 'absolute',
                      bottom: 100,
                      left: 40,
                      right:50,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >

                          <View>
                    <Image
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/SignInButton.png') }
                    />
                    </View>

                  </View>
                  </TouchableNativeFeedback>

                 // onPress dont work here as well

                  <TouchableNativeFeedback >
                  <View 
                    style={{
                      position: 'absolute',
                      bottom: 30,
                      left: 40,
                      right:50,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >

                          <View>
                    <Image onPress=()=>this.props.navigation.navigate('Main')}
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/LearnMoreButton.png') }
                    />
                    </View>

                  </View>
                  </TouchableNativeFeedback>

                   //here the onPress dont work

                  <View onPress={()=>console.log("Hello")}

                    style={{
                      position: 'absolute',
                      bottom: 310,
                      left: 60,
                      right:60,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >
                    <Image
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/Quote.png') }
                    />
                  </View>
                  <View
                    style={{
                      flex: 1,
                      backgroundColor: 'transparent',
                      justifyContent: 'center',
                    }}
                  >
                    <Text
                      style={{
                        textAlign: 'center',
                        fontSize: 40,
                      }}
                    >
                      {text}
                    </Text>
                  </View>
                </View>
        );
    }
}

export default LandingScreen;

Victor · Accepted Answer · 2019-08-11 05:11:31Z

3

onPress works only on Touchables it should be

<TouchableNativeFeedback onPress=()=>this.props.navigation.navigate('Main')/>

This function will not work on View or Image. You need to wrap the view inside touchable (opacity or native feedback) to get the click.

renderButton: function() {
  return (
    <TouchableOpacity onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableOpacity>
  );
},

https://facebook.github.io/react-native/docs/touchableopacity

answered Aug 11, 2019 at 5:11

Victor

4,2191 gold badge32 silver badges38 bronze badges

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

2 Comments

Prateek93a Over a year ago

Thanks but I tried that as well, as mentioned in the code comment. But that didn't work either

M.N. Over a year ago

@PRATEEKJAIN, you can use View with onStartShouldSetResponder.

hong developer · Accepted Answer · 2019-08-11 14:58:17Z

I've modified your code. Try this. And as @Wolverine says, View and images don't have click props.

import React, { Component } from 'react';
import {
    StatusBar,
    Image,
    View,
    Text,
    Dimensions,
    TouchableNativeFeedback,
    TouchableOpacity
} from 'react-native';

import Constants from 'expo-constants';

export default class App extends Component {

    render() {
        const resizeMode = 'cover';
        const text = '';
        const { width, height } = Dimensions.get('screen');
        return (
            <View
                  style={{
                    flex: 1,
                    backgroundColor: '#eee',
                    paddingStart:Constants.statusBarHeight
                  }}
                >
                      <StatusBar hidden />
                  <View
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: width,
                      height: height,
                    }}
                  >
                    <Image
                      style={{
                        flex: 1,
                        resizeMode,
                      }}
                      source={require('../assets/home.png') }
                    />
                  </View>

 <TouchableOpacity onPress={() => this.props.navigation.navigate('Main')} >
                  <View
                    style={{
                      position: 'absolute',
                      bottom: 100,
                      left: 40,
                      right:50,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >


                    <Image
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/SignInButton.png') }
                    />

                    </View>
 </TouchableOpacity>

                 // onPress dont work here as well
                   <TouchableOpacity onPress={() => this.props.navigation.navigate('Main')} >
                  <View 
                    style={{
                      position: 'absolute',
                      bottom: 30,
                      left: 40,
                      right:50,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >

                    <Image 
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/LearnMoreButton.png') }
                    />

                  </View>
               </TouchableOpacity>
                   //here the onPress dont work
 <TouchableOpacity onPress={()=>console.log("Hello")} >
                  <View 
                    style={{
                      position: 'absolute',
                      bottom: 310,
                      left: 60,
                      right:60,
                      marginLeft:'auto',
                      marginRight:'auto'

                    }}
                  >
                    <Image
                      style={{
                        flex: 1,
                        resizeMode:'contain',
                      }}
                      source={require('../assets/Quote.png') }
                    />
                  </View>

                  </TouchableOpacity>
                  <View
                    style={{
                      flex: 1,
                      backgroundColor: 'transparent',
                      justifyContent: 'center',
                    }}
                  >
                    <Text
                      style={{
                        textAlign: 'center',
                        fontSize: 40,
                      }}
                    >
                      {text}
                    </Text>
                  </View>
                </View>
        );
    }
}

View don't have onPress, but it have onStartShouldSetResponde.

Narayan Shrestha · Accepted Answer · 2021-09-23 13:17:46Z

0

I solved my issue by wraping inside "TouchableWithoutFeedback".

<TouchableWithoutFeedback
    onPress={() => {
        this.moveToAddNewCustomer()}
    }}
>
    <Image
        style={styles.newImage}
        source={require("~/assets/images/test123.png")}
     />
</TouchableWithoutFeedback>```

answered Sep 23, 2021 at 13:17

Narayan Shrestha

7899 silver badges19 bronze badges

Collectives™ on Stack Overflow

onPress event not working on views, images, touchableopacity in react native

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related