React Native BottomTabs navigator not lazy loading initial screen

Question

I just added Suspense to my BottomTabNavigator in my React Native app. The problem is that the first screen (HomeScreen) is not displaying - all others do. I see just white background when I navigate to Home Screen.

Here's what my code looks like:

const HomeScreen = lazy(() => import('../screens/HomeScreen'));
const ExploreScreen = lazy(() => import('../screens/ExploreScreen'));
const BlogScreen = lazy(() => import('../screens/BlogScreen'));

const BottomTabs = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
    <Suspense
      fallback={
        <View>
          <Text style={{ color: 'red' }}>Loading screen...</Text>
        </View>
      }>
      <BottomTabs.Navigator
        initialRouteName="Home"
        screenOptions={{
        ...
      }}>
        <BottomTabs.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Home',
            tabBarLabel: 'Home',
            ...
          }}
        />
        <BottomTabs.Screen
          name="Explore"
          component={ExploreScreen}
          options={{
            title: 'Explore',
            tabBarLabel: 'Explore',
            ...
          }}
        />
        <BottomTabs.Screen
          name="Blog"
          component={ScheduleScreen}
          options={{
            title: 'Blog',
            tabBarLabel: 'Blog',
            ...
          }}
        />
      </BottomTabs.Navigator>
    </Suspense>
  );
};

Any ideas?

Did you figure this out? Having the same issue here... – N Meibergen Jul 18 '23 at 18:47 — N Meibergen, Jul 18 '23 at 18:47

score 1 · Answer 1 · answered Jul 18 '23 at 19:25

Well, I got it resolved. It may look like a hack, but it does the trick. Simply wrap the screen component in a Suspense. To do this consistently you may create a HoC:

const SuspenseIt = (Component) => () => <Suspense 
    fallback={
        <Text>Loading...</Text>
        }>
        <Component />
    </Suspense>

And now, instead of passing HomeScreen to the component prop of BottomTabs.Screen you pass SuspenseIt(HomeScreen).

React Native BottomTabs navigator not lazy loading initial screen

1 Answers1