React-Native TouchableOpacity is pressable only on the edges

Question

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

Answer 1

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

Answer 2

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