How to achieve the status bar showing in the "MyModal" header picture? I followed the exact documentation and steps, but in my project, the status bar is white and does not overlay the previous screen. I have also attached a picture of my status bar. I also tried but no luck
Here's my code
<MainStack.Navigator >
<MainStack.Group>
<MainStack.Screen
name="HomeNavigation"
component={HomeNavigation}
options={{
headerStyle: { backgroundColor: "white", elevation: 0, shadowOpacity: 0 },
headerTintColor: "#966ded",
headerTitleAlign: "left",
title: "Home",
headerRightContainerStyle: { marginRight: "2%" }
}}
/>
<MainStack.Screen name="Appointments" component={Appointments} options={{ gestureEnabled: false, headerShown: false, popGesture: false }} />
<MainStack.Screen name="InstructorMain" component={InstructorMain} options={{ gestureEnabled: false, headerShown: false, popGesture: false }} />
<MainStack.Screen name="Mainscreen" component={Mainscreen} options={{ gestureEnabled: false, headerShown: false, popGesture: false }} />
</MainStack.Group>
<MainStack.Group screenOptions={{ presentation: 'modal'}}>
<MainStack.Screen name="Address" component={Address} options={{ gestureEnabled: false, }} />
<MainStack.Screen component={BuildMealModal} name="BuildMealModal" options={({ navigation }) => ({
headerStyle: { elevation: 0, shadowOpacity: 0 },
headerTitle: "",
headerLeft: "",
headerShown: false,
gestureEnabled: true,
})}
/>
</MainStack.Group>
</MainStack.Navigator>
Here the documentation which i follows:
https://appetize.io/embed/8bnmakzrptf1hv9dq7v7bnteem?autoplay=false&debug=true&device=iphone12&deviceColor=black&embed=true&orientation=portrait&scale=72&screenOnly=false&xDocMsg=true&xdocMsg=true¶ms=%7B%22EXDevMenuDisableAutoLaunch%22%3Atrue%2C%22EXKernelLaunchUrlDefaultsKey%22%3A%22exp%3A%2F%2Fexp.host%2F%40snack%2Fsdk.47.0.0-KOnGIBx7j2%22%2C%22EXKernelDisableNuxDefaultsKey%22%3Atrue%7D