React-native-reanimated-bottom-sheet: [Suggestion Needed] How to show BottomSheet on top of react-navigation BottomTabNavigator

[moxorama]

At this moment it looks like this:

[Brianop]

Im having this issue too, did you find a way to make it work ?

[moxorama]

I've found only one workaround, but it is not nice and I think issue should be opened and we should find a way to use BottomSheet on react-navigation screen.

• I've created my own StoreInfoSheet, which contains BottomSheet, method setStoreId, and made it connected to redux to get information via selectors
• I've placed it in RootContainer, below react-navigation initialization
• I've created BottomSheetService to handle refs to BottomSheet. And I'm passing storeId via saved ref

Some pieces of code
RootContainer.js

 <AppNavigation
                    language={language}
                    ref={(navRef) => {
                        setTopLevelNavigator(navRef);
                    }}
                    persistenceKey="navigation_06172019"
 />
...
<StoreInfoSheet
                ref={(ref) => {
                    BottomSheetService.setBottomSheetRef('stores', ref.getWrappedInstance());
                }}
/>

In this code 'stores' is the name of bottom sheet, because I need more bottom sheets in future. Bottom sheet service is no more than hash of BottomSheet refs.

StoreInfoSheet.js

render() {
     return (
            <BottomSheet
                snapPoints={[320, 0]}
                ref={(ref) => {
                    this.bottomSheet = ref;
                }}
            >
           ...
    )
}

open = ({ storeId }) => {
        this.setState({
            storeId,
        });
        this.bottomSheet.snapTo(0);
    };

And using it

        BottomSheetService.open('stores', {storeId: selectedStoreId});

[murillo94]

Im having this issue too, trying to find a way to make it work but none yet.

[stevelizcano]

Brent from react-navigation wrote an example here:

https://github.com/brentvatne/bottom-sheet-example/blob/master/App.tsx

[murillo94]

@stevelizcano the example is ok but when the bottom sheet is dynamic? Each screen need a different bottom sheet, any ideia? How to pass the content as a children in this case with the bottom sheet in the main router?

P.S.: @moxorama did this but i guess it's a little weird this way (not the correct way, maybe).

[stevelizcano]

I use a global state management like MobX and set a flag to open/mount the respective component when needed. So like {this.globalStore.bottomSheetBActive && } etc.

So if you follow that and use it with the style of brent posted, it should work I believe?

[yousseftarek]

At this moment it looks like this:

How exactly did you get it to show up like that, @moxorama?
Whenever I place it with my BottomTabBar, it always shows up above it.

[moxorama]

@yousseftarek

As you can see it is placed below main AppNavigation component - so it is out of react-navigation hierarchy

[immortalx]

@stevelizcano In Brent's example, how would you access the navigator inside the ProfileSwitcher component?

[cmaycumber]

Can you use a modal component? I'm using it right now and it covers the React Navigation header I'm pretty should it would work the same way for the TabBar.

This is currently how I'm doing it if it helps anyone:

import React, { useEffect, useRef, useState } from 'react';
import { TouchableWithoutFeedback, Modal } from 'react-native';
import { Flex, Text } from '../../../../components';
import BottomSheet from 'reanimated-bottom-sheet';
import Animated from 'react-native-reanimated';
import { useNavigation, useRoute } from '@react-navigation/core';

const BottomDrawer = () => {
    const [mount, setMount] = useState(false);
    const navigation = useNavigation();
    const bottomDrawerRef = useRef<any>(null);
    const [fall] = useState(new Animated.Value(1));

    useEffect(() => {
        bottomDrawerRef.current.snapTo(1);
    }, []);

    return (
        <Flex flex={1}>
            <BottomSheet
                ref={bottomDrawerRef}
                snapPoints={[0, '80%']}
                renderContent={() => (
                    <Flex style={{ backgroundColor: 'white' }} height={'100%'}>
                        <Text>The Sheet</Text>
                    </Flex>
                )}
                onCloseEnd={() =>
                    mount ? navigation.setParams({ bottomDrawerOpen: false }) : setMount(true)
                }
                callbackNode={fall}
            />
            <TouchableWithoutFeedback onPress={() => bottomDrawerRef.current.snapTo(0)}>
                <Animated.View
                    style={{
                        backgroundColor: 'black',
                        position: 'absolute',
                        top: 0,
                        bottom: 0,
                        left: 0,
                        right: 0,
                        opacity: fall,
                    }}
                />
            </TouchableWithoutFeedback>
        </Flex>
    );
};

export const SettingsDrawer = () => {
    const { params }: any = useRoute();
    return (
        <Modal transparent visible={params.bottomDrawerOpen}>
            <BottomDrawer />
        </Modal>
    );
};

I just mount the sheet whenever the modal is mounted and remove the modal when the sheet closes. I'm also currently using the useNavigation and useRoute hooks to get the props from the StackNavigator.

[swaxtic]

This is what i do :

