th3rdwave / react-navigation-bottom-sheet Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
<BottomSheet.Navigator
screenOptions={{
backdropComponent: _renderBackdrop,
snapPoints,
}}>
<BottomSheet.Screen name={'RootStack'} component={RootStack} />
<BottomSheet.Screen name={'SignUpSheet'} component={SignUpSheet} />
<BottomSheet.Screen
name={'SignInSheet'}
component={signInSheet}
options={{
keyboardBehavior: 'interactive',
}}
/>
</BottomSheet.Navigator>
// SignInSheet.tsx
<BottomSheetView style={{ ...styles.container }}>
<Inner style={{ ...styles.innerContainer }}>
<Input placeholder={'EMAIL'} />
<Input placeholder={'PASSWORD'} />
</Inner>
</BottomSheetView>
I configured it like this, but when the keyboard comes up, the related options don't apply
It's the same if you put it in Navigator.screenOptions
Can you take a look at this problem?
I discovered this while I was considering the fusion of @gorhom/bottom-sheet
and @react-navigation
.
Thank you for keeping my time
Is not an issue, but it would be amazing to implement this hook useBottomSheetDynamicSnapPoints
out of the box, like a screenOptions
property. I can contribute if is necessary. Or in case it would be hard we can make a little section in the README how to implemented with the current status of the package.
When i use chrome debugger to debug my app, i have to double press or press anywhere in the screen to open the sheet.
The properties PlatformkeyboardBehavior and keyboardBlurBehavior are not effective
I'm having trouble locating the option to define the background color for the sheet.
Are we allowed to use native modal inside this navigator ?
My screen as modal opens a bottomsheet, weird behaviour
I use Tabs
inside my navigator, maybe it isn't handled for now ?
<Stack.Group
screenOptions={{
presentation: 'fullScreenModal',
gestureEnabled: false,
}}
>
<Stack.Screen
name={CONSTANTS.navigation.Screens.ImageDetails}
component={ImageDetails}
options={{ animation: 'fade' }}
/>
<Stack.Screen name={CONSTANTS.navigation.Screens.GroupCU} component={GroupCU} />
<Stack.Screen
name={CONSTANTS.navigation.Screens.PostCU}
component={PostCU}
options={{}}
/>
<Stack.Screen name={CONSTANTS.navigation.Screens.PostIn} component={PostIn} />
</Stack.Group>
Hello!
I have a sheet view with a scrollable list. The scroll doesn't work! We've tried many ways to solve it but nothing works!
I've reproduced the issue within a snack
Please Help !
iOS uses FullWindowOverlay to achieve a fullscreen modal.
Is something like this also possible on Android?
Hi,
I am using this library for two types of navigation views. One is a bottom sheet and another is what I call a "floating window", which are these views that pop up from the bottom:
My implementation is that I just have a snapPoint that is 100% and then I centralize a small view in the middle of the transparent modal.
With the new 0.2.4 update, I am suddenly unable to centralize these windows in the middle of the screen. All of my views are sticky to the top, regardless of what styles I try to change. I can of course reduce the snap point, but that doesn't work dynamically.
I can see that the update includes the dynamic snap points (content), but I guess that's assuming the content run to the bottom of the screen, hence why its know working for me.
I can see a fix for me is to set contentHeight on the component to undefined in BottomSheetView.tsx.
I understand that my implementation is not really using your library as a "bottom sheet", so I understand if its not something you feel like taking into consideration. But it would be nice to be able to enable/disable it, since this minor update have had a major impact on my app ๐
Hello!
In my React Native app, I use some complex navigation logic, as follows:
Navigation container
โโโ Root navigator
โ
โโโ Bottom-sheet navigator
โ
โโโ Bottom-Tab navigator
As you see, the bottom-sheet navigator is wraped inside Root navigator which is of type native-stack.
Now the issue in code is : When I use Bottom-sheet navigator a screen inside Root navigator, and set headerShow
as follows:
<Stack.Screen
name={"GlobalBottomSheet}
component={NotificationBottomSheetNav}
options={{
headerShown: false
}}
/>
When I run the app, I notice the existence of a default text "GlobalBottomSheet" as header on top of some screens (screens wrapped inside the bottom-sheet navigator.
Note: When I set the headerTitle=" "
, it disappears, but I see that it becomes a space.
What I need is: Please verify the property headerShown
and how it works.
I am testing the SimpleExample..., https://github.com/th3rdwave/react-navigation-bottom-sheet/blob/main/example/src/SimpleExample.tsx
When I open let's say 6 BottomSheets and then press the back button "<" QUICKLY, all the BottomSheets do not close, but if the app is exited, when I reopen the app the screen shows me which is in Sheet Screen 5, I press the CLOSE THIS SHEET button and it says "Console Error The action 'GO_BACK' was not handled by any navigator.". What am I doing wrong?
Thanks a lot for this library, I was planning to create one and during my search found this brand new one !
During the implementation everything seems to work fine except one thing, when using BottomSheetFlatList
in the screen with at least 2 snapPoint it's not working.
Correct behaviour:
You should be able to scroll to the last snapPoint form the BottomSheetFlatList
.
Actual behaviour:
Scroll event on BottomSheetFlatList
aren't handle at all.
I've take a look on the view three, and I think it may be related to the fact that each screen is inside a react-navigation SceneView
.
Not sure at 100%, but I've seen some issue using BottomSheetFlatList
in nested view on @gorhom/bottom-sheet
library.
Do you think we have an option to fix this problem ?
Lack of stackBehavior property
Here is the diff that solved my problem:
diff --git a/node_modules/@th3rdwave/react-navigation-bottom-sheet/lib/typescript/types.d.ts b/node_modules/@th3rdwave/react-navigation-bottom-sheet/lib/typescript/types.d.ts
index e03cf4e..d807543 100644
--- a/node_modules/@th3rdwave/react-navigation-bottom-sheet/lib/typescript/types.d.ts
+++ b/node_modules/@th3rdwave/react-navigation-bottom-sheet/lib/typescript/types.d.ts
@@ -31,6 +31,8 @@ export declare type BottomSheetNavigationOptions = Omit<BottomSheetProps, 'conta
* @type Array<string | number>
*/
snapPoints?: Array<string | number>;
+
+ stackBehavior?: 'push' | 'replace'
};
export declare type BottomSheetNavigatorProps = DefaultNavigatorOptions<ParamListBase, BottomSheetNavigationState<ParamListBase>, BottomSheetNavigationOptions, BottomSheetNavigationEventMap> & BottomSheetNavigationConfig;
export declare type BottomSheetDescriptor = Descriptor<BottomSheetNavigationOptions, BottomSheetNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
diff --git a/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/types.tsx b/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/types.tsx
index eb22fea..78af81b 100644
--- a/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/types.tsx
+++ b/node_modules/@th3rdwave/react-navigation-bottom-sheet/src/types.tsx
@@ -89,6 +89,8 @@ export type BottomSheetNavigationOptions = Omit<
* @type Array<string | number>
*/
snapPoints?: Array<string | number>;
+
+ stackBehavior?: 'push' | 'replace'
};
export type BottomSheetNavigatorProps = DefaultNavigatorOptions<
Hello, I'm writing to you this as an urgent issue. After passing few hours to configure the bottom-sheet navigator in my BIG app. Now, I come to show the content of it, which is a list. Even with BottomSheetScrollView I can't scroll down or top. Please help.
Hi there, thank you for the great library, it is a great abstraction over the bottom sheet library for routing!
An issue I came across was needing to show a single bottom sheet in a transparent modal over a screen like this:
const Stack = createNativeStackNavigator();
const BottomSheet = createBottomSheetNavigator();
function MyModal() {
return (
<BottomSheet.Navigator>
<BottomSheet.Screen
component={MyModalComponent}
name="MyModal"
options={MyModalComponent.options}
/>
</BottomSheet.Navigator>
);
}
export function HomeStack() {
return (
<Stack.Navigator>
<Stack.Screen
component={HomeScreen}
name="Home"
/>
<Stack.Group screenOptions={{ presentation: "transparentModal" }}>
<Stack.Screen
component={MyModal}
name="MyModalBottomSheet"
/>
</Stack.Group>
</Stack.Navigator>
);
}
If my HomeStack
has lots of other screens that I don't want to be shown as bottom sheets then the above I think is the only option. But this library seems to require that the first screen in the bottom sheet navigator be your app content, not a modal. I'm not sure the best solution but I've added the below patch with a firstScreenIsModal
option to always show the bottom sheet provider if true.
I'm happy to submit a PR with the below patch if you think it is a good approach but wanted to get your thoughts on it first!
// in BottomSheetView.tsx
+ const firstScreen = descriptors[state.routes[0].key];
+ const { firstScreenIsModal = false } = firstScreen.options
+
// Avoid rendering provider if we only have one screen.
- const shouldRenderProvider = React.useRef(false);
+ const shouldRenderProvider = React.useRef(firstScreenIsModal);
shouldRenderProvider.current =
shouldRenderProvider.current || state.routes.length > 1;
- const firstScreen = descriptors[state.routes[0].key];
return (
<>
- {firstScreen.render()}
+ {firstScreenIsModal ? null : firstScreen.render()}
{shouldRenderProvider.current && (
<BottomSheetModalProvider>
- {state.routes.slice(1).map((route) => {
+ {state.routes.slice(firstScreenIsModal ? 0 : 1).map((route) => {
const { options, navigation, render } = descriptors[route.key];
See usage:
const renderFooter = useCallback((props: BottomSheetFooterProps) => {
console.log('render')
return (
<BottomSheetFooter {...props} bottomInset={Metrics.baseMargin}>
<Text
style={{
color: 'white',
}}
>
consentScreenDisclaimerText
</Text>
</BottomSheetFooter>
)
}, [])
<MyStack.Screen
name="MyScreen"
component={MyScreen}
options={{
footerComponent: renderFooter,
snapPoints: ['20%'],
}}
/>
Swipe-to-close the BottomSheetModal
doesn't work neither on Emulators nor on physical devices. Handle just doesn't respond.
Could there be a common gotcha going on here? My navigator is as vanilla as it gets, except for a backdrop
const renderBackdrop = useCallback(
(props: BottomSheetBackdropProps) => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={0}
disappearsOnIndex={-1}
opacity={0.8}
pressBehavior="close"
/>
),
[],
);
It seems really hard to close all open modals. I have two modals that are open using stackBehavior: 'replace'
.
The second modal contains a form that navigates to a different screen on submit. When I submit, it navigates to the new screen, and then opens the old modal again.
I have tried calling dismissAll
from useBottomSheetModal
. I have tried doing calling Navigation.goBack()
and then Navigation.navigate
.
Hello ! I'm upgrading one of my large private Expo projects and i thought about updating this library. it seems ^0.3.2 is not suitble for iOS(however the working version is: ^0.2.4
);
Please check the following expo snack: https://snack.expo.dev/@iga-frg/react-native-bottomsheet-navigator-demo
When you trying to pan down the screen with opened keyboard the bottom sheet throws an error that it tried to synchronously call function dismiss from a different thread.
It seems to be happening somewhere around here https://github.com/gorhom/react-native-bottom-sheet/blob/2e558d13fdb52a83d5b465779ec3517fcfb131c2/src/hooks/useGestureEventsHandlersDefault.tsx#L301, but I can see that keyboard dismissing here is wrapped in runOnJS
, so not sure why the error appears. Maybe you guys met with such issue before?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.