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

  Kiến thức lập trình

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 –
enter image description here

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>

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?

LEAVE A COMMENT