How to display a bottom sheet from React navigation BottomTabNavigator?

I want to display a reanimated-bottom-sheet when I click the tabBarIcon (maybe such as button adding in picture) instead of a component.

I'm using

<Tab.Screen
    name={Name.name_add_application}
    component={Add}
    options={{
      tabBarIcon: ({focused}) => (
        <Image source={TK_Add} resizeMode="contain" style={styles.addBtn} />
      ),
      tabBarButton: props => <CustomTabButton {...props} />,
    }}
    listeners={({navigation}) => ({
      tabPress: e => {
        e.preventDefault();
        navigation.navigate('CreateNew');
      },
    })}
  />

in const Tab = createBottomTabNavigator(); and

<MainStack.Group
  screenOptions={{
    headerShown: false,
    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0)'},
    cardOverlayEnabled: true,
    cardStyleInterpolator: ({current: {progress}}) => ({
      cardStyle: {
        opacity: progress.interpolate({
          inputRange: [0, 0.5, 0.9, 1],
          outputRange: [0, 0.25, 0.7, 1],
        }),
      },
      overlayStyle: {
        opacity: progress.interpolate({
          inputRange: [0, 0.5],
          outputRange: [0, 0.25],
          extrapolate: 'clamp',
        }),
      },
    }),
  }}
  mode="modal">
  <MainStack.Screen
    name="CreateNew"
    component={CreateNew}
    options={{
      animationEnabled: true,
      presentation: 'transparentModal',
    }}
  />
</MainStack.Group>

in const MainStack = createStackNavigator(); to open a Modal component.

But it have a little bit lag, show a white background for about 0.01s and can't scroll (I don't want to use this method anymore).

CodePudding user response：

Did you try to use the custom tabBar props?

Here is an example:

<Tab.Navigator
  tabBar={() => <BottomSheet />}
  screenOptions={{ headerShown: false }}
>
    <Tab.Screen name={...} component={...} />
    <Tab.Screen name={...} component={...} />
    <Tab.Screen name={...} component={...} />
</Tab.Navigator

From a folder perspective you will have something like this

./src/navigators/
  ├──bottom-tabs-navigator.tsx
  └──bottom-sheet/
      ├──bottom-sheet.tsx
      └──bottom-tab-bar.tsx

CodePudding user response：

 <Tab.Screen
    name={translations.logout}
    component={HomeScreen}
    options={{
      tabBarLabel: translations.logout,
      tabBarActiveTintColor: appTheme.themeColor,
      headerTitleAlign: 'center',
      headerStyle:{height: headerHeight},
      tabBarLabelStyle: { fontSize: 14 },
      tabBarIcon: () => (
        <Image source={AppImages.settings} style={CommonStyle.tabBarImage} />
      ),
    }}
    listeners={{
      tabPress: (e) => {
        showLogoutAlert();
        e.preventDefault();
      },
    }}
  />

 e.preventDefault(); will prevent from tapping