CODEWITHSUNDEEP
reactjsreact-native
In Beomjin
In Beomjin

Reputation: 45

How to prevent re rendering in react-native material-top-tabs-navigatior?

I'm using material top tabs navigatior https://reactnavigation.org/docs/material-top-tab-navigator

When i switching tabs, the components are always re-rendered. How can i prevent re-rendering??

here is my code please help me!!!!

const Menu = () => {
   return (...)
}

const Info = () => {
   return (...)
}

const Review = () => {
   return (...)
}


       <Tab.Navigator 
           screenOptions={{
               tabBarScrollEnabled: false,
               tabBarStyle: { backgroundColor: '#FFFFFF' },
               tabBarPressOpacity: true
           }}
           style={styles.tabBar}
       >
            <Tab.Screen
               name="Menu"
               component={Menu}
               options={{
                   tabBarShowLabel: false,
                   tabBarIcon: ({ forcused, color }) => {
                   return <Text style={styles.tabBarText}>메뉴</Text>;
                   },
               }}
           />
           <Tab.Screen
               name="Info"
               component={Info}
               options={{
                   tabBarShowLabel: false,
                   tabBarIcon: ({ forcused, color }) => {
                   return  <Text style={styles.tabBarText}>정보</Text>;
                   },
               }}
           />
           <Tab.Screen
               name="Review"
               component={Review}
               options={{
                   tabBarShowLabel: false,
                   tabBarIcon: ({ forcused, color }) => {
                   return  <Text style={styles.tabBarText}>리뷰</Text>;
                   },
               }}
           />
       </Tab.Navigator>

Upvotes: 1

Views: 1463

Answers (1)

J.dev
J.dev

Reputation: 1055

This post is a bit old, however for those who face the same issue you can try to add the lazy option to the navigator (or the screen).

const Tab = createMaterialTopTabNavigator();

<Tab.Navigator 
  screenOptions={{
    tabBarScrollEnabled: false,
    tabBarStyle: { backgroundColor: '#FFFFFF' },
    tabBarPressOpacity: true,
    lazy: true                 // add the option here 
  }}
  style={styles.tabBar}
>
...

Restart the server and the screen now only render as it comes to the viewPort. You can also use the lazyPreloadDistance when lazy is enabled.

Here is the official doc

Upvotes: 0

Related Questions