@react-navigation/native#NavigationHelpersContext TypeScript Examples

render() {
    const { state, descriptors, navigation, lazy } = this.props;
    const { routes } = state;
    const { loaded } = this.state;

    return (
      <NavigationHelpersContext.Provider value={navigation}>
        <SafeAreaProviderCompat>
          <View style={styles.container}>
            <ScreenContainer style={styles.pages}>
              {routes.map((route, index) => {
                const descriptor = descriptors[route.key];
                const { unmountOnBlur } = descriptor.options;
                const isFocused = state.index === index;

                if (unmountOnBlur && !isFocused) {
                  return null;
                }

                if (lazy && !loaded.includes(index) && !isFocused) {
                  // Don't render a screen if we've never navigated to it
                  return null;
                }

                return (
                  <ResourceSavingScene
                    key={route.key}
                    style={StyleSheet.absoluteFill}
                    isVisible={isFocused}
                  >
                    <SceneContent isFocused={isFocused}>
                      {descriptor.render()}
                    </SceneContent>
                  </ResourceSavingScene>
                );
              })}
            </ScreenContainer>
            {this.renderTabBar()}
          </View>
        </SafeAreaProviderCompat>
      </NavigationHelpersContext.Provider>
    );
  }

render() {
    const {
      state,
      navigation,
      keyboardHandlingEnabled,
      mode = 'card',
      headerMode = mode === 'card' && Platform.OS === 'ios'
        ? 'float'
        : 'screen',
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      descriptors: _,
      ...rest
    } = this.props;

    const {
      routes,
      descriptors,
      openingRouteKeys,
      closingRouteKeys,
    } = this.state;

    return (
      <NavigationHelpersContext.Provider value={navigation}>
        <GestureHandlerWrapper style={styles.container}>
          <SafeAreaProviderCompat>
            <SafeAreaConsumer>
              {(insets) => (
                <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
                  {(props) => (
                    <CardStack
                      mode={mode}
                      insets={insets as EdgeInsets}
                      getPreviousRoute={this.getPreviousRoute}
                      getGesturesEnabled={this.getGesturesEnabled}
                      routes={routes}
                      openingRouteKeys={openingRouteKeys}
                      closingRouteKeys={closingRouteKeys}
                      onOpenRoute={this.handleOpenRoute}
                      onCloseRoute={this.handleCloseRoute}
                      onTransitionStart={this.handleTransitionStart}
                      onTransitionEnd={this.handleTransitionEnd}
                      renderHeader={this.renderHeader}
                      renderScene={this.renderScene}
                      headerMode={headerMode}
                      state={state}
                      descriptors={descriptors}
                      onGestureStart={this.handleGestureStart}
                      onGestureEnd={this.handleGestureEnd}
                      onGestureCancel={this.handleGestureCancel}
                      {...rest}
                      {...props}
                    />
                  )}
                </KeyboardManager>
              )}
            </SafeAreaConsumer>
          </SafeAreaProviderCompat>
        </GestureHandlerWrapper>
      </NavigationHelpersContext.Provider>
    );
  }

export default function BottomSheetView({
  state,
  navigation,
  descriptors,
  defaultSnap,
  snapPoints,
  ...rest
}: Props) {
  const [loaded, setLoaded] = React.useState([state.index]);

  if (!loaded.includes(state.index)) {
    setLoaded((l) => [...l, state.index]);
  }

  const sheetRef = React.useRef<BottomSheet>(null);
  const currentSnapPoint = (state.history.find(
    (it) => it.type === 'bottom-sheet'
  ) as { type: 'bottom-sheet'; point: number } | undefined)?.point;

  React.useEffect(() => {
    sheetRef.current?.snapTo(
      currentSnapPoint !== undefined ? currentSnapPoint : snapPoints.length - 1
    );
  }, [currentSnapPoint, snapPoints.length]);

  return (
    <NavigationHelpersContext.Provider value={navigation}>
      {state.routes.map((route, index) => {
        const descriptor = descriptors[route.key];
        const isFocused = state.index === index;

        if (!loaded.includes(index) && !isFocused) {
          // Don't render a screen if we've never navigated to it
          return null;
        }

        return (
          <View
            key={route.key}
            // eslint-disable-next-line react-native/no-inline-styles
            style={{ display: isFocused ? 'flex' : 'none', flex: 1 }}
          >
            {descriptor.render()}
          </View>
        );
      })}
      <BottomSheet
        {...rest}
        ref={sheetRef}
        initialSnap={defaultSnap ?? snapPoints.length - 1}
        snapPoints={snapPoints}
        onOpenStart={() => navigation.emit({ type: 'sheetOpenStart' })}
        onCloseStart={() => navigation.emit({ type: 'sheetCloseStart' })}
        onOpenEnd={() => {
          navigation.dispatch(BottomSheetActions.openSheet());
          navigation.emit({ type: 'sheetOpenEnd' });
        }}
        onCloseEnd={() => {
          navigation.dispatch(BottomSheetActions.closeSheet());
          navigation.emit({ type: 'sheetCloseEnd' });
        }}
      />
    </NavigationHelpersContext.Provider>
  );
}