TouchableOpacity is working in Android?

[akiradeveloper]

I am using RN 0.59.5 with this library and it seems that TouchableOpacity doesn't handle onPress hook in Android whereas it does in iOS. Is this a known issue?

[jkadamczyk]

Hi @akiradeveloper I bumped version of React Native in Example app to 0.59.5 and TouchableOpacity on android records onPress events. You can check this out by yourself on this branch up until it gets merged to master 😊

https://github.com/kmagiera/react-native-gesture-handler/tree/upgrade-react-native

[PierreCapo]

Hello,

I have the same issue right now with react-native 0.59.8 and react-native-gesture-handler 1.2.2 TouchableOpacity and TouchableHighlight from react-native-gesture-handler aren't working on a basic react-native app on Android (it works well on iOS).

I have changed the import to use the touchables from the react-native library and it works

[mountainWanderer]

I have the same problem.. but in react native version 0.60.x TouchableOpacity of react-native library seems to work well.

[CyxouD]

To not make mistake described by @PierreCapo again, added ESLint rule to show error when using buttons from react-native-gesture-handler:

"no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "react-native-gesture-handler",
            "importNames": [
              "TouchableOpacity",
              "TouchableNativeFeedback",
              "TouchableHighlight",
              "TouchableWithoutFeedback"
            ],
            "message": "Please import it from 'react-native' instead."
          }
        ]
      }
    ]

[zingerj]

Not able to get react-native-gesture-handler Touchables working at all (trying on iOS simulator) on react-native@0.61.5. Any update on this? Using the default Touchables from react-native for now...

[neiker]

This is what I do, which is really ugly:

/src/core/touchable/index.ios.ts

// eslint-disable-next-line no-restricted-imports
export {
  TouchableOpacity,
  TouchableNativeFeedback,
  TouchableHighlight,
  TouchableWithoutFeedback,
  FlatList,
  ScrollView,
} from 'react-native-gesture-handler';

/src/core/touchable/index.ts

// eslint-disable-next-line no-restricted-imports
export {
  TouchableOpacity,
  TouchableNativeFeedback,
  TouchableHighlight,
  TouchableWithoutFeedback,
  FlatList,
  ScrollView,
} from 'react-native';

eslint config:

module.exports = {
  extends: ['./eslint-config/native'],
  rules: {
    'no-restricted-imports': [
      'error',
      {
        paths: [
          {
            name: 'react-native-gesture-handler',
            importNames: [
              'TouchableOpacity',
              'TouchableNativeFeedback',
              'TouchableHighlight',
              'TouchableWithoutFeedback',
              'FlatList',
              'ScrollView',
            ],
            message: "Please import it from '/src/core/touchables' instead.",
          },
          {
            name: 'react-native',
            importNames: [
              'TouchableOpacity',
              'TouchableNativeFeedback',
              'TouchableHighlight',
              'TouchableWithoutFeedback',
              'FlatList',
              'ScrollView',
            ],
            message: "Please import it from '/src/core/touchables' instead.",
          },
        ],
      },
    ],
  },
};

[noway]

What if I want to use TouchableNativeFeedback from react-native-gesture-handler? It has a WAY BETTER ripple effect, literally day and night in terms of ripple animation. But ironically onPress doesn't trigger 🤔

[noway]

this helped me: https://github.com/software-mansion/react-native-gesture-handler/issues/699

[YahiaBadr]

@noway did you find any solution? i looked at the link you provided but unfortunately, my project is an expo manged one. So if you got any other solution please let me know.

[noway]

expo doesn't provide as much flexility as standard react native installation for issues exactly like this, so i'd recommend not to use it.

[abcdefghiraj]

I moved the child component to be a sibling of the touchable component and then gave it absolute positioning such that it draws over the child. It's a stupid hack but suits my use case.

<View>
    <TextInput
       //editable={false}
      />
     <TouchableOpacity 
         style={{position: 'absolute', left:0, top:0 ,width:'100%', height: '100%'}} 
          onPress={()=>{setIsModalVisible(true)}}>
     </TouchableOpacity>
</View>

[mauroduq]

I get back...
I use this import {TouchableOpacity} from 'react-native';

Instead import {TouchableOpacity} from 'react-native-gesture-handler';

For some reason, The first one works as well on IOS but not on Android

[ChenhuaWANG22]

for someone has to use touchables from react-native-gesture-handler for iOS:

import { Platform } from 'react-native';

