CODEWITHSUNDEEP
reactjsreact-nativetouchableopacity
Oner T.
Oner T.

Reputation: 413

TouchableOpacity behaves weird

    <View
        style={{
          flex: 1,
          width: BannerWidth,
          height: (deviceHeight * 25) / 100,
          marginBottom: 40,
          backgroundColor: theme.colors.batiLacivert,
        }}>   
         <TouchableOpacity onPress={() => Actions.portfoy()}>
          <View
            style={{
              width: 48,
              height: 60,
              left: 0,
              top: 50,
            }}>
            <Image
              style={{
                width: 48,
                height: 60,
                left: 40,
                bottom: -30,
                position: 'absolute',
              }}
              source={require('../../assets/yuzdeler/0yuzde_yeni.png')}
            />
            <Text
              style={{
                position: 'absolute',
                color: 'black',
                left: 47,
                bottom: 0,
                fontSize: 20,
              }}>
              %{this.state.anasayfaBilgiler.Performans}
            </Text>
          </View>
        </TouchableOpacity>
        </View>

I have this code in my project. I use position: absolute to position my shield icon on a View, and I wrapped it into a TouchableOpacity to press it and go to another page. But when I press on the shield, Nothing happens, But when I press the View on the background, It applies the code, it should have done it on the shield...How can I fix this?

Edit: Now it works when the Shield icon on the background View, but when I position it in the bottom, the overflow area of the icon doesnt work just upper half takes the click. I need it to work all over the image

This area -with blue color - doesn't click:

This area doesn't click

Upvotes: 2

Views: 1154

Answers (2)

Mahdi N
Mahdi N

Reputation: 2178

The idea is to fix style (height, width, position: 'absolute', top, left) only to TouchableOpacity component. Because if you set for example top: 50 to a child component this child will be under the touchableOpacity component by 50 and your onPress function will be fired only if you press the top of your component by 50. You just need position absolute on Text component because it should be on the Image.

<View
  style={{
    flex: 1,
    width: BannerWidth,
    height: (deviceHeight * 25) / 100,
    marginBottom: 40,
    backgroundColor: theme.colors.batiLacivert,
  }}
>
  <TouchableOpacity style={{ position: 'absolute', top: 50, left: 40 }} onPress={() => Actions.portfoy()}>
    <View
      style={{
        width: 48,
        height: 60,
      }}
    >
      <Image
        style={{
          width: 48,
          height: 60,
        }}
        source={require('../../assets/yuzdeler/0yuzde_yeni.png')}
      />
      <Text
        style={{
          position: 'absolute',
          color: 'black',
          fontSize: 20,
        }}
      >
          %
        {this.state.anasayfaBilgiler.Performans}
      </Text>
    </View>
  </TouchableOpacity>
</View>

Hope I was clear.

Upvotes: 2

Mahdi
Mahdi

Reputation: 1405

Make sure you have imported TouchableOpacity from react-native and not react-native-gesture-handler

Upvotes: 4

Related Questions