React-native-screens: useScreens not working correctly with nested navigators

[raphaelrk]

Cross post from react-navigation issues, just so that it's on the radar here as well: link

Summary: useScreens in the new expo client results in the rootnavigator being blank

[muhammadwfa]

same issue in react-native without expo

[heysailor]

Should be fixed now: https://github.com/expo/expo/issues/4371

[jenshandersson]

Seems fixed for Expo, but how do we without Expo fix this issue?

Update: Ignore my comment above, it my problem seems to be related to a horizontal Flatlist. Isn't not rendering when useScreens() is used. I will troubleshoot...

[owinter86]

I believe this is still an issue and facing it with the lastest version of react-native-screens

https://github.com/react-navigation/navigation-ex/issues/163

[WoLewicki]

This issue seems outdated, can I close it @raphaelrk ?

[muhammadwafa]

I actually dont know where to put this, is the following ok?

App.js

import React, { createRef } from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

// this is where is I used it.
import { enableScreens } from 'react-native-screens'; enableScreens();

import Followers from "./screens/profile/followers";
import LiveChat from "./screens/livechat/livechat";
import GroupEdit from "./screens/group/groupedit";
import GroupChat from './screens/group/groupchat';
import ChatList from "./screens/chat/chatlist";
import Contacts from "./screens/contacts";
import Profile from "./screens/profile";
import Pro from "./screens/profile/pro";
import DeActive from "./pinc/deactive";
import Chat from "./screens/chat/chat";
import MyContainer from "./container";
import PinCode from "./pinc/confirm";
import Group from "./screens/group";


export const containerRef = createRef();
const Stack = createNativeStackNavigator();

const MyStack = ()=> (
    <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="ChatList" component={ChatList}/>
        <Stack.Screen name="Contacts" component={Contacts} />
        <Stack.Screen name="Followers" component={Followers} />
        <Stack.Screen name="MyContainer" component={MyContainer}/>
        <Stack.Screen name="GroupChat" component={GroupChat}/>
        <Stack.Screen name="GroupEdit" component={GroupEdit}/>
        <Stack.Screen name="LiveChat" component={LiveChat}/>
        <Stack.Screen name="DeActive" component={DeActive}/>
        <Stack.Screen name="Profile" component={Profile}/>
        <Stack.Screen name="PinCode" component={PinCode}/>
        <Stack.Screen name="Group" component={Group}/>
        <Stack.Screen name="Chat" component={Chat}/>
        <Stack.Screen name="Pro" component={Pro}/>
    </Stack.Navigator>
);

export default ()=> (
    <NavigationContainer ref={containerRef}>
      <MyStack />
    </NavigationContainer>
);

[WoLewicki]

@muhammadwafa if you are asking where to use enableScreens(), it should be done in the main file of your project. If it is so, it's ok.

[muhammadwafa]

I dont have main.js ifle my root file is index.js, but my all route is in my App.js as you can see in the above code. so please see the above code is it the right place as I have put it?

[WoLewicki]

Yes, the top of the App.js looks like the right place in your case.

[muhammadwafa]

thank you

[raphaelrk]

This issue seems outdated, can I close it @raphaelrk ?

@WoLewicki I have no idea if the issue is still around or not as I've moved on from that project, but this does seem outdated / closing it!