let TouchableHighlight,TouchableOpacity;
if (Platform.OS === 'ios') {
    ({ TouchableHighlight,TouchableOpacity } = require('react-native-gesture-handler'));
} else {
    ({ TouchableHighlight,TouchableOpacity } = require('react-native'));
}

[jakub-gonet]

I wasn't able to repro that, TouchableOpacity is kinda working on android (doesn't have opacity though). Used code from the master branch (1d23e20).

Could you guys please share some small reproduction example with RNGH version, so I can test and fix that?

Example code used in GIF:

import React from 'react';
import { SafeAreaView, Text, Platform } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';

export default () => {
  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity
        style={[styles.rectangle]}
        onPress={() => console.log('Touch', Platform.OS)}>
        <Text>Press me!</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = {
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  rectangle: {
    backgroundColor: 'pink',
    width: 100,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
};

[tandat2209]

@jakub-gonet Seems like it does not work inside a Modal

Please take a look at this snack

https://snack.expo.io/@dattannguyen/touchableopacity-does-not-work-on-android

[jakub-gonet]

@tandat2209, this may be related to #139.

[bluenex]

I confirm Touchableopacity doesn't have opacity when it is being tapped. I am upgrading RN version to the latest (0.63.2) and having RNGH 1.7.0 as a dependency of React-Navigation.

I used TouchableOpacity imported from react-native before and just change to import from RNGH after upgrading RN version as the one from RN doesn't have opacity on both iOS and Android. However, the one imported from RNGH only works properly on iOS. It doesn't change opacity on click on Android.

It is not on Modal either. In my case, I found it on storybook (image below).

(justify-content seems to have weird behavior after upgrading as well 😅 )

[jakub-gonet]

@bluenex, could you provide some small example of code?

[bluenex]

@bluenex, could you provide some small example of code?

Here it is:

import { TouchableOpacity } from 'react-native-gesture-handler';
import styled from styled-components;

const ButtonContainer = styled(TouchableOpacity)`...`;

const StyledView = styled.View`...`;

const Button = ({ children, ...buttonProps }) => (
  <ButtonContainer {...buttonProps}>
    <StyledView>
      <Text>
        { children }
      </Text>
    </StyledView>
  <ButtonContainer>
);

So this is my custom button component which is styled using styled-components. This button is working perfectly on iOS but not Android.

More information, I use react-navigation and follow its docs here https://reactnavigation.org/docs/getting-started/. One thing I'm very curious is that it doesn't suggest adding anything to either MainActivity.java or MainApplication.java, just import 'react-native-gesture-handler'; in an entry file. Is that enough?

Update

So I end up trying to add to MainActivity.java as described in RNGH docs and it works. Probably not related to this issue anymore. Will check if react-navigation should update their docs to include this. Sorry for the confusion and thank you for a quick reply!

[SUMITIOS]

Hello,

I have the same issue right now with react-native 0.59.8 and react-native-gesture-handler 1.2.2 TouchableOpacity and TouchableHighlight from react-native-gesture-handler aren't working on a basic react-native app on Android (it works well on iOS).

I have changed the import to use the touchables from the react-native library and it works

It's not working in React native 0.62.2, 0.63.x and react-native-gesture-handler "^1.8.0" too. In fact in most versions of RN the problem is there. The onPress does not work at all. One must import it from "react-native" always for android

[flexbox]

Confirmed as well on the last version of the expo SDK

"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-gesture-handler": "~1.7.0",

[anastasiia-tripuz]

@abcdefghiraj

I moved the child component to be a sibling of the touchable component and then gave it absolute positioning such that it draws over the child. It's a stupid hack but suits my use case.

<View>
    <TextInput
       //editable={false}
      />
     <TouchableOpacity 
         style={{position: 'absolute', left:0, top:0 ,width:'100%', height: '100%'}} 
          onPress={()=>{setIsModalVisible(true)}}>
     </TouchableOpacity>
</View>

If you want to use TouchableOpacity from the react-native-gesture-handler and use position: "absolute" you should provide containerStyle prop instead of the style.

import { TouchableOpacity } from 'react-native-gesture-handler';

...

<TouchableOpacity 
    onPress={() => {}} 
    containerStyle={{ 
        position: 'absolute',
        top: 0,
        left: 0
    }}
>
   <Text>Press</Text>
</TouchableOpacity>

[jakub-gonet]

I submitted PR fixing opacity effect but I wasn't able to repro this issue. If you still experience it, make sure you set up RNGH correctly and provide a working repro example.