react native new screen onPress with BottomTabBar-CodePudding

I got stuck in my code.

how do i get redirected to a new screen using code from the same file?

App.js:

const Navigator = ()=> {
    return(
        <NavigationContainer>
            <Tab.Navigator
            initialRouteName={homeName}
            >
                <Tab.Screen name={homeName} component={HomeScreen} options={{ headerShown: false, tabBarIcon:()=>(<Icon name={"home"} size={25}/>)}}/>
                <Tab.Screen name={listName} component={ListScreen} options={{headerShown: false, tabBarIcon:()=>(<Icon name={"list"} size={20}/>)}}/>
                <Tab.Screen name={perizieName} component={PeritiScreen} options={{ headerShown: false, tabBarIcon:()=>(<Icon name={"laptop"} size={25}/>) }}/>
            </Tab.Navigator>
        </NavigationContainer>
    );
}

===UPDATE===

I would like to do this but unfortunately I don't find the right way to do it, in addition I should be able to pass the "provincia" parameter.

<SafeAreaView>
            <View style={style.searchContainer}>
                <Text style={{paddingLeft:10}}>
                    <Icon name="search" size={25} color={COLORS.grey} />
                </Text>
                <TextInput placeholder="Cerca provincia" style={{fontSize:20, paddingLeft:10}} />
            </View>
            <ScrollView>
            {
                masterList.map((provincia)=>{
                    return(
                        <View>
                            <View style={{flexDirection:"row"}}>
                                <View>
                                    <Text style={style.provincia}>
                                        {provincia.nome}
                                    </Text>
                                    <Text style={{marginLeft:10, fontSize: 12, color:COLORS.grey, marginBottom:5}}>Ristoranti consigliati nella provincia di {provincia.nome},{"\n"}selezione quello che preferisci</Text>
                                </View>
                                <View style={{alignSelf:"center", alignItems:"center", paddingLeft: "18%"}}>
                                    <Icon 
                                    onPress={"i need to go to DetailsScreen"} // <== here
                                    name={"arrow-right"} size={20} />
                                </View>
                            </View>
                            <ScrollView
                            horizontal={true}
                            showsHorizontalScrollIndicator={false}
                            >
                                {
                                    provincia.ristoranti.map((ristorante)=>{
                                        return(
                                            <CardResturant
                                            resturant = {ristorante}
                                            />
                                        )
                                    })
                                }
                            </ScrollView>
                        </View>
                )})
            }
            
            </ScrollView>
        </SafeAreaView>

The file that recalls the code shown above in turn contains navigation:

const ListScreen = ()=>{

    return(
        <SafeAreaView style={{flex:1}}>
            <Tab.Navigator
            swipeEnabled={false}
            initialRouteName={"Lista completa"}
            style={style.topTap}
            >
                <Tab.Screen name="Mappa" component={MapScreen} />
                <Tab.Screen name="Lista completa" component={AllScreen} /> // <== the code shown above
            </Tab.Navigator>
        </SafeAreaView>
    );
};

once I understand this, I can in turn adapt it to the to make it clickable and show the details of the resturant.

CodePudding user response：

The ListScreen is a Tab navigator that is nested inside another Tab navigator. It contains a tab which renders the component AllScreen. The screen DetailsScreen is currently not a screen inside a navigator, thus you cannot navigate to it.

I would suggest that you turn AllScreen into a Stack. This stack contains AllScreen as the initial route and DetailsScreen as a second screen. The navigation object will be passed to AllScreen and you can use it as usual.

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

function AllStack() {
    return (
    <Stack.Navigator>
      <Stack.Screen name="Lista completa" component={AllScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

const ListScreen = ()=>{

    return(
        <SafeAreaView style={{flex:1}}>
            <Tab.Navigator
            swipeEnabled={false}
            initialRouteName={"Lista completa"}
            style={style.topTap}
            >
                <Tab.Screen name="Mappa" component={MapScreen} />
                <Tab.Screen name="Lista completa" component={AllStack} /> 
            </Tab.Navigator>
        </SafeAreaView>
    );
};

The screen AllScreen is the initial route of the stack. Inside AllScreen you can know navigate to DetailsScreen.

function AllScreen({navigation}) {
   ...

   <Icon 
      onPress={() => navigation.navigate("Details")} 
      name={"arrow-right"} size={20} />
  ...
}