So in my browser app i'm using window.location.replace('scheme://') and this one successfully open the mobile application and from there issues starts.
Is not open on the expected screen i have the following Navigator Structure
Main Stack
const linking = {
prefixes: ['scheme://'],
config: {
screens: {
TabNavigator: {
initialRouteName: Routes.ACCOUNT_SETTINGS_SCREEN,
screens: {
AccountSettingsScreen: {
path: Routes.ACCOUNT_SETTINGS_SCREEN,
},
},
},
},
},
};
<NavigationContainer linking={linking}>
<Stack.Navigator initialRouteName={initRoute} screenOptions={{ headerTitle: '', headerShown: false }}>
<Stack.Group>
<Stack.Screen name={Navigators.TAB_NAVIGATOR} component={TabNavigator} />
<Stack.Group>
</Stack.Navigator>
</NavigationContainer>
Bottom Tabs
<Tab.Navigator
screenOptions={{
headerShown: false,
}}
>
<Tab.Screen name={Routes.ACCOUNT_SETTINGS_SCREEN} component={AccountSettingsScreen} options={{ tabBarLabel: 'Items', tabBarIcon: ItemsIcon }} />
</Tab.Navigator>
and my linking object
I don't manage to open Account settings screen, it's always home screen of the application.
Related
Here is the code I got:
I got a Stack Navigator that store two screens:
<Stack.Navigator
initialRouteName="FirstScreen"
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="FirstScreen" component={FirstScreen}/>
<Stack.Screen name="DrawerNavigator" component={DrawerNavigator}/>
</Stack.Navigator>
And I got a DrawerNavigator which have my MainNavigator, which is the screen cap I provided:
<Drawer.Navigator
initialRouteName="MainNav"
screenOptions={{
drawerStyle: {
backgroundColor: getPrimaryColor()
},
drawerLabelStyle: {
color: 'white'
}
}}>
<Drawer.Screen
name="MainNav"
component={MainNav}
options={({route}) => (getShowOptions(route))}/>
</Drawer.Navigator>
Inside the MainNav, it have two page, one is home, another is detail:
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
options={{ headerShown:false }}
name="Home"
component={Home}
/>
<Stack.Screen
name="Detail"
component={Detail} />
</Stack.Navigator>
As you may noticed that it has a getShowOptions method, which is control the actual nav bar display:
function getShowOptions(route) {
const routeName = getFocusedRouteNameFromRoute(route);
const icon =
let options = {
headerStyle: {
backgroundColor: getPrimaryColor()
},
headerTintColor: '#fff',
headerTitleAlign: 'center',
title: i18n.t('Home'),
drawerIcon: ({focused, size}) => (
<View
style={[{
height: iconSize,
width: iconSize
}
]}>
{icon}
</View>
)
};
if (routeName === 'Detail') {
options.headerShown = false;
}
return options;
}
When the screen is push to "Detail", it will hide the header, to show a header that have a back button, but when it put back to "Home", it should use back the "Drawer" menu button. As u can see the issue happen when we switch back and forward between the drawer navigation bar and the stack navigation bar.
The use case is pretty simple, we would like to have the "menu" when the "home" screen is appear, and "back" appear when the "detail" screen is presented. It seems that the React Native Stack Navigator and Drawer Navigator can't work together very well. Any suggestions?
I create Drawer Navigation and inside it there is stack navigation all I need when back from stack need the drawer to be opened
my code is like this and All I need is to keep the drawer opened after back from any stack screen
const Drawer = createDrawerNavigator();
function DrawerNav({ navigation }) {
// toggleDrawer = () => {
// this.props.navigation.dispatch(DrawerActions.toggleDrawer())
// }
return (
<Drawer.Navigator initialRouteName="Home"
screenOptions={{
headerShown: true,
headerStyle: {
backgroundColor: brand,
},
headerTintColor: primary,
headerTransparent: false,
headerTitle: '',
headerLeftContainerStyle: {
paddingLeft: 20,
},
}}>
<Drawer.Screen name="Home" component={HomeScreen} options={horizontalAnimation}/>
<Drawer.Screen name="RootStack" component={RootStack} />
</Drawer.Navigator>
);
}
const Stack = createStackNavigator();
const RootStack = () => {
return (
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: brand,
},
headerTintColor: primary,
headerTransparent: true,
headerTitle: '',
headerLeftContainerStyle: {
paddingLeft: 20,
},
}}
>
{storedCredentials ? (
<Stack.Screen name="Home" component={DrawerNav} options={horizontalAnimation}/>
) : (
<>
<Stack.Screen name="Login" component={Login} options={horizontalAnimation}/>
<Stack.Screen name="Signup" component={Signup} options={horizontalAnimation}/>
</>
)}
</Stack.Navigator>
</NavigationContainer>
);
};
these is the installed package
"#react-navigation/drawer": "^6.1.8",
"#react-navigation/native": "^6.0.6",
"#react-navigation/stack": "^6.0.11",
Use this way...
function MyDrawer() {
const dimensions = useWindowDimensions();
return (
<Drawer.Navigator
screenOptions={{
drawerType: 'permanent',
}}
>
{/* Screens */}
</Drawer.Navigator>
);
}
Refer this
<Drawer.Navigator
drawerContent={(props) => <CustomDrawerContent {...props} />}
>
<Drawer.Screen
name="RootStack"
component={RootStack}
/>
</Drawer.Navigator>
customDrawerContent : component that contains items to be listed on the side bar: check this link for that part https://stackoverflow.com/a/64173773/7689878.
To achieve the drawer remaining after navigating back keep only the RootStack(should contain all stack screens) in the Drawer Navigator.
I have HomeScreen with a link that goes to DeckScreen. When I click a button to navigate to the DeckScreen, the back button in the header bar shows up fine.
But when I reload the page in browser or directly navigate to this URL (localhost/deck), there is no back button.
And clicking on the BottomTab doesn't do anything, will not take us back Home.
I am using BottomTab that has a HomeStack, which contains the HomeScreen and DeckScreen.
export default function Navigation () {
return (
<NavigationContainer linking={linking} theme={DefaultTheme}>
<RootNavigator/>
</NavigationContainer>
);
}
function RootNavigator () {
return (
<Stack.Navigator>
<Stack.Screen name='Root' component={Nav} options={{headerShown: false, ...fade}}/>
<Stack.Group screenOptions={{presentation: 'modal'}}>
<Stack.Screen name='Modal' component={ModalScreen}/>
</Stack.Group>
</Stack.Navigator>
）；
}
function HomeStackScreen () {
return (
<HomeStack.Navigator initialRouteName='dashboard'>
<HomeStack.Screen name='dashboard' component={HomeScreen} options={{headerShown: false, title: 'Dashboard'}}/>
<HomeStack.Screen name='deck' component={DeckScreen} options={{title: 'Deck'}}/>
</HomeStack.Navigator>
);
}
function Nav ({navigation}) {
return (
<BottomTab.Navigator
initialRouteName='home'
screenOptions={{
headerShown: false,
}}>
<BottomTab.Screen
name='home'
component={HomeStackScreen}
})}
/>
</BottomTab.Navigator>
);
}
And here is my Linking:
const linking: LinkingOptions<RootStackParamList> = {
prefixes: [Linking.makeUrl('/')],
config: {
screens: {
Root: {
screens: {
home: {
screens: {
dashboard: 'dashboard',
deck: 'deck'
},
}
},
}
}
}
};
I've tried using getStateFromPath to try to inject a route in stack but it doesn't work and feels wrong.
How do you tell React Navigation, this screen is part of a stack, and it should always have a back button in that header?
The reason why there's no back button when you're opening from the link is most likely because you don't set headerLeft in the screen and there's no other screen in the navigation stack (you went directly to the DeckScreen).
You can set the back button in the option in Screen, like this example below:
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: props => <LogoTitle {...props} />,
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
</Stack.Navigator>
);
}
You can find the example here
React Native project using React Navigation v6. I've got a drawer navigator and inside there is a home button. I want to customize the behavior of this button so that no matter where you are in the app when you open the drawer and press it, you go back to the top of the home stack.
https://reactnavigation.org/docs/navigation-actions/#reset
I found this in the docs, but I can't figure out how to define it in my navigator, only in a screen component.
Here's the drawer navigator.
export const DrawerNavigator = () => {
return (
<NavigationContainer theme={MyTheme}>
<Drawer.Navigator
initialRouteName={'HomeTabNav'}
screenOptions={{
drawerLabelStyle: {
fontFamily: AppStyleConstants.headerFont,
},
headerShown: false,
drawerPosition: 'right',
drawerActiveTintColor: Colors.primary,
}}
>
<Drawer.Screen
name={'HomeTabNav'}
component={MainTabs}
options={{ drawerLabel: 'Home' }}
/>
<Drawer.Screen name={'FAQ'} component={FaqScreen} />
<Drawer.Screen name={'Glossary'} component={GlossaryScreen} />
<Drawer.Screen name={'Preferences'} component={PreferencesTabs} />
</Drawer.Navigator>
</NavigationContainer>
);
};
Or, to be more specific, how to I alter this portion
<Drawer.Screen
name={'HomeTabNav'}
component={MainTabs}
options={{ drawerLabel: 'Home' }}
/>
to make use of this behavior
import { CommonActions } from '#react-navigation/native';
navigation.dispatch(
CommonActions.reset({
index: 1,
routes: [
{ name: 'Home' },
{
name: 'Profile',
params: { user: 'jane' },
},
],
})
);
```a
I have two steps for the user with their own Screens:
1. Login, Signup, and Enter Code (Confirmation).
I have these 3 screens as a Stack Navigator (code will be below).
2. Home, Questions, Categories.
These screens are in a different Stack Navigator.
What I want:
When the user completes the Sign in, or sign up process, they will be sent to the "Home Page". I want to switch Stack Navigators, so that the user cannot go "back" to the login screen, and also so that the Stack is cleared.
What I have tried:
I have previously used Redux to condtionially use one stack and switch after a value changes, this feels like too much work again for this functionality.
I have also tried nesting navigators, which didn't help (obviously).
Here is my StackNavigators.tsx file that contains all the stack navigators:
const Stack = createStackNavigator();
const AuthStack = createStackNavigator();
export const AuthStackNavigator = () => {
return (
<NavigationContainer>
<AuthStack.Navigator>
<AuthStack.Screen name={"Login"} component={Login} options={{
headerTitle: "Login",
headerStyle: {backgroundColor: "#eee"},
headerTintColor: GlobalStyles.darkColor
}}/>
<AuthStack.Screen name={"Signup"} component={Signup} options={{
headerTitle: "Sign Up",
headerStyle: {backgroundColor: "#eee"},
headerTintColor: GlobalStyles.darkColor
}}/>
<AuthStack.Screen name={"EnterCode"} component={EnterMfaCode} options={{
headerTitle: "Enter Code",
headerStyle: {backgroundColor: "#eee"},
headerTintColor: GlobalStyles.darkColor
}}/>
</AuthStack.Navigator>
</NavigationContainer>
)
}
export const BaseNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name={"Home"} component={Home} options={{
headerTitle: "Education",
headerStyle: {backgroundColor: "#eee"},
headerTintColor: GlobalStyles.darkColor
}}/>
<Stack.Screen name={"Questions"} component={Questions} options={{
headerStyle: {backgroundColor: "#eee"},
headerTintColor: GlobalStyles.darkColor,
headerTitle: "",
gestureEnabled: false,
headerBackTitle: "Categories"
}}/>
<Stack.Screen name={"Categories"} component={Categories} options={{
headerStyle: {backgroundColor: "#eee"},
headerTintColor: GlobalStyles.darkColor,
headerTitle: "",
headerBackTitle: "Start"
}}/>
</Stack.Navigator>
);
};
I would be very thankful if an explanation for how to approach this issue would be. I Appreciate the time!
I feel like using Redux is a good and straight forward solution. Another option is to use LocalStorage to store some value and just take it from there.
As I want the user to be loggedIn after closing the application, I found that using LocalStorage + Redux feels like a great solution.
You can red more on this documentation on how to handle everything.
https://reactnavigation.org/docs/auth-flow