<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE} // remove if not using Google Maps
style={[styles.map,{zIndex:-1}]}
customMapStyle={mapStyle}
region={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
</MapView>
<View style={{flex:1, backgroundColor:'transparent'}}> //create view for bottomsheet
<BottomSheet
snapPoints = {[200, 500, 100]}
ref={ref => this.bottomSheet = ref}
renderContent = {this.renderContent}
renderHeader = {this.renderHeader}
callbackNode={this.sheetOpacity}
initialSnap={0}
enabledBottomClamp={"true"}
overdragResistanceFactor={0}
style={{zIndex:-1}}
>
</BottomSheet>
</View>
<View style={[styles.Bottomnav,{zIndex: 3}]}> ///This is start bottom navigator
<View style={styles.iconBottom}>
<IconFa5
style={{color: '#08b543'}}
onPress={()=> navigation.navigate('HomeScreen')}
name="users"
size={28} />
<Text style={{color: '#08b543'}}>People</Text>
</View>
<View style={styles.iconBottom}>
<IconFa5
style={{color: '#E6EBF4'}}
onPress={()=> navigation.navigate('HomeScreen')}
name="directions"
size={28} />
<Text style={{color: '#E6EBF4'}}>Destination</Text>
</View>
<View style={styles.iconBottom}>
<Icon
style={{color: '#E6EBF4'}}
onPress={()=> navigation.navigate('HomeScreen')}
name="md-settings"
size={28} />
<Text style={{color: '#E6EBF4'}}>Settings</Text>
</View>
</View>
</View>

[special-character]

@stevelizcano In Brent's example, how would you access the navigator inside the ProfileSwitcher component?

@immortalx You need to long press the profile tab at the bottom right in the example for the sheet to show up.

^ For anyone else who was looking for this

[oferRounds]

Any idea how to achieve this for react native navigation? (native tab bar)

[ewal]

I'm experimenting with hiding the tab bar when opening the sheet. In the new version of react navigation (v5) it's possible to set options from a screen on the navigator. To access a parent navigator where your Tabs are configured you can use this.props.navigation.dangerouslyGetParent().setOptions({ tabBarVisible: false });

[Aryk]

@ewal

I'm experimenting with hiding the tab bar when opening the sheet. In the new version of react navigation (v5) it's possible to set options from a screen on the navigator. To access a parent navigator where your Tabs are configured you can use this.props.navigation.dangerouslyGetParent().setOptions({ tabBarVisible: false });

That works but the only problem is that when showing and hiding, you can't smoothly have the modal come up for it.

[ewal]

True, @Aryk
I gave up on that idea tbh.
I'm currently testing a new approach with a context provider that wraps the navigation. It works pretty neatly but I'm still trying to figure out a nice way to inject content into the provider without causing too many re-renders.

[Aryk]

This is what I did:

https://gist.github.com/Aryk/132a746976d48c9959a9eef605217361

• Store list of modals you want to use in mobx array (or any other storage system you want to use)
  
  
  
  • const networkSortOptions = useBottomSheetModal("networkSortOptions"); when I want to use that BottomSheet in that component.
    
    
    
    
    
    • Use React Context to pass in the togglers (show/hide) into your component that wants to use it
    
    
    
  
  

This is best solution I got so far...seems to be working ok.

[ewal]

I have given up on this project for now. I know it's still in alpha but there are too many bugs unfortunately for it to be used in production. Will continue to keep an eye on it though.
.
I solved the problem by snatching this component https://github.com/software-mansion/react-native-reanimated/blob/master/Example/src/Interactable.js and built my own bottom sheet by using inspiration from this component https://github.com/software-mansion/react-native-reanimated/blob/master/Example/src/interactablePlayground/real-life-examples/MapPanel.js in combination with a context provider that's wrapping the navigation component.
Interactable has a public snapTo method that can be called via a reference with the arguments { index: n }.

[julianoddreis]

I solved the tabs problem with this lib: https://github.com/cloudflare/react-gateway
It's like a portal.
It works on react-native when you define a component for GatewayDest. Ex:
<GatewayDest name='global' component={Fragment} />

So, when I call the bottom sheet, I have this:

<Gateway into='global'>
    <BottomSheet
      {...bottomSheetProps}
    />
</Gateway>

[julianoddreis]

Final solution: https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/143#issuecomment-614300015

[nomi9995]

it will resolve your problem

App.js

import { Portal } from 'react-native-paper'

    <Portal.Host>
       <App />
    </Portal.Host>

bottomSheetFIle.js

import { Portal } from 'react-native-paper'

<Portal>
    <BottomSheet
    />
</Portal>

[walidvb]

This prevents any child of BottomSheet to call useNavigation, though, as the child is then outside of the NavigationContainer. I'm seeing this issue creating a Popup, where i can't reuse components because they require that context (or have to refactor so that I can pass the navigation prop down, which is not very convenient..)

[nkbhasker]

This is how I have done it

• Create bottom sheet provider

• Create main stack navigator(somehow bottom sheet doesn't work if tab navigator is not wrapped in a stack navigator)

• Create tab navigator and wrap it inside the bottom sheet provider

Have created a repository for reference: https://github.com/nkbhasker/react-navigation-bottomsheet

[MustaphaGhlissi]

If you are using react-native-paper then wrap your BottomSheet component within a Portal one

import { Portal } from 'react-native-paper';

<Portal>
    <BottomSheet />
</Portal>