typescriptexpoeas

How to navigate proramatically between the Tabs.Screen's in expo-route's Tabs component?


I went through the expo's quick installation guide. The demo project has tabs and I want to change them programatically from within the code. This is the component which contains the tabs - https://docs.expo.dev/router/advanced/tabs/

I can use useNavigation() hook, but it doesn't contain jumpTo() method. It contains only navigate() method, but when I try to use it the following way:

export default function HomeScreen() {
  const navigation = useNavigation();
  ...
  const navigateToExplore = () => {
    navigation.navigate('explore');
  }
  ....
  return (
    ...
  );
}

the typescript compiler says that navigate() method doesn't accept argument of type string. This is strange because expo documentation says that navigate can have argument of type string. This is a screenshot of the error:enter image description here

HomeScreen is a child of Tabs.Screen which is a child of Tabs component.

import { Tabs } from 'expo-router';
...
export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs 
      ...
    >
      <Tabs.Screen
        name="index"
        ...
      />
      <Tabs.Screen
        name="explore"
        ...
      />
    </Tabs>
  );
}

name="index" is the name of the file where the HomeScreen component is exported from.


Solution

  • Try using the router object from expo-router, and calling it like

     router.push({pathname:'url to ur page'})