React-native-reanimated-bottom-sheet: Handle Button OnPress in renderContent !

[dungkaka]

I create header and content in bottom-sheet.
In renderHeader, i can create a button and handle onPress() perfectly.
Unfortulately, it's not in renderContent. I need to press long to excute onPress().
When I add enabledContentGestureInteraction={false}, now I can press on button normally, but I can not interact with modal up and down any more.
I test on my real device: samsung s7 !
How can I create a button with normal onPress event in renderContent ?

[dungkaka]

I found solution from previous issue. For Android, I use TouchableOpacity from ""react-native-gesture-handler" and fixed problems. I will close this issue soon, or anyone have any other ideas to fix this ?

[ryantando]

@dungkaka solution seems to work. Tested on real device also (samsung s10)

[MinhazMM]

I found solution from previous issue. For Android, I use TouchableOpacity from ""react-native-gesture-handler" and fixed problems. I will close this issue soon, or anyone have any other ideas to fix this ?

Does this only work for Android? Because I tried for iOS via the following code and it didn't work

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

renderInner = () => (
    <View style={styles.panel}>
      <Text style={styles.panelTitle}>San Francisco Airport</Text>
      <Text style={styles.panelSubtitle}>
        International Airport - 40 miles away
      </Text>
      <TouchableOpacity style={styles.panelButton} onPress={alert('GG')}>
        <Text style={styles.panelButtonTitle}>Directions</Text>
      </TouchableOpacity>
      <View style={styles.panelButton}>
        <Text style={styles.panelButtonTitle}>Search Nearby</Text>
      </View>
      <Image
        style={styles.photo}
        source={require('./assets/airport-photo.jpg')}
      />
    </View>
  );

Am I doing anything wrong or is it actually not working for iOS?

[dungkaka]

@MinhazMM , from this post, someone said that they just used TouchableOpacity from "react-native" on IOS and worked fine. On IOS, you don't need to change TouchableOpacity from "react-native-gesture-handler". I'm not sure because I have not try it on iOS. You can follow this post if anything information may be helpful !
Link: https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/16

[ValentinH]

@dungkaka I had the same issue and solve it simply by setting enabledContentTapInteraction={false}.

[baijii]

Yeah, it's kind of annoying. On iOS only the ones from react-native seems to work, and on Android only the ones from react-native-gesture-handler, so I made myself a little helper module:

// touchables.js

import {
  Platform,
  TouchableHighlight as TouchableHighlightIOS,
  TouchableOpacity as TouchableOpacityIOS,
  ScrollView as ScrollViewIOS,
} from 'react-native'

import {
  TouchableHighlight as TouchableHighlightAndroid,
  TouchableOpacity as TouchableOpacityAndroid,
  ScrollView as ScrollViewAndroid,
} from 'react-native-gesture-handler'

export const TouchableHighlight = (Platform.OS === 'android')
  ? TouchableHighlightAndroid
  : TouchableHighlightIOS

export const TouchableOpacity = (Platform.OS === 'android')
  ? TouchableOpacityAndroid
  : TouchableOpacityIOS

export const ScrollView = (Platform.OS === 'android')
  ? ScrollViewAndroid
  : ScrollViewIOS

// component.js

import { TouchableOpacity } from './touchables'
...

[jtomaszewski]

I use TouchableWithoutFeedback from react-native together with enabledContentTapInteraction={false} and it works well on both Android and iOS.

[wmonecke]

This is the current workaround:

import { Platform } from 'react-native'; const TouchableOpacity = Platform.OS === 'ios' ? require('react-native').TouchableOpacity : require('react-native-gesture-handler').TouchableOpacity;

[jspizziri]

@jtomaszewski

Based on what I'm seeing enabledContentTapInteraction needs to be set differently based on the platform (not sure why this is happening). But here's what I'm doing which finally get's it to work:

1. I'm using only Touchables from react-native-gesture-handler inside renderContent elements.
2. On Android I'm setting enabledContentTapInteraction={true}.
3. On iOS I'm setting enabledContentTapInteraction={false}.

Hopefully, this helps someone. Or perhaps someone will explain to me either what I'm doing wrong, or why it works this way.