i am creating a react native app where i am using bottom tab drawer like in the attched image . In this app here i have only four screens registered and i have multiple screens for say 30 or 40 and i cannot register them all in bottom tab drawer so i want only four screens and inside each screen i want multiple screens .

Now lets start with profle screen and in my profile screen i gave a button register that will move me to register Screen but when i click on that it says

The action 'JUMP_TO' with payload {"name":"RegisterScreen"} was not handled by any navigator.

Do you have a screen named 'RegisterScreen'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator. 

How can i open register screen inside profile tab.

my code of of bottom tabs

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import HomeScreen from './Screens/HomeScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from "@react-navigation/native-stack"

import SettingsScreen from './Screens/SettingsScreen';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import OrderScreen from './Screens/OrderScreen';
import ProfileScreen from './Screens/ProfileScreen';
import RegisterScreen from "./Screens/RegisterScreen"
import LoginScreen from './Screens/LoginScreen';

const Tab = createBottomTabNavigator();

const App= () => {

  return (
    <View style={styles.body}>
      <NavigationContainer>
    
        <Tab.Navigator
        initialRouteName='MyApp'
        screenOptions={{
          tabBarActiveTintColor:"#E0FFFF",
          tabBarActiveBackgroundColor:"#20B2AA"
        }}
        >
            <Tab.Screen 
            name="Home" 
            
            component={HomeScreen}
            options={{
              tabBarLabel:"Home",
              tabBarIcon:({color,size})=>(
                <MaterialCommunityIcons name='home' color={"black"} size={30}/>
              )
            }}
            
            />
            
            <Tab.Screen name="Settings" component={SettingsScreen} />
            <Tab.Screen name="Order" component={OrderScreen} />
            <Tab.Screen name="Profile" component={ProfileScreen}/>

          </Tab.Navigator>

          
      </NavigationContainer>

    </View>
  );
};

const styles = StyleSheet.create({

  body:{
    flex:1,
    backgroundColor:"#fff"
  }

});

export default App;

This is my profile screen code:

import React from 'react'
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
import LoginScreen from './LoginScreen'
import RegisterScreen from './RegisterScreen'
import {NavigationContainer, useNavigation} from "@react-navigation/native"

const ProfileScreen = ({navigation}) => {
    // const navigation = useNavigation();
    return (
        <ScrollView>

            <View style={styles.body}>

                <View style={styles.tile}>
                    <View>
                        <Text style={{textAlign:"center",fontSize:20,fontWeight:"bold",color:"#000"}}>Your Accout</Text>
                    </View>
                    <View>
                        <Pressable
                            style={({pressd})=>[
                            {backgroundColor:pressd
                                ? 'rgb(210,230,255)':
                                    "red"
                            
                            },{ margin:10}
                        ]}
                        onPress={()=>{
                          navigation.jumpTo("RegisterScreen")
                        }}
                        >
                            <Text style={styles.registerButton}>Register</Text>

                        </Pressable>
                    </View>


                </View>

                <View style={styles.tile}>
                </View>

                <View style={styles.tile}>
                </View>

                <View style={styles.tile}>
                </View>

            </View>
            
                    
        </ScrollView>
    )
}
const styles = StyleSheet.create({
    body:{
        flex:1,
        
    },
    tile:{
        margin:5,
        backgroundColor:"red",
        borderRadius:10,
        height:200,
    
    },
    register:{
        justifyContent:"center"
    },
    registerButton:{
        padding:15,
        textAlign:"center",
        width:100,
        height:50,
        borderRadius:10,
        backgroundColor:"green",
        fontWeight:"bold",
        color:"black",
    }

})

export default ProfileScreen

CodePudding user response：

navigation.jumpTo() only works for bottom tab screens. try navigation.navigate()

CodePudding user response：

Basically, your profile tab must be a navigator by itself with initial screen being Profile screen, find below the code for the same,

import {createNativeStackNavigator} from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

const ProfileRoutes = () => {
return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Register" component={RegisterScreen} />
    <Stack.Navigator />
}

Whilst defining tab route change the code like below,

<Tab.Screen name="ProfileStack" component={ProfileRoutes}/>

In the on click,

navigation.navigate('Register');