Touchable Opacity inside renderContent has no actions when tapped on Android. iOS working fine. about react-native-reanimated-bottom-sheet

[rgoldiez]

@Under-Warz - just to make sure, did you set both enabledInnerScrolling and enabledContentTapInteraction to false?

[Under-Warz]

here is the config I've made to make it work on both iOS and Android with button and horizontal drag slider

<BottomSheet
      enabledContentGestureInteraction={false}
      enabledInnerScrolling={false}
      enabledContentTapInteraction={false}
      snapPoints={[250, 50]}
      renderHeader={renderHeader}
      renderContent={renderContent}
      onCloseStart={handleCloseStarted}
    />

And the button inside the view use TouchableOpacity from RN for iOS and TouchableOpacity from react-native-gesture-handler for Android

[osdnk]

I see the problem.
Gesture-handler ecosystem might not be consistent in some parts with RN gesture system. So I recommend using touchable from RNGH.
However, they do not work on iOS (:cry:). As a temporary fix, you might use RNGH touchables on Android and RN touchables on iOS.
It should not be like, but it's a problem in RNGH.

[zunsakai]

same issues

[osdnk]

Sorry for not being very active. I’ll happily accept any PRs but now I’m truly overwhelmed by my job and react navigation stuff. Sorry I do my best, but I’m not any superhero :/

[aliwaqassi]

Please fix this issue, we are waiting for fixes

[sebqq]

After a little rework of @slorber example I've got something like this. Works at least for iOS at the time and I will test it on android tomorrow.

import React, { memo } from "react";
import { Platform, TouchableOpacity } from "react-native";
import { TouchableOpacity as RNGHTouchableOpacity } from "react-native-gesture-handler";

const BottomSheetButton = ({ children, ...otherProps }) => {
  if (Platform.OS === "android") {
    return (
      <RNGHTouchableOpacity {...otherProps}>{children}</RNGHTouchableOpacity>
    );
  }

  return <TouchableOpacity {...otherProps}>{children}</TouchableOpacity>;
};

export default memo(BottomSheetButton);

Anyways,, hope that #85 get merge asap...

@osdnk

[safaiyeh]

One work around i found was to call snapTo twice.

<TouchableOpacity 
  onPress={() => {
    bottomSheetRef.current?.snapTo(0);
    bottomSheetRef.current?.snapTo(0);
  }}
>

[slorber]

If that helps you can do a custom component to fix it like this one:

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

const BottomSheetTouchableWorkaround = ({
  children,
  onPress,
}: {
  children: ReactNode;
  onPress: () => void;
}) =>
  Platform.select({
    android: <RNGHTouchableOpacity onPress={onPress}>{children}</RNGHTouchableOpacity>,
    ios: (
      <TouchableOpacity onPress={onPress}>{children}</AppTouchableOpacity>
    ),
  });

[inveon-ozanhonamlioglu]

Hi all
add this prop to BottomSheet

enabledContentTapInteraction={false}

✅

[harrisrobin]

@safaiyeh 's solution worked perfectly for me 🎉

[anastely]

@Fallup I implement a mini-player So the parent View i set the height to 60 and backgroundColor: black,

and as i say i can't respond to any action inside the component inside the renderContent Function

But when i deleted the background property from View style,
The player Component actions work well!!

So why? :"D

 <View style={{height: 60}}>
      <BottomSheet
        ref={bottomSheetRef}
        initialSnap={0}
        callbackNode={fall}
        snapPoints={snapPoints}
        renderHeader={renderHeader}
        renderContent={renderContent}
        enabledManualSnapping
        enabledBottomInitialAnimation
        enabledBottomClamp
        overdragResistanceFactor={500}
        enabledContentTapInteraction={true}
        enabledInnerScrolling={false}
        enabledContentGestureInteraction={false}
      />
    </View>

[dkpapo]

I need the internal scroll but with this configuration not working the scroll, works only onpress but the scroll does not, how does this project to operate the scroll and also the onpress
https://market.nativebase.io/view/react-native-cryptostream-app-theme????????????'

i find a solution for me

