I want to display a bottom sheet on clicking the more option from the bottom tab bar option.
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;