React Native - Bottom Tab Navigator - error - Passing an inline function will cause the component st-CodePudding

I have a stack navigator which contains a Bottom tab navigator. The first tab of the bottom tab navigator further contains a TopTab Navigator .

This is being done to display a Top Tab as well as a Bottom tab. Each of the other bottom tab screens open a new screen .

Here is the code : ( stack navigator containing Bottom Tab Navigator )

const StackNav = createNativeStackNavigator();
function Main() {
    return (
       <NavigationContainer>
          <StackNav.Navigator>
              <StackNav.Screen
                  name="BottomTab"
                  component={BottomTabScreen}
                  options={{
                     headerTitle: props => <LogoTitle {...props} />,
                     headerBlurEffect: 'dark',
                  }}
             />
         </StackNav.Navigator>
     </NavigationContainer>
   );
  }

The Bottom Tab Navigator is below ( first tab contains an embedded Top Tab Navigator TopTabScreen to display header , rest of the tabs show tabs on the bottom )

const BottomTabScreen = () => {
  return (
    <BottomNav.Navigator barStyle={{backgroundColor: '#febe00'}}>
      <BottomNav.Screen
        name="Home"
        component={TopTabScreen}
        options={{
          tabBarIcon: ({color, size}) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
          labelStyle: {textTransform: 'none'},
          upperCaseLabel: false,
        }}
      />
      <BottomNav.Screen
         name="MyInitiatives"
         component={InitiativesScreen}
         options={{
            tabBarIcon: ({color, size}) => (
            <IonIcons name="rocket-outline" color={color} size={26} />
            ),
         }}
      />

      <BottomNav.Screen 
        name="Contact-Whatsapp" 
        component={() => null}
        listeners={{
          tabPress: (e) => {
                             e.preventDefault();
                             console.log("tabPress tabTwo");
                             let link = 'https://wa.me/xxx';
                             Linking.openURL(link);
          },
        }}
        options={{
           tabBarIcon: ({color,size}) => (
               <FontAwesome name="whatsapp" color={color} size={26} />
           ),
        }}  
     />         
   </BottomNav.Navigator>
  );
 };

So on bottom tab - three tabs will show :

Home - tab which shows the embedded header

MyInitiatives - shows a separate view when clicked

Contact-Whatsapp - this is a tab which I am trying to show which when clicked should open whats app and NOT a new screen , so on clicking the tab - I dont want any 'component' to render , rather simply whats app to open Note - whatsapp is opening but am getting this warning :

WARN  Looks like you're passing an inline function for 'component' prop for the screen 
'Whatsapp' 
(e.g. component={() => <SomeComponent />}). Passing an inline function will cause the 
component state to be lost on re-render and cause perf issues since it's re-created every 
render. You can pass the function as children to 'Screen' instead to achieve the desired 
behaviour.

So questions are : #1 how do I get around this issue ? how do I ensure that on clicking on bottom tab - it should open the link ( in this case - whatsapp ) rather than try and open a component / view ?

CodePudding user response：

The reason for the warning is that you are passing a function to the component prop rather than the name of the function. You can put any component name in there as with the e.preventDefault() it will not be opened. You can just create a small dummy component and pass in the name. Even component={View} should do the job.