<View style={styles.container}>
                <BottomSheet
                  ref={this.bs}
                  snapPoints={['85%', '51%']}
                  renderContent={this.renderInner}
                  renderHeader={this.renderHeader}
                  initialSnap={1}
                  enabledInnerScrolling={true}
                  enabledContentTapInteraction={false}

                />
                
              </View>

in renderinner

    <Animated.View style={styles.panel}>
      <View style={styles.align}>
        <Icon
          active
          type={'FontAwesome5'}
          name="directions"
          style={{ color: "red",right:'10%' }}
        />
        <Text style={styles.panelTitle}>{this.state.request.address_final}</Text>
      </View>
      <View style={styles.align}>
        <Icon
        active
        type={'MaterialIcons'}
        name="my-location"
        style={{ color: "blue",right:'10%' }}
        />
        <Text style={styles.panelSubtitle}>{this.state.request.direction}</Text>
      </View>
      <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
      />
      <View style={styles.align}>
        <Text style={styles.titleText}>
          Presupuesto
        </Text>
        <Text style={{fontSize: 20, textAlign:'right',flex:1 }}>
          ${this.state.request.budget}
        </Text>
      </View>
      <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
      />
      <View style={styles.align}>
        <Text style={styles.titleText}>
          Numero de pasajeros
        </Text>
        <Text style={{fontSize: 20, textAlign:'right',flex:1 }}>
          {this.state.request.number_users}
        </Text>
      </View>
      <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
      />
      <View style={{flexDirection:'column',padding:10,}}>
        <Text style={{fontSize: 14,color: 'gray',marginBottom: 10}}>
          Datos adicionales
        </Text>
        
          
        <Text  style={{fontSize: 15}}>
          {this.state.request.description}
        </Text>

      </View>
      
      <Button 
        warning
        large
        rounded
        onPress={() => Alert.alert(
      '',
      'Esta seguro que desea cancelar el servicio?',
      [
        
        {text: 'Si', onPress: () => this.CancelService()},
        {text: 'No', onPress: () => null},
      ],
      {cancelable: true},
    )}>
        <Text>Cancelar</Text>
      </Button> 
    </Animated.View>

and important in style

panel: { // height: '100%', padding: 20, backgroundColor: 'white', },

[ospfranco]

Having the same issue, and I stumbled upon the same workaround on my own, however, this is not a perfect solution if one uses a UI library, (ex: react-native-paper) in my case, then the components stop working (ex: button) and there is not easy way to patch it, besides re-implementing the components using Touchables.

Just my 2 cents here, would like to know if/when this gets fixed.

[hayyaun]

@Under-Warz - just to make sure, did you set both enabledInnerScrolling and enabledContentTapInteraction to false?

It solved my problem for react native switch,
for any slider in use you also need to disable enabledContentGestureInteraction.

[roshangm1]

Hmm cool. Tried the workaround and it's working. Hope your PR gets merged soon.
In the meantime, do you think #15 is related ? Or were you even able to reproduce the issue ? @osdnk

[osdnk]

I was able to repro, but I don’t have now a strong opinion

[sudiddo]

is this fixed yet in the new release?

[JakeHadley]

@osdnk Looks like the pull is ready, no? This blocks a lot of plans for our app, possible to merge?

[moxorama]

And react-native-gesture-handler not working on iOS, so we have to choose touchable dependent on OS

[JakeHadley]

@osdnk I think the big question is if this pull is what would fix this issue. If so, it's waiting to be reviewed/merged.

[Pholenk]

I face a little difference from this problem.
I use FlatList, TextInput and TouchableOpacity from the Gesture Handler in BottomSheet.
I use TextInput in the BottomSheet header to filter the data that will be created by FlatList. If TextInput never focuses when BottomSheet appears, BottomSheet can hide when I touch each item, or I can say, it can be programmatically hidden. But, once TextInput is focused, BottomSheet won't hide programmatically.
IDK why this BottomSheet can not be hidden but the onPress function is executed properly.
FYI, I put this.bottomSheet.current.snapTo (0) in the onPress function with the method for saving selected items.

I hope this problem will be resolved in the next release because my boss has asked when I can release this application.

[rgoldiez]

Might be resolved by the PR I just submitted: #85

[rgoldiez]

@sebinq - were you able to try the PR I submitted? It’s working great for me (both iOS and Android) but your use case may be different.

[sebqq]

@rgoldiez i didn't right now I'm in busy but tomorrow maybe :)

