How to navigate from tabs screen to stack screen in react native

Question

I am a beginner in mobile app development. I started the application using the command - npx create-expo-app@latest myapp. This created the folder structure like this -

I think the parenthesis in the tabs folder name is required for convention. In the main _layout.tsx this is the content -

<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        <Stack.Screen name="(tabs1)" options={{ headerShown: false }} />
        <Stack.Screen name="Eligibility" />
      </Stack>
    </ThemeProvider>

And in the inner _layout.tsx file, there is tabs like -

<Tabs screenOptions={{headerShown: true}}>
        <Tabs.Screen name="index" options={{
          headerTitle: "MyApp",
          title: "Home",
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
          ),
        }} />
      </Tabs>

WHen I am running the app, there is one tab in the footer named Home and the contents which are present in index.tsx file. I want to navigate to the file Eligibility which is present outside the tabs folder. I tried using this inside index.tsx file

const navigation = useNavigation();
navigation.navigate('Eligibility)

and changed the outer _layout.tsx like this -

<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="RootLayout1" options={{ headerShown: false }} component={RootLayout1} />
                <Stack.Screen name="Eligibility" component={Eligibility} />
            </Stack.Navigator>
        </NavigationContainer>
    </ThemeProvider>

The RootLayout1 is the inner _layout.tsx file with the following contents -

export default function RootLayout1() {
  return (
      <Tabs screenOptions={{headerShown: true}}>
        <Tabs.Screen name="index" options={{
          headerTitle: "Volt",
          title: "Home",
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
          ),
        }} />
      </Tabs>
  );
}

but it was giving error in my navigation.navigate method -

Argument of type '[string]' is not assignable to parameter of type 'never'.
  Overload 2 of 2, '(options: never): void', gave the following error.
    Argument of type 'string' is not assignable to parameter of type 'never'.

What am I doing wrong in this?

I have also tried passing {navigation} in props of index.tsx component and then do navigation.navigate('Eligibility) but getting the error - [TypeError: Cannot read property 'navigate' of undefined]

I want to have 3 tabs in my app like - Home, Profile, Scan&Pay And in Home tab, I want to have basic flows like some form and then on success it should show Eligibility component inside the same Home tab. Also when I press back on this Eligibility component, the form should be opened again in the Home tab only.

Is there any way to handle my use case?

Answer 1

Sorry but I don't see where is your HomeScreen and I found some convention error in your code. If I'm wrong, please change me:

• <Stack>, <Tabs>: what is this? You mean it from const Stack = createStackNavigator(); and const Tab = createBottomTabNavigator();. if true, it is syntax error.
• name="(tabs1)", name="index": Please don't define the name of screen/stack/... like that. You need this name for navigate action.

I have a small demo for your case in my snack.

Link Snack: https://snack.expo.dev/@pqv2210/q-78491927.

Please check it.

And if you have any question, drop in comment of this answer.

Welcome to React Native and Happy coding!