CODEWITHSUNDEEP
androidreact-nativemobile
Riki Roder
Riki Roder

Reputation: 29

How select the first tab in the top navigation bar in React Native when returning from another menu

function TopTabroup(props){ const { initialRouteName } = props;

return (
  <TopTabsGroup.Navigator   initialRouteName={"Berita Terkini"} >
    <TopTabsGroup.Screen name='Berita Terkini'   component={BeritaTerkini}    /> 
    <TopTabsGroup.Screen name='Terpopuler' component={Terpopuler}/> 
    <TopTabsGroup.Screen name='Rekomendasi' component={Rekomendasi}/> 
 </TopTabsGroup.Navigator>

) }

function TabGroup (){ return( <Tab.Navigator screenOptions={{ headerShown: false, tabBarActiveTintColor :'red', tabBarInactiveTintColor :'black', }} > <Tab.Screen name='Berita Terkini' component={TopTabroup} options={{ tabBarLabel: 'BERITA TERKINI', tabBarIcon: ({ color, size }) => ( ), }} /> <Tab.Screen name='Topik' component={Topik} options={{ tabBarLabel: 'TOPIK', tabBarIcon: ({ color, size }) => ( ), }}/> <Tab.Screen name='Indonesiaku' component={Foto} options={{ tabBarLabel: 'FOTO', tabBarIcon: ({ color, size }) => ( ), }}/> <Tab.Screen name='Menu' component={BeritaIndonesia} options={{ tabBarLabel: 'MENU', tabBarIcon: ({ color, size }) => ( ), }}/> </Tab.Navigator> ) }

export default class Home extends Component { render() {

return (
   <View style={styles.container}>
        <View style={styles.Header}>
       <Image style={styles.logo} source={require('../assets/logo.png')} />
       
       </View>
        <TabGroup/>
        </View>
)

} }


when I run the application and enter another page and return to the home page, the top tab navigation does not return to the first tab, but remains on the tab that was selected...I use react-native not expo

Upvotes: 1

Views: 61

Answers (1)

Jatin Bhuva
Jatin Bhuva

Reputation: 1872

Try to navigate when you get back ( screen gets focus)

import { useFocusEffect } from '@react-navigation/native';

const TopTabsGroup = ({ initialRouteName }) => {
  const topTabNavigatorRef = useRef(null);

  useFocusEffect(
    React.useCallback(() => {
      if (topTabNavigatorRef.current) {
        topTabNavigatorRef.current.navigate("Berita Terkini");
      }
    }, [])
  );

  return (
    <TopTabs.Navigator ref={topTabNavigatorRef} initialRouteName={"Berita Terkini"}>
      <TopTabs.Screen name='Berita Terkini' component={BeritaTerkini} />
      <TopTabs.Screen name='Terpopuler' component={Terpopuler} />
      <TopTabs.Screen name='Rekomendasi' component={Rekomendasi} />
    </TopTabs.Navigator>
  );
};

Upvotes: 0

Related Questions