change selected tab when navigate to the screen

Question

i am building react native application and i have 2 screens on my app right now.

Home:

import { StyleSheet, Text, View, Button } from 'react-native';
import {StackScreens} from '../routes/MyStack'
import {NativeStackScreenProps} from '@react-navigation/native-stack'

type homePropsType = NativeStackScreenProps<StackScreens, 'Home'>;

export const Home = (props : homePropsType) => {
    const {navigation} = props;

    const goToProfile =() =>{
    navigation.navigate('Profile'); 
}

  return (
    <View style={styles.container}>
      <Text>
        HOME!
      </Text>

      <Button title='profile' color="blue" onPress={goToProfile}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Profile:

import { StyleSheet, Text, View ,Button } from 'react-native';
import {StackScreens} from '../routes/MyStack'
import {NativeStackScreenProps} from '@react-navigation/native-stack'

type profilePropsType = NativeStackScreenProps<StackScreens, 'Profile'>;

export const Profile = (props: profilePropsType) => {

    const {navigation, route} = props;

    const goToHome =() =>{
        navigation.navigate('Home'); 
    }

  return (
    <View style={styles.container}>
      <Text>
        profile
      </Text>

      <Button title='home' color="blue" onPress={goToHome}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

MyStack:

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import {Home} from "../screens/Home";
import {Profile} from "../screens/Profile";


export type StackScreens = {
  Home : undefined,
  Profile : undefined
}

const Stack = createNativeStackNavigator<StackScreens>();

export const MyStack = (props: any) => (
  <Stack.Navigator screenOptions={{ title: "", headerShown: false }} >
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Profile" component={Profile} />
  </Stack.Navigator>
);

MyTab:

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 
import {Home} from "../screens/Home";
import {Profile} from "../screens/Profile";
import { MyStack } from "./MyStack";
import { Icon } from "react-native-elements";

export type TabScreens = {
  Home : undefined,
  Profile : undefined,
  MyStack : undefined
}


const Tab = createBottomTabNavigator<TabScreens>();

export const MyTab = (props: any) => (
 <Tab.Navigator initialRouteName="MyStack" screenOptions={{
    tabBarStyle:{backgroundColor:"blue"},
    tabBarActiveTintColor:"white",
   headerShown:false,
 }}>
    <Tab.Screen name="MyStack" component={MyStack} options={{tabBarLabel:"home", tabBarIcon:        ({color}) =>(
        <Icon color={color} name="home" type="font-awesome" />)}}/>
    <Tab.Screen name="Profile" component={Profile} options={{ tabBarIcon:({color}) =>(
        <Icon color={color} name="user" type="font-awesome" />)}}/>
 </Tab.Navigator>
);

Now i can navigate between the to screens with MyStack by press the button on each screen or with MyTab by press on one of the tabs. My problem is that i want that when i navigate to the profile screen for example the profile tab will be the one that selected. right now if i perss the button to navigate to the profile screen i will navigate to him but the tab will stay on home. Is there a way to fix this or that should be like that?

Answer 1

There are two screens named "Profile" in MyStack and inside MyTab. Try to make sure each screen has a unique name.

Answer 2

PROBLEM:

Your navigation structure is :

APP

• Tabs:
  1. MyStack.
     • Home
     • ProfileScreen
  2. ProfileScreen.

The reason of unexpected behaviour is when you are navigating from home to profile screen it is still in MyStack and hence the tab bar will show Mystack.

SOLUTION:

Your home.js and Profile.js will be same as they are. Just remove myStack as it is not needed.

MYTAB

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; 
import {Home} from "../screens/Home";
import {Profile} from "../screens/Profile";
import { Icon } from "react-native-elements";

export type TabScreens = {
  Home : undefined,
  Profile : undefined
}


const Tab = createBottomTabNavigator<TabScreens>();

export const MyTab = (props: any) => (
 <Tab.Navigator initialRouteName="Home" screenOptions={{
    tabBarStyle:{backgroundColor:"blue"},
    tabBarActiveTintColor:"white",
   headerShown:false,
 }}>
    <Tab.Screen name="Home" component={Home} options={{tabBarLabel:"home", tabBarIcon:        ({color}) =>(
        <Icon color={color} name="home" type="font-awesome" />)}}/>
    <Tab.Screen name="Profile" component={Profile} options={{ tabBarIcon:({color}) =>(
        <Icon color={color} name="user" type="font-awesome" />)}}/>
 </Tab.Navigator>
);

Now the tab will change when navigating to Profile. Happy coding.