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

Question

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

Jatin Bhuva · Accepted Answer · 2024-05-30 05:00:56Z

0

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>
  );
};

answered May 30, 2024 at 5:00

Jatin Bhuva

1,9361 gold badge7 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Riki Roder Over a year ago

hello thank you for answering but in const However, in TopTabsGroup there is this code: TopTabsGroup = createMaterialTopTabNavigator(); So what should it be like? const TopTabsGroup = createMaterialTopTabNavigator(); const TopTabsGroup = ({ initialRouteName }) => { const topTabNavigatorRef = useRef(null); useFocusEffect( React.useCallback(() => { if (topTabNavigatorRef.current) { topTabNavigatorRef.current.navigate("Latest News"); } }, []) );

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related