Comments (29)
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>
from react-native-reanimated-bottom-sheet.
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>
from react-native-reanimated-bottom-sheet.
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>
from react-native-reanimated-bottom-sheet.
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 react-native-reanimated-bottom-sheet.
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});
from react-native-reanimated-bottom-sheet.
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.
from react-native-reanimated-bottom-sheet.
Brent from react-navigation wrote an example here:
https://github.com/brentvatne/bottom-sheet-example/blob/master/App.tsx
from react-native-reanimated-bottom-sheet.
@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).
from react-native-reanimated-bottom-sheet.
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
from react-native-reanimated-bottom-sheet.
Im having this issue too, did you find a way to make it work ?
from react-native-reanimated-bottom-sheet.
Im having this issue too, trying to find a way to make it work but none yet.
from react-native-reanimated-bottom-sheet.
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?
from react-native-reanimated-bottom-sheet.
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.
from react-native-reanimated-bottom-sheet.
As you can see it is placed below main AppNavigation component - so it is out of react-navigation hierarchy
from react-native-reanimated-bottom-sheet.
@stevelizcano In Brent's example, how would you access the navigator inside the ProfileSwitcher component?
from react-native-reanimated-bottom-sheet.
@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
from react-native-reanimated-bottom-sheet.
Any idea how to achieve this for react native navigation
? (native tab bar)
from react-native-reanimated-bottom-sheet.
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 });
from react-native-reanimated-bottom-sheet.
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.
from react-native-reanimated-bottom-sheet.
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.
from react-native-reanimated-bottom-sheet.
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.
from react-native-reanimated-bottom-sheet.
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 }
.
from react-native-reanimated-bottom-sheet.
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..)
from react-native-reanimated-bottom-sheet.
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
from react-native-reanimated-bottom-sheet.
Use this:
https://github.com/gorhom/react-native-portal
from react-native-reanimated-bottom-sheet.
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?
from react-native-reanimated-bottom-sheet.
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
from react-native-reanimated-bottom-sheet.
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)
from react-native-reanimated-bottom-sheet.
@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?
from react-native-reanimated-bottom-sheet.
Related Issues (20)
- Bottomsheet is under other components
- use in react js app HOT 1
- Bottomsheet automatically opening and closing on rotation HOT 1
- how to scroll list to the bottom? HOT 1
- Overlay HOT 2
- Property 'snapToIndex' does not exist on type 'never'.ts(2339) HOT 2
- Is the package still maintained? HOT 1
- BottomSheet is overlapping the Content
- can't run in RN-cli HOT 1
- enabledGestureInteraction Prop
- not working in RN 0.69 HOT 4
- FlatList wont Scroll Till end of screen HOT 4
- Is this community still active? HOT 1
- BottomSheet import from react-native-reanimated-bottom-sheet is not available in RN 0.69.1 HOT 1
- Drag not working at all
- Preventing keyboard from dismissing with FlatList in BottomSheet
- How to set content height dynamically based on content?
- export 'default'.'Code' (imported as 'Animated') was not found in 'react-native-reanimated' HOT 2
- reanimated-bottom-sheet & react-native-reanimated HOT 4
- Cannot read property 'prototype' of undefined HOT 17
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-reanimated-bottom-sheet.