1

I want to display a bottom sheet on clicking the more option from the bottom tab bar option. Bttom Tabs

How can I implement such a bottom sheet as shown in the image above with different options to select and with a transparent background? This is my navigation screen. I want to prevent the default behaviour of mounting the screen defined and instead of that display a modal sheet that slides up on clicking the 4th option say here 'More' option.

import 'react-native-gesture-handler';
import React from 'react';
import {Image} from 'react-native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import HomeScreen from '@screens/HomeScreen/HomeScreen';
import CompatibilityScreen from '@screens/CompatibilityScreen/CompatibilityScreen';
import {NavigationContainer} from '@react-navigation/native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {navigationRef} from './NavigationService';
import RemediesScreen from '@screens/RemediesScreen/RemediesScreen';
import MoreScreen from '@screens/MoreScreen/MoreScreen';
import LoginScreen from '@screens/LoginScreen/LoginScreen';
import AppStyles from '@config/Styles';
import images from '@config/Images';

const AppStackNav = createStackNavigator();
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: AppStyles.colors.COLOR_HELIO_TROP,
        inactiveTintColor: AppStyles.colors.COLOR_EAST_SIDE,
        style: {
          backgroundColor: AppStyles.colors.COLOR_SCARLET_GUM,
        },
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: ({focused}) => {
            let iconName;
            if (focused) {
              iconName = images.icons.icon_home_focused;
            } else {
              iconName = images.icons.icon_home_unfocused;
            }
            return <Image source={iconName} style={{resizeMode: 'contain'}} />;
          },
        }}
      />
      <Tab.Screen
        name="Compatibility"
        component={CompatibilityScreen}
        options={{
          tabBarIcon: ({focused}) => {
            let iconName;
            if (focused) {
              iconName = images.icons.icon_compatibility_focused;
            } else {
              iconName = images.icons.icon_compatibility_unfocused;
            }
            return <Image source={iconName} style={{resizeMode: 'contain'}} />;
          },
        }}
      />
      <Tab.Screen
        name="Remedies"
        component={RemediesScreen}
        options={{
          tabBarIcon: ({focused}) => {
            let iconName;
            if (focused) {
              iconName = images.icons.icon_remedies_focused;
            } else {
              iconName = images.icons.icon_remedies_unfocused;
            }
            return <Image source={iconName} style={{resizeMode: 'contain'}} />;
          },
        }}
      />
      <Tab.Screen
        name="More"
        component={MoreScreen}
        options={{
          tabBarIcon: ({focused}) => {
            let iconName;
            if (focused) {
              iconName = images.icons.icon_more_focused;
            } else {
              iconName = images.icons.icon_more_unfocused;
            }
            return <Image source={iconName} style={{resizeMode: 'contain'}} />;
          },
        }}
      />
    </Tab.Navigator>
  );
}

function AppStack({navigation}) {
  return (
    <SafeAreaProvider>
      <NavigationContainer ref={navigationRef}>
        <AppStackNav.Navigator
          initialRouteName={'Home'}
          screenOptions={{
            headerShown: false,
            gestureEnabled: false,
          }}>
          <AppStackNav.Screen name="Login" component={LoginScreen} />
          <AppStackNav.Screen name="Home" component={MyTabs} />
        </AppStackNav.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}
export default AppStack;
Vinay N
  • 249
  • 1
  • 8
  • 32

0 Answers0