Is it possible to make it render when the tab is pressed? in react-native?

I made a tab navigator. When MyTabs is rendered, the Feed component and Notifications component in Tab.Screen are executed, and console.log(‘Feed’) and console.log(‘Notifications’); run together.

However, I want to make only the console.log(‘Feed’) run as only the feedScreen component is rendered when only the Feed tab is clicked. I want only console.log(‘Notifications’) to be executed when only the Notifications tab is clicked. Is this possible?

this is my code

            import {NavigationContainer} from '@react-navigation/native';
            import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

            function FeedScreen() {
            console.log('Feed');
            return (
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>Feed!</Text>
                </View>
            );
            }

            function NotificationsScreen() {
            console.log('Notifications');
            return (
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                <Text>Notifications!</Text>
                </View>
            );
            }

              function Hey() {
               console.log('Hey');
                return (
                 <View style={{flex: 1, justifyContent: 'center', 
               alignItems: 'center'}}>
                <Text>Hey!</Text>
                 </View>
               );
              }



            const Tab = createMaterialTopTabNavigator();

            function MyTabs() {
            return (
                <Tab.Navigator
                initialRouteName="Feed"
                screenOptions={{
                    tabBarActiveTintColor: '#e91e63',
                    tabBarLabelStyle: {fontSize: 12},
                    tabBarStyle: {backgroundColor: 'powderblue'},
                }}>
                <Tab.Screen
                    name="Feed"
                    component={FeedScreen}
                    options={{tabBarLabel: 'Home'}}
                />
                <Tab.Screen
                    name="Notifications"
                    component={NotificationsScreen}
                    options={{tabBarLabel: 'Updates'}}
                />
                   <Tab.Screen
                    name="Hey"
                    component={Hey}
                    options={{tabBarLabel: 'Hey'}}
                />
                </Tab.Navigator>
            );
            }
            export default () => {
            return (
                <NavigationContainer>
                <MyTabs />
                </NavigationContainer>
            );
            };

Answer

The @react-navigation/material-top-tabs package is using react-native-tabs under the hood. You can enable the lazy loading screen feature by providing lazy prop to the Tab.Navigator definition.

Simply update to

<Tab.Navigator
  initialRouteName="Feed"
  screenOptions={{
    tabBarActiveTintColor: '#e91e63',
    tabBarLabelStyle: {fontSize: 12},
    tabBarStyle: {backgroundColor: 'powderblue'},
    lazy: true // ADD THIS
  }}
>

Or take a look at Live Snack

You can read more about this at Material Tab bar option – React Navigation