Open moxorama opened 5 years ago
Im having this issue too, did you find a way to make it work ?
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.
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});
Im having this issue too, trying to find a way to make it work but none yet.
Brent from react-navigation wrote an example here:
https://github.com/brentvatne/bottom-sheet-example/blob/master/App.tsx
@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).
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 &&
So if you follow that and use it with the style of brent posted, it should work I believe?
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.
@yousseftarek
As you can see it is placed below main AppNavigation component - so it is out of react-navigation hierarchy
@stevelizcano In Brent's example, how would you access the navigator inside the ProfileSwitcher component?
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.
@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
Any idea how to achieve this for react native navigation
? (native tab bar)
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 });
@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 usethis.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.
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.
This is what I did:
https://gist.github.com/Aryk/132a746976d48c9959a9eef605217361
const networkSortOptions = useBottomSheetModal("networkSortOptions");
when I want to use that BottomSheet in that component.
This is best solution I got so far...seems to be working ok.
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 }
.
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>
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>
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..)
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
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>
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
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?
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
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!
From the homepage on GitHub: It's not finished and some work has to be done yet.
@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?
At this moment it looks like this: