[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.

[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>

[numandev1]

it will resolve your problem

App.js

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

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

bottomSheetFIle.js

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

<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

[mustapha-ghlissi]

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>

[ghulamhaider1]

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>

This one worked for me as well. You just need to wrap your Bottom sheet component with Portal and wrap bottom tab component with Portal.Host

[jerearaujo03]

Use this:

https://github.com/gorhom/react-native-portal

[AlejandroGutierrezB]

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>

This works on IOS but on Android touches are not being captured, its like nothing was there as I can scroll the ScrollView that is behind the bottomsheet.

Any workarounds?

[aliburhankeskin]

This method fixed the issue for me as well.

TabNavigator Component

export default function TabNavigator() {

  const navigationPosition = useSelector((state) => state.GlobalReducer.navigationPosition); 

        return (
            <Tab.Navigator
              tabBarOptions={{
                style: {
                  position: 'absolute',
                  zIndex: navigationPosition, // -1 or 0
                },
              }}     
            >

       // Something

    </Tab.Navigator>
  );
}

GlobalReducer

import * as $AT from '@actions/ActionTypes';
import INITIAL_STATE from './Store';

const GlobalReducer = (state = INITIAL_STATE, { type, payload }) => {
  switch (type) {
    case $AT.BOTTOM_SHEET: {
      return { ...state, [payload.key]: payload.value, navigationPosition: -1 };
    }
    default:
      return state;
  }
};
export default GlobalReducer;

BottomSheet onPress Event

 const _onPress= () => {
    $AC.homeBottomSheetChange({
      key: 'BottomSheet',
      value: {
        isOpen: true,
      } 
    });
  };

BottomSheet

const BottomSheet = () => {
  const _sheetRef = React.useRef(null);
  const _bottomSheet = useSelector((state) => state.GlobalReducer.BottomSheet);

  useEffect(() => {
    const { isOpen } =_bottomSheet ;
    isOpen 
      ? _sheetRef.current.snapTo(0)
      : _sheetRef.current.snapTo(1);
  }, [homeBottomSheet]);

  const _renderContent = () => (
    <View
      style={{
        backgroundColor: 'white',
        padding: 16,
        height: '100%'
      }}
    >
      <Text>Swipe down to close</Text>
    </View>
  );

  return (    
    <BottomSheet
      ref={_sheetRef}
      snapPoints={_bottomSheet ?.snapPoints}
      initialSnap={1}
      borderRadius={10}
      renderContent={_renderContent}
    />
  );
};

export default React.memo(HomeBottomSheet);

I hope it helps

[gcrozariol]

I think this is the easiest solution until this point: https://github.com/jeremybarbet/react-native-portalize

Wrap you content with Host, and then wrap your BottomSheet with Portal.

App.js:

export default function App() {
  return (
    <NavigationContainer>
      <Host>
        <Content />
      </Host>
    </NavigationContainer>
  );
}

Content.js:

export default function Content() {
  return (
    <View>
      <Portal>
        <BottomSheet
           ref={sheetRef}
           snapPoints={[450, 300, 0]}
           borderRadius={10}
           renderContent={renderContent}
        />
      </Portal >
    </View >
  );
}

Works like a charm!

[AmirDiafi]

From the homepage on GitHub: It's not finished and some work has to be done yet.

• Play with magic config values
• Horizontal mode
• Deal with GH in inner scrollView
• Cleanup code (e.g. measuring of components)

[princefishthrower]

@gcrozariol - I have a colleague telling me that using your react-native-portalize solution removes the sliding up and down animation of the bottom sheet (it just appears immediately) Did you also find this was the case or is there a gotchya or something to get the animation working?