[Under-Warz]

@rgoldiez same issue with the new prop enabledContentTapInteraction on Android

[dineshmm23]

@Under-Warz - just to make sure, did you set both enabledInnerScrolling and enabledContentTapInteraction to false?

Set enabledInnerScrolling and enabledContentTapInteraction to false to make work with onPress()

[dkpapo]

I need the internal scroll but with this configuration not working the scroll, works only onpress but the scroll does not, how does this project to operate the scroll and also the onpress
https://market.nativebase.io/view/react-native-cryptostream-app-theme????????????'

[slorber]

Hey

For what it's worth, here's the solution I've found to encapsulate the workaround:

export const AppBottomSheetTouchableWrapper = (
  props: { children: ReactNode } & Pick<
    TouchableWithoutFeedbackProps,
    'onPress' | 'disabled'
  >,
) =>
  Platform.select({
    android: <RNGHTouchableWithoutFeedback {...props} />,
    ios: (
      <TouchableWithoutFeedback {...props}>
        <View>
          <View pointerEvents="none">{props.children}</View>
        </View>
      </TouchableWithoutFeedback>
    ),
  });

And I have to wrap the existing touchable component (without providing it the onPress prop:)

      <AppBottomSheetTouchableWrapper onPress={onPress}>
        <AppButton>ButtonText</AppButton>
      </AppBottomSheetTouchableWrapper>

I'm happy with that as it seems to encapsulate the workaround with a common abstraction for both platforms

[timothystewart6]

Does anyone have a workaround to make a <FlatList /> scrollable? I have used a combination of these workarounds within my app (we use lots of sheets with Touchbales in renderContent and renderHeader and FlastLists within renderContent) and none of the workarounds seem to allow scrolling within a <FlatList /> for Android only. iOS works great. Same goes for a WebView within renderContent

