React-native-screens: Is there any example of usage for native stack?

[muhammadwafa]

I am using react-native-screens with react-native native stack navigator from react-navigation, but now native stack navigator is exist in react-native-screens, so How can I canfigur it safely ?? is there any example? I saw the example as it was still with react-navigation.

[kyle-ssg]

From what I've been able to see, the actual usage of react-native-screens by react-navigation is currently very limited in that there's no actual support for stacks and it simply uses the screens part for efficient memory consumption.

The best example I've seen of getting this lib working currently is https://github.com/ajsmth/earhart/.

[muhammadwafa]

@kyle-ssg thank you for recomendation, but native stack navigator is work very smooth and fast for me. My question was only how can I use native stack which available with react-native-screens, and about options there is no problem it is Ok for me. I just need to know how can I use it.

[muhammadwafa]

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

const MyStack = ()=> (
    <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="ChatList" component={ChatList}/>
        <Stack.Screen name="Contacts" component={Contacts} />
    </Stack.Navigator>
);

As you can see createNativeStackNavigator comes from @react-navigation/native-stack. this works well for me, but now I updated my react-navigation and react-native-screens, and createNativeStackNavigator move to react-native-screens and here I am stucked which how can I use it.

[ScottDikowitz]

@muhammadwafa You can import it like this:
import { createNativeStackNavigator } from 'react-native-screens/native-stack';

It works pretty much the same.

[muhammadwafa]

Thank you I will check it out

[Hirbod]

https://github.com/software-mansion/react-native-screens/blob/master/native-stack/README.md

The readme is right here. Performance is awesome, native pagesheet modal support, nestable, large header with collapse support. I am using native-stack only but it’s also mixable with js-stack

In order for all hooks to work you need to wrap a NavigationContainer from react-Navigation around it

[muhammadwafa]

Thank you @Hirbod

[WoLewicki]

Is your issue solved @muhammadwafa?

[muhammadwafa]

Yeah thank you.