Example for displaying modal or card using latest react-native-navigation library

Question

I have been searching for a beginner example for creating modal and opening in react-native with stack navigation. But unable to find one.

I created one with below stack group

<Stack.Group screenOptions={{ presentation: "modal" }}>            
            <Stack.Screen
              name="AstroCard"
              component={AstroCard}
              options={{ contentStyle:{margin:20,backgroundColor:"transparent"} }}
            />
          </Stack.Group>

and on press of button, I used props.navigation.navigate("AstroCard")

when i do this, AstroCard screen opens without the back navigation etc, but am not able to set the height or margin to make it look like a overlay. I tried card as well, but couldn't get it to work. Can someone help me with a simple example of how i can implement a card or modal like an overlay.

Answer 1

you can do it without navigation as well here is the sample code for modal overlay

First add one useState like this:

Then add following code

Some styling as well