osdnk/reanimated-bottom-sheet-navigator

React Navigation integration for Reanimated Bottom Sheet

Bottom Sheet Navigator

React Navigation integration for Reanimated Bottom Sheet.

npm install @react-navigation/native reanimated-bottom-sheet-navigator reanimated-bottom-sheet

API Definition

To use this navigator, import it from reanimated-bottom-sheet-navigator:

import { createBottomSheetNavigator } from 'reanimated-bottom-sheet-navigator';

const Sheet = createBottomSheetNavigator();

function MySheet() {
  const renderContent = () => (
    <View
      style={{
        backgroundColor: 'tomato',
        height: 300,
      }}
    >
      <Text>Content</Text>
    </View>
  );

  return (
    <Sheet.Navigator snapPoints={[300, 100, 0]} renderContent={renderContent}>
      <Sheet.Screen name="Home" component={Home} />
      <Sheet.Screen name="Notifications" component={Notifications} />
      <Sheet.Screen name="Profile" component={Profile} />
      <Sheet.Screen name="Settings" component={Settings} />
    </Sheet.Navigator>
  );
}

Props

The Sheet.Navigator component accepts the same props as Reanimated Bottom Sheet except initialSnap, which is replaced by defaultSnap:

defaultSnap

Determines initial and default snap point of bottom sheet - the bottom sheet will start at this snap point and after opening it, it'll go back to this snap point when back button is pressed. The value is the index from snapPoints.

Events

The navigator can emit events on certain actions. Supported events are:

sheetOpenStart

This event is fired when the bottom sheet starts opening.

Example:

React.useEffect(() => {
  const unsubscribe = navigation.addListener('sheetOpenStart', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);

sheetOpenEnd

This event is fired when the bottom sheet opens completely.

Example:

React.useEffect(() => {
  const unsubscribe = navigation.addListener('sheetOpenEnd', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);

sheetCloseStart

This event is fired when the bottom sheet starts closing.

Example:

React.useEffect(() => {
  const unsubscribe = navigation.addListener('sheetCloseStart', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);

sheetCloseEnd

This event is fired when the bottom sheet closes completely.

Example:

React.useEffect(() => {
  const unsubscribe = navigation.addListener('sheetCloseEnd', (e) => {
    // Do something
  });

  return unsubscribe;
}, [navigation]);

Helpers

The drawer navigator adds the following methods to the navigation prop:

openSheet

Opens the bottom sheet fully.

navigation.openSheet();

closeSheet

Closes bottom sheet to its default position (specified in defaultSnap).

navigation.closeSheet();

snapSheet

Snaps bottom sheet to a specific snap point.The method accepts following arguments:

• snapPoint - number - The index of the point specified in the snapPoints prop.

navigation.snapSheet(1);

jumpTo

Navigates to an existing screen in the bottom sheet navigator. The method accepts following arguments:

• name - string - Name of the route to jump to.
• params - object - Screen params to merge into the destination route (found in the pushed screen through route.params).

navigation.jumpTo('Profile', { owner: 'Michał' });

Nesting bottom sheet navigators inside others

If a bottom sheet navigator is nested inside of another navigator that provides some UI, for example a tab navigator or stack navigator, then the bottom sheet will be rendered below the UI from those navigators. The bottom sheet will appear below the tab bar and below the header of the stack. You will need to make the bottom sheet navigator the parent of any navigator where the bottom sheet should be rendered on top of its UI.

reanimated-bottom-sheet-navigator's Issues

Navigation Screen options are not passed down when stacks are nested

Hey man,

I love the library. Well done.

Although it works like a treat with the example code, but once the <Sheet.Navigator /> is the top navigator and all other navigators are nested within, the nested <Sheet.Screen /> doesn't get the sheet options.

Here are a pseudo code example:

const RootStack = createBottomSheetNavigator()

<RootStack.Navigator>
  mode="modal"
  snapPoints={[300, 100, 0]}
  borderRadius={15}
  renderContent={() => <Text>Hello world</Text>}>
  <RootStack.Screen
    name="Root"
    component={TabStack} // all tab screens
    options={{ headerShown: false }}
  />
  <RootStack.Screen
    name="Modal"
    component={ModalStack} // all modal screens
    options={{
       headerShown: false,
       gestureEnabled: false,
       cardOverlayEnabled: false,
        ...TransitionPresets.ModalPresentationIOS
     }}
  />
</RootStack.Navigator>

None of these options={{}} are applied once the screens are nested inside the createBottomSheetNavigator

any preview?

>npm install reanimated-bottom-sheet-navigator reanimated-bottom-sheet

npm install reanimated-bottom-sheet-navigator reanimated-bottom-sheet
When I tried the above I got the following error:
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/reanimated-bottom-sheet-navigator - Not found
npm ERR! 404
npm ERR! 404 'reanimated-bottom-sheet-navigator@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

A check at npmjs.com/package/reanimated-bottom-sheet-navigator returned not found as well.

Please help fix this issue.