Open dungkaka opened 4 years ago
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 ?
@dungkaka solution seems to work. Tested on real device also (samsung s10)
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?
@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
@dungkaka I had the same issue and solve it simply by setting enabledContentTapInteraction={false}
.
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'
...
I use TouchableWithoutFeedback
from react-native
together with enabledContentTapInteraction={false}
and it works well on both Android and iOS.
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;
@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:
Touchables
from react-native-gesture-handler
inside renderContent
elements.enabledContentTapInteraction={true}
.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.
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 ?