TouchableOpacity is working in Android? #578

akiradeveloper · 2019-04-24T08:32:19Z

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 · 2019-04-30T10:00:40Z

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 · 2019-06-01T01:55:05Z

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 · 2019-08-19T14:15:53Z

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

CyxouD · 2019-11-26T12:07:21Z

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 · 2020-01-30T07:36:59Z

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 · 2020-01-31T13:23:20Z

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 · 2020-03-15T22:49:16Z

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 · 2020-03-15T23:28:55Z

this helped me: #699

YahiaBadr · 2020-04-12T11:14:57Z

@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 · 2020-04-12T22:44:18Z

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 · 2020-06-10T15:15:33Z

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 · 2020-07-04T17:14:58Z

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 · 2020-08-14T07:24:23Z

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 · 2020-08-25T13:35:03Z

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 · 2020-08-29T13:57:22Z

@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 · 2020-08-29T14:09:14Z

@tandat2209, this may be related to #139.

bluenex · 2020-09-07T16:31:18Z

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 · 2020-09-07T17:02:26Z

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

bluenex · 2020-09-08T04:09:48Z

@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 · 2020-09-23T14:06:38Z

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 · 2020-10-29T13:29:56Z

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 · 2021-07-03T02:29:58Z

@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 · 2021-08-15T18:22:10Z

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.

CyxouD mentioned this issue Nov 26, 2019

[Android] onPress not work in Android with overlapped components facebook/react-native#22397

Closed

jakub-gonet mentioned this issue Aug 11, 2020

Touchable don't work in Android. 1.7.0 #1152

Closed

jakub-gonet self-assigned this Aug 11, 2020

jakub-gonet added Platform: Android This issue is specific to Android Platform: Cross platform inconsistency This issue presets the library behavior inconsistency between platforms Missing info To verify labels Aug 25, 2020

jakub-gonet mentioned this issue Sep 24, 2020

[Android TouchableOpacity] onPress not working on android (RN 0.62.2) #1198

Closed

jakub-gonet mentioned this issue Aug 15, 2021

Fix TouchableOpacity visuals #1567

Merged

jakub-gonet closed this as completed Aug 15, 2021

sekizlipenguen mentioned this issue May 27, 2022

on SPSheet component inner function problem ! sekizlipenguen/react-native-popup-confirm-toast#6

Closed

clohr-vc mentioned this issue Mar 23, 2023

TouchableOpacity doesn't work on Android #2440

Closed

sliptype mentioned this issue Mar 24, 2023

Fix "Pick some for me" button on android AudiusProject/audius-client#3102

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TouchableOpacity is working in Android? #578

TouchableOpacity is working in Android? #578

akiradeveloper commented Apr 24, 2019

jkadamczyk commented Apr 30, 2019

PierreCapo commented Jun 1, 2019 •

edited

Loading

mountainWanderer commented Aug 19, 2019

CyxouD commented Nov 26, 2019

zingerj commented Jan 30, 2020

neiker commented Jan 31, 2020 •

edited

Loading

noway commented Mar 15, 2020 •

edited

Loading

noway commented Mar 15, 2020

YahiaBadr commented Apr 12, 2020

noway commented Apr 12, 2020

abcdefghiraj commented Jun 10, 2020

mauroduq commented Jul 4, 2020

ChenhuaWANG22 commented Aug 14, 2020 •

edited

Loading

jakub-gonet commented Aug 25, 2020 •

edited

Loading

tandat2209 commented Aug 29, 2020

jakub-gonet commented Aug 29, 2020

bluenex commented Sep 7, 2020 •

edited

Loading

jakub-gonet commented Sep 7, 2020

bluenex commented Sep 8, 2020 •

edited

Loading

SUMITIOS commented Sep 23, 2020

flexbox commented Oct 29, 2020

anastasiia-tripuz commented Jul 3, 2021 •

edited

Loading

jakub-gonet commented Aug 15, 2021

TouchableOpacity is working in Android? #578

TouchableOpacity is working in Android? #578

Comments

akiradeveloper commented Apr 24, 2019

jkadamczyk commented Apr 30, 2019

PierreCapo commented Jun 1, 2019 • edited Loading

mountainWanderer commented Aug 19, 2019

CyxouD commented Nov 26, 2019

zingerj commented Jan 30, 2020

neiker commented Jan 31, 2020 • edited Loading

noway commented Mar 15, 2020 • edited Loading

noway commented Mar 15, 2020

YahiaBadr commented Apr 12, 2020

noway commented Apr 12, 2020

abcdefghiraj commented Jun 10, 2020

mauroduq commented Jul 4, 2020

ChenhuaWANG22 commented Aug 14, 2020 • edited Loading

jakub-gonet commented Aug 25, 2020 • edited Loading

tandat2209 commented Aug 29, 2020

jakub-gonet commented Aug 29, 2020

bluenex commented Sep 7, 2020 • edited Loading

jakub-gonet commented Sep 7, 2020

bluenex commented Sep 8, 2020 • edited Loading

Update

SUMITIOS commented Sep 23, 2020

flexbox commented Oct 29, 2020

anastasiia-tripuz commented Jul 3, 2021 • edited Loading

jakub-gonet commented Aug 15, 2021

PierreCapo commented Jun 1, 2019 •

edited

Loading

neiker commented Jan 31, 2020 •

edited

Loading

noway commented Mar 15, 2020 •

edited

Loading

ChenhuaWANG22 commented Aug 14, 2020 •

edited

Loading

jakub-gonet commented Aug 25, 2020 •

edited

Loading

bluenex commented Sep 7, 2020 •

edited

Loading

bluenex commented Sep 8, 2020 •

edited

Loading

anastasiia-tripuz commented Jul 3, 2021 •

edited

Loading