How to remove warning in React native

Question

I am working on an app and I am using bottomTabNavigator but in mean time I am getting this warning! ( Look like you're passing an inline function for 'Component' prop for the screen 'Feed' (e.g component={()=><SomeComponent/>)). Passing an inline function will cause the component state to be lost on re-render and cause perf issue since it's re-created every render. You can pass the function as children to 'Screen' instead to achieve the desired behaviour.

I know I am doing something wrong but I didn't figure out what's wrong with my code. I am new to React native, could someone please help me how to solve this warning .

Code

 return (
      <NavigationContainer>
        <Tab.Navigator
          initialRouteName="Home"
          tabBarOptions={{
            activeTintColor: "#e91e63"
          }}
        >
          <Tab.Screen
            name="Home"
            component={props => (
              <PharmacyHome
                catId={this.props.navigation.state.params}
                {...props}
              />
            )}
            options={{
              tabBarLabel: "Home",
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="home" color={color} size={size} />
              )
            }}
          />
          <Tab.Screen
            name="Notifications"
            component={Notifications}
            options={{
              tabBarLabel: "Updates",
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons name="bell" color={color} size={size} />
              )
            }}
          />
          <Tab.Screen
            name="Profile"
            component={Profile}
            options={{
              tabBarLabel: "Profile",
              tabBarIcon: ({ color, size }) => (
                <MaterialCommunityIcons
                  name="account"
                  color={color}
                  size={size}
                />
              )
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    );

Answer 1

Quick Solution

Move your component definition into a separate line of code

        component={props => (
          <PharmacyHome
            catId={this.props.navigation.state.params}
            {...props}
          />
        )}

Instead

const YourComponent = props => (
  <PharmacyHome catId={this.props.navigation.state.params} {...props} />
);

      <Tab.Screen
        name="Home"
        component={YourComponent}

Explanation

Components use reference identity to determine when to re-renders ... so by passing component-definition as a prop, you're forcing it to create a new-object as a component with each-render ... causing unnecessary-re-renders for Tab.Screen, and no-state will be preserved between renders for YourComponent

Answer 2

If you need to pass a non-serializable props, such as a function, then you can do this instead:

<Stack.Screen name="Home">
  {props => <PharmacyHome catId={this.props.navigation.state.params} {...props} />
</Stack.Screen>

Answer 3

I made it work by passing what I wanted through params instead of props. For you, it would look like this:

<Tab.Screen
    name="Home"
    component={PharmacyHome}
    initialParams={{ catId: this.props.navigation.state.params }}
/>

Hope this helps

Answer 4

The other answers do the job but these solutions have severe performance issues if your screen has a lot of components, in my case I had a Flatlist with elements ever increasing on scrolling.

So I figured out a solution. You can use the property 'children' to pass an element type jsx like instead of the property 'component'.

I'm using react navigation 5.x

<Tab.Screen
    name="Home"
    children={() => <PharmacyHome catId={this.props.navigation.state.params}/>}
    .
    .
    .
/>

This had no performance issues compared to what I was getting when trying for other solutions.