I have tried setting each enabledInnerScrolling={true/false} enabledContentTapInteraction={true/false} enabledGestureInteraction={true/false and it didn't seem to make a difference.

[timothystewart6]

When I inspect there's a <BottomSheetBehavior /> blocking gestures above my components.

[ospfranco]

Have you tried using flatlist component from react native gesture package?

[timothystewart6]

@ospfranco I have, thank you. Unfortunately it's the same. I think it is stemming from having multiple sheets rendered at once and somehow it's pushing a BottomSheetBehavior up, even when all sheets are closed. This is my best guess so far. It's not consistent either, sometimes it's there, sometimes it's not.

[Ratzz30]

Hey Guys. I too encountered the same issue. and I have tried an alternative solution and it worked for me and per my requirement.
I just added an Alert on TouchableOpacity and on Alert OnPress handled the HideBottomSheet.

Alert.alert(
'Alert Title',
'My Alert Msg',
[
{
text: 'Cancel',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
{
text: 'OK', onPress: () => {
this.bs.current.snapTo(0);
}
},
],
{ cancelable: false },
);

[safaiyeh]

Nice, I'm assuming the first tap brings the content to view.. then gets initialized. Not exactly sure if that logic sounds right. Might be a step in the right direction about the bug.

[danielidt]

yea @safaiyeh i was having the same issue, i created a button to snapTo but it took two button presses to get the component to respond.

what's interesting is that in my other project (expo based), this works just fine
but this current non expo project has the issue.

TouchableOpacity from RN is also not working on android
TouchableWithoutFeedback works fine

react version 16.8.1
react native version 0.61.3
react native gesture handler 1.5.3
react native reanimated 1.7.0

[safaiyeh]

Yeah I tried TouchableOpacity and it didn’t work. So I came up with the double call because of the double tap.

[andywu0408]

This problem still exists and @safaiyeh double call workaround does not work for me unfortunately. Will this be fixed anytime soon? Thank you!
edit:

@Under-Warz - just to make sure, did you set both enabledInnerScrolling and enabledContentTapInteraction to false?

setting these 2 to false works for me actually! not sure why, but thanks!

[greenfrvr]

Used same workaround as @safaiyeh, issue is reproducible for both platforms

[ninjz]

Same issue. Again @safaiyeh 's workaround works for me

[micheilsgrey]

One work around i found was to call snapTo twice.

<TouchableOpacity 
  onPress={() => {
    bottomSheetRef.current?.snapTo(0);
    bottomSheetRef.current?.snapTo(0);
  }}
>

I don't know do i have same issue but evry time i am tring to close bottom sheet after pressing button inside the sheet, it doesnt closing even tho i see that my method working (i am changing quality of a hls stream in player) but snapTo doesnt working. And aftet second press it working exactly how i want, but now i need to press 2 times button which shows bottom sheet.

  chooseQuality = (quality: ParsedStream) => {
    this.setState({
      currentQuality: quality.url
    })
    this.bottomSheet.current.snapTo(1);
    this.bottomSheet.current.snapTo(1);
  }

copying evrywhere where i call snapTo and call it 2 times fixes my problem, but oh my this is some mess for me, i am new to react and js and this is looking like a terrible workaround... but, man, with my knowledge of coding i have no idea what is the better way to fix it.

[anastely]

Hello Guys,
Hope you Fine,

I have same issue, in render content, I import my own component "Player Controller"
but I can't press to any action inside it, So How can I solve it?

 const renderContent = () => {
  
    return (
      <AnimatedView
        style={[styles.contentContainer, {opacity: animatedContentOpacity}]}>
              <Player />
       </AnimatedView>
   )
}

[Fallup]

For me the issue was that I had to put the BottomSheet View above the screen content View in the component tree:

<View>
   <View style={{flex: 1}}>
      ...BottomSheet here
   </View>
   <View>
     ... actual screen content here
   </View>
</View>

It didn't matter what zIndex I specified to the BottomSheet it was correctly placedin the bottom but the there was always some glitch with the interactive elements - either buttons or scroll view was not tap-able. Only the order of elements solved this for me.

Also I have few buttons and horizontal scroll view inside the BottomSheet and it is working fine with standard Button from react-native, but I had to use ScrollView from gesture-handler:

import { ScrollView } from 'react-native-gesture-handler'

My BottomSheet configuration looks like this:

      <BottomSheet
        ref={refBottomSheet}
        snapPoints={snapPoints}
        initialSnap={0}
        enabledManualSnapping
        enabledBottomInitialAnimation
        enabledBottomClamp
        overdragResistanceFactor={200}
        enabledContentTapInteraction={true}
        enabledInnerScrolling={false}
        enabledContentGestureInteraction={false}
        renderContent={renderFooterContent}
        renderHeader={renderFooterHeader}
      />

[khalid283]

@timothystewart6 Did you able to solve the Webview interaction problem?

[hayyaun]

I haven't tried that. you can send make a sandbox.

@timothystewart6 Did you able to solve the Webview interaction problem?

[HAFDIAHMED]

yes i have the same problem with bottomsheet when i put a touchableopacity , it didnr work any help pleaase ?
here is my code
` <BottomSheet
isVisible={isVisible}
containerStyle={{backgroundColor:'green',marginTop:metrics.heightPercentageToDP(50),borderTopLeftRadius:20,borderTopRightRadius:20}}
modalProps={{
animationType: 'fade',
hardwareAccelerated: true,
onRequestClose: () => {
setVisilibe(!isVisible);
},
}}>
<Icon name="close" color="white" size={50} onPress={()=>setVisilibe(false)} style={{alignSelf:'center'}}/>

    <Button text="hello from bottomsheet2" onPress={()=>setVisilibe(!isVisible)}/>
    <TouchableOpacity onPress={()=>setVisilibe(!isVisible)} style={{borderWidth:2}}>
      <Text>helooooooooooooo</Text>
    </TouchableOpacity>
    


  </BottomSheet>`