This is a strange one that I'm trying to wrap my head around. I'm trying to have the middle screen be the initial screen that gets shown to the user on app load. If I navigate to the left tab (SelfScreen), then the screen loads the JSX briefly, then automatically redirects to the last thing in the web history.
The SelfScreen functional component has no useEffect hooks. It is, for now, a simple component that just returns plain JSX. I can navigate to and from the Profile page without any issue at all. If I set the SelfScreen as the second component that gets rendered, it works just fine, as well.
Expo init > TypeScript template with Navigation
./src/navigation/index.tsx
const BottomTab = createBottomTabNavigator<RootTabParamList>();function BottomTabNavigator() { const { ... } = useGlobalContext(); const colorScheme = useColorScheme(); return (<BottomTab.Navigator initialRouteName="Connections" screenOptions={{ tabBarActiveTintColor: Colors[colorScheme].tint, }}><BottomTab.Screen name="SelfScreen" component={SelfScreen} options={{ title: 'SelfScreen', unmountOnBlur: true, tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />, }} /><BottomTab.Screen name="Connections" component={MainConnection} options={({ navigation }: RootTabScreenProps<'Connections'>) => ({ title: 'Connections', tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />, headerLeft: () => (<View><Pressable onPress={() => navigation.navigate('ConnectionSelector')} style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, })}><FontAwesome name="info-circle" size={25} color={Colors[colorScheme].text} style={{ marginRight: 15 }} /></Pressable></View> ), headerRight: () => (<View style={{flexDirection: 'row'}}><Pressable onPress={() => navigation.navigate('ModalNotifications')} style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, })}><FontAwesome name="info-circle" size={25} color={Colors[colorScheme].text} style={{ marginRight: 15 }} /></Pressable><Pressable onPress={() => navigation.navigate('ModalWriteBid')} style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, })}><FontAwesome name="info-circle" size={25} color={Colors[colorScheme].text} style={{ marginRight: 15 }} /></Pressable></View> ), })} /><BottomTab.Screen name="Profile" component={Profile} options={{ title: 'Profile', tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />, }} /></BottomTab.Navigator> );}./src/navigation/LinkingConfiguration.tsx
import { LinkingOptions } from '@react-navigation/native';import * as Linking from 'expo-linking';import { RootStackParamList } from '../types';const linking: LinkingOptions<RootStackParamList> = { prefixes: [Linking.makeUrl('/')], config: { screens: { Root: { screens: { Connections: { screens: { TabOneScreen: 'one', }, }, SelfScreen: { screens: { SelfScreen: 'two', }, }, Profile: { screens: { ProfileScreen: "three", } } }, }, ConnectionSelector: 'ConnectionSelector', Modal: 'modal', ... // more modals NotFound: '*', }, },};export default linking;