I have implemented Gorhom’s bottomsheet on a react native screen, enabling backdrop doesnt add it on the navigator. Although the backdrop comes behind the screen but it doesnt add on the react navigator. How to fix this? Any help would be greatly appreciated
here is my code of the screen
import { Platform, Text, TouchableOpacity, View, Image, StatusBar, StyleSheet } from "react-native";
import React, { useState, useCallback, useEffect, useRef } from "react";
import styles from "./styles";
import { GestureHandlerRootView, ScrollView } from "react-native-gesture-handler";
import SearchInput from "../../../../../components/general/SearchInput";
import OrderCard from "../../../../../components/general/OrderCard";
import ButtonNextToSearchBar from "../../../../../../assets/ButtonNextToSearchBar.png";
import TruckImage from "../../../../../../assets/truck-fast-dark.png";
import closeButtonImage from "../../../../../../assets/closeButton.png";
import PickupImage from "../../../../../../assets/pickup.png";
import BottomSheet, { BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
function NewOrdersScreen({ navigation }) {
useEffect(() => {
// Function to update navigator options
const updateNavigatorOptions = () => {
console.log("INSIDE UPD NAV")
navigation.setOptions({
tabBarStyle: { backgroundColor: "rgba(0, 0, 0, 0.7)" }
// Example of updating tabBarStyle
// Add more options to update here
});
};
// Call the function to update navigator options
updateNavigatorOptions();
},)
const [bottomSheetOpen, setBottomSheetOpen] = useState(false);
const bottomSheetRef = useRef(null); // Reference to control the BottomSheet
// Memoized function to handle bottom sheet state changes
const handleSheetChanges = useCallback((index) => {
console.log('BottomSheet index changed to:', index);
setBottomSheetOpen(index !== -1);
}, []);
// Function to close the bottom sheet
const closeBottomSheet = useCallback(() => {
console.log(`BOTTOMSHEET STATE BEFORE: ${bottomSheetOpen}`);
setBottomSheetOpen(false);
if (bottomSheetRef.current) {
bottomSheetRef.current.snapToIndex(-1); // Directly set the BottomSheet to close
}
}, [bottomSheetOpen]);
// Log the updated state after it changes
useEffect(() => {
console.log(`BOTTOMSHEET STATE AFTER: ${bottomSheetOpen}`);
if (bottomSheetOpen) {
bottomSheetRef.current?.snapToIndex(1);
} else {
bottomSheetRef.current?.close(); // Use the ref to close the BottomSheet
}
}, [bottomSheetOpen]);
const handleOpenSheet = useCallback(() => {
setBottomSheetOpen(true);
bottomSheetRef.current?.snapToIndex(1); // Open the BottomSheet
}, []);
const snapPoints = [380, 380];
const [togglePickupBtnPress, setTogglePickupBtnPress] = useState(false);
const [BtnIsPressed, setBtnIsPressed] = useState(false);
// Custom backdrop component
const renderBackdrop = useCallback((props) => (
<BottomSheetBackdrop
{...props}
disappearsOnIndex={-1}
appearsOnIndex={1}
opacity={0.7} // Set opacity for a dark backdrop effect
pressBehavior="close"
/>
), []);
return (
<GestureHandlerRootView>
<View style={styles.container}>
<ScrollView automaticallyAdjustKeyboardInsets={true} contentContainerStyle={styles.scrollViewContentContainer}>
<View style={{ flexDirection: "row", alignItems: 'center' }}>
<View style={{ flexGrow: 1 }}>
<SearchInput borderRadius={32} />
</View>
<TouchableOpacity style={styles.button}>
<Image style={styles.buttonImage} source={ButtonNextToSearchBar} />
</TouchableOpacity>
</View>
<View style={styles.cardsContainer}>
<OrderCard orderId={5423635} badgeContent={"Under Review"} />
<OrderCard orderId={5123830} badgeContent={"In Eligibility Verification"} update={"Documents Requested"} />
<OrderCard orderId={6823830} badgeContent={"In Eligibility Verification"} update={"Awaiting Insurance Approval"} />
<OrderCard orderId={9425621} badgeContent={"Approved"} financialResponsibility={"N/A"} numberOfItems={4} />
<OrderCard orderId={9425621} badgeContent={"Approved"} financialResponsibility={"Pending"} numberOfItems={4} />
<OrderCard orderId={9425621} setBottomSheetOpen={setBottomSheetOpen} bottomSheetOpen={bottomSheetOpen} bottom badgeContent={"Approved"} financialResponsibility={"Paid"} numberOfItems={6} />
<OrderCard orderId={2403696} badgeContent={"Ready for Pickup"} financialResponsibility={"Paid"} numberOfItems={4}
pickupDate={"December 3, 2024"} slot={"Morning"}
location={{
firstLine: "RT Specialists Corp",
secondLine: "8220 S Saginaw St, Grand Blanc, MI 48439"
}}
/>
<OrderCard orderId={8173626} badgeContent={"Picked Up"} financialResponsibility={"N/A"} numberOfItems={6}
pickupDate={"September 12, 2024"} slot={"Afternoon"}
location={{
firstLine: "RT Specialists Corp 2",
secondLine: "8420 S Saginaw St, Grand Blanc, MI 48439"
}}
/>
<OrderCard orderId={1103696} badgeContent={"Ready for Shipping"} />
<OrderCard orderId={2457696} badgeContent={"In Transit"} />
<OrderCard orderId={7803631} badgeContent={"Delivered"} />
</View>
</ScrollView>
<StatusBar backgroundColor="black" barStyle={Platform.OS === "ios" ? "dark-content" : "light-content"} />
</View>
<BottomSheet
ref={bottomSheetRef} // Attach the ref to the BottomSheet
index={bottomSheetOpen ? 1 : -1} // Open the sheet when bottomSheetOpen is true
snapPoints={snapPoints}
onChange={handleSheetChanges}
backdropComponent={renderBackdrop} // Custom black backdrop
>
<BottomSheetView>
<View style={styles.bottomsheetDeliveryMethod}>
<View style={styles.closeButtonWrapper}>
<TouchableOpacity style={global.closeButton} onPress={closeBottomSheet}>
<Image source={closeButtonImage} />
</TouchableOpacity>
</View>
<Text style={styles.bottomsheetHeading}> Delivery Method </Text>
<Text style={styles.bottomsheetSubheading}> Choose how you would like to get your order </Text>
<View style={styles.DeliveryMethod}>
<TouchableOpacity style={styles.FlexLight} onPress={() => setTogglePickupBtnPress(!togglePickupBtnPress)}>
<View style={BtnIsPressed ? styles.FInner : styles.FInnerBlue}>
<View style={styles.FIHeading}>
<Image source={PickupImage} style={styles.pickupImage} />
<Text style={BtnIsPressed ? styles.FInnerSubheading : styles.FInnerSubheadingWhite}>
Pickup
</Text>
</View>
<Text style={BtnIsPressed ? styles.FDPara : styles.FDParaWhite}> Pickup your order from our office location </Text>
</View>
</TouchableOpacity>
<View style={styles.FlexDark}>
<View style={[styles.FInner, styles.FInnerDark]}>
<View style={styles.FIHeading}>
<Image source={TruckImage} style={styles.truckImage} />
<Text style={[styles.FInnerSubheading, styles.FInnerSubheadingDark]}>
Delivery
</Text>
</View>
<Text style={[styles.FDPara, styles.FDParaDark]}> We will deliver the order at your doorstep </Text>
</View>
</View>
</View>
</View>
</BottomSheetView>
</BottomSheet>
</GestureHandlerRootView>
);
}
export default NewOrdersScreen;
here is the code for the navigator component, I want this component to turn black when the bottomsheet state is active. Unfortunately its not working
import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import OrdersTabBar from "../../components/general/OrdersTabBar";
import CancelledOrdersScreen from "../../screens/dashboard/Orders/PhysicianOrders/CancelledOrders";
import NewOrdersScreen from "../../screens/dashboard/Orders/PhysicianOrders/NewOrders";
import FulfilledOrdersScreen from "../../screens/dashboard/Orders/PhysicianOrders/FulfilledOrders";
import colors from "../../theme/colors";
const Tab = createMaterialTopTabNavigator();
function PhysicianOrdersTopTabsNavigation(props) {
return (
<Tab.Navigator screenOptions={{
swipeEnabled: false
}} sceneContainerStyle={{
backgroundColor: colors.backgroundSecondary
}} tabBar={(props) => <OrdersTabBar {...props} />}>
<Tab.Screen name="New" component={NewOrdersScreen} />
<Tab.Screen name="Fulfilled" component={FulfilledOrdersScreen} />
<Tab.Screen name="Cancelled" component={CancelledOrdersScreen} />
</Tab.Navigator>
)
}
export default PhysicianOrdersTopTabsNavigation;
I am expecting a black backdrop to cover the navigator as well as soon as open the bottomsheet. Any help would be greatly appreciated