Question 323094 in React native Question posted in
The official React Native documentation can be found here.

React native – React-Native TouchableOpacity is pressable only on the edges

Using Expo Go on iphone

So I am getting out of my mind and can not solve the problem

This is my code

<TouchableOpacity onPress={() => navigation.goBack()}>
    <View style={{backgroundColor:"red", borderRadius:20, paddingRight:100, borderWidth:10}}>
        <Text>back</Text>
    </View>
</TouchableOpacity>

And when I am pressing at the middle nothing happen, only when I am pressing on the border, also when there is no border the touchable is not pressing at all…

**Using the TouchableOpacity in a custom header

any ideas?

Tried to get rid off the View and etc, nothing helps

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found the problem, there was a title with absolute position and 100% width which was over the TouchableOpacity.


  2. 0

    I’m a little confused on why your using an inner <View>

    I tried this locally with the below code and the onPress seemingly worked as intended

    <View>
<TouchableOpacity
   onPress={() => console.log('test')}
   style={{
     backgroundColor: 'red',
     borderRadius: 20,
     paddingRight: 100,
     borderWidth: 10,
   }}>
      <Text>back</Text>
</TouchableOpacity>
<View>

    Also tested with an empty style attribute, pressing <Text> still worked

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search