Show Card Overlay in React-Native - react-native

Question

I want when the user is not verified to show an overlay at the Top of the screen that the user can click on close on verify button to get rid of it.
Also, I want it to show permanently above all screens until the user dismiss it.
How can I do that functionality ?

Answer 1

You can Alert in every screen. You can do it on your navigation folder by using <NavigationContainer> . I think for navigation , you already used it. So, add something on onReady and onStateChange of NavigationContainer.
Customise the Alert as your expectations. You can do the desired task inside onPress of Alert. In described code, the notVerify value is what you have set to check the user verification.
A demo is :
const routeNameRef = useRef<string | undefined>('');
const navigationRef = useNavigationContainerRef();
<NavigationContainer
ref={navigationRef}
onReady={() => {
routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;
if(notVerify){
Alert.alert(
"Alert Title",
"My Alert Msg",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
]
);
}
}}
onStateChange={async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.current?.getCurrentRoute()?.name;
if (previousRouteName !== currentRouteName) {
if(notVerify){
Alert.alert(
"Alert Title",
"My Alert Msg",
[
{
text: "Cancel",
onPress: () => console.log("Cancel Pressed"),
style: "cancel"
},
{ text: "OK", onPress: () => console.log("OK Pressed") }
]
);
}
}
routeNameRef.current = currentRouteName;
}}
>
<RootNavigator /> //This is the screens section(Stack.screen function) of your app. I did it inside a function name RootNavigator, so I passed this inside this.
</NavigationContainer>
);