I'm trying to pass some data when navigating to another screen, but it's not working. It navigates to the screen but the data is undefined.
I have this button on the 'Produto' Screen:
onPress={() => {
props.navigation.navigate("Login", {
test: "This is just a test"
});
}}
Login Screen:
const LoginScreen = props => {
const test = props.navigation.getParam("test");
console.log(test);
test is undefined.
My Navigator (I removed imports and other stuff from this snippet):
const MainNavigator = createStackNavigator(
{
Home: HomeScreen,
Produto: ProdutoScreen,
},
{
initialRouteName: "Home"
}
);
const LoginNavigator = createStackNavigator(
{
Login: LoginScreen
}
);
const DrawerNavigator = createDrawerNavigator(
{
Main: {
screen: MainNavigator
},
Login: {
screen: LoginNavigator
}
}
);
const SwitchNavigator = createSwitchNavigator({
Start: StartScreen,
Home: DrawerNavigator
});
Just update the line where you are trying to access the param. Like this,
const LoginScreen = props => {
const test = props.navigation.state.params.test;
console.log(test);
}
Just do this
const MainNavigator = createStackNavigator(
{
Home: HomeScreen,
Produto: ProdutoScreen,
Login: LoginScreen, //this will resolve your issue
},
{
initialRouteName: "Home"
}
);
Related
I have a react project and I have two navigators, I'm trying to remove the navigation bar, I tried two ways but no success.
This is my App.js
const switchNavigator = createStackNavigator({
loginFlow: createStackNavigator({
Signin: {
screen: SigninScreen,
navigationOptions: {
headerShown: 'false'
}
},
Signup: {
screen: SignupScreen,
},
},
),
mainGrid: createStackNavigator({
Account: AccountScreen,
Bath: BathScreen,
Eco: EcoBath,
Electricity: ElectricityConsScreen,
Water: WaterConsumptionScreen,
Help: HelpScreen,
Parents: ParentsControlScreen
})
});
As you can see I tried o hide using the headerShown: 'false' I tried to change to 'hide' and doesn't seems to work. I tried to add separately like:
SigninScreen.navigationOptions = () => {
return{
header: () => false
};
};
But didn't worked too.
I tried to remove the arrow function and set like header: null and no success too.
What can I do about this?
if you are using react-navigation V5:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
else:
hide header for 1 screen:
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
navigationOptions: {
header: null,
},
},
})
or
export default class HomePage extends Component {
static navigationOptions = {
header: null
}
}
hide header for all screens:
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
},
},
{
navigationOptions: {
header: null,
},
})
Deprecation in 'navigationOptions': - 'header: null' will be removed
in a future version. Use 'headerShown: false' instead
const AppStackNavigator = createStackNavigator ({
Home: {
screen: HomePage,
navigationOptions: {
headerShown: false
},
},
})
I am using following in my code:
const AppStackNavigator = createStackNavigator ({
Home: HomePageScreen
},
{
headerMode: "none"
});
https://reactnavigation.org/docs/stack-navigator/#headermode
Mates I solved! I was using the Navigation v4.
The problem was here
const switchNavigator = createStackNavigator({
Then I swapped t
const switchNavigator = createSwitchNavigator({
And Added
SigninScreen.navigationOptions = () => {
return {
header: false
};
};
Now It's working like a charm, but all answers that you lads answered are correct. I used in the other versions. Thanks for your time lads.
I use react-navigation stackNavigator for my native router. The simply path is LoginRouter -> DashboardRouter -> AddressRouter, map tree here.
// LoginRouter.js
const LoginRouter = createStackNavigator(
{
Login: Login,
Register: Register,
Dashboard: DashboardRouter
},
{
initialRouteName: "Login"
}
);
// DashboardRouter.js
const TabNavigator = createBottomTabNavigator(
{
MessageRouter: MessageRouter,
AddressRouter: AddressRouter,
},
{
...
}
);
// AddressRouter.js
const AddressRouter = createStackNavigator(
{
// these all navigator will become a nested navigation
Address: Address,
UserAdd: UserAdd,
UserGroup: UserGroup
},
{
initialRouteName: "Address"
}
);
If I want to let the AddressRouter navigate without a nest navigation, how do I change this code?
PS
The navigate work fine when I extract the AddressRouter to the LoginRouter.
// LoginRouter.js
const LoginRouter = createStackNavigator(
{
Login: Login,
Register: Register,
Dashboard: DashboardRouter,
Address: Address,
UserAdd: UserAdd,
UserGroup: UserGroup
},
{
initialRouteName: "Login"
}
);
// DashboardRouter.js
const TabNavigator = createBottomTabNavigator(
{
MessageRouter: MessageRouter,
AddressRouter: AddressRouter,
},
{
...
}
);
If I got your question right, what you can do is create another navigator as a root navigator (another StackNavigator or SwitchNavigator) and include your LoginRouter, AddressRouter there.
Something like this, maybe?
const rootNavigator = createSwitchNavigator(
{
LoginRouter: {
screen: LoginRouter,
},
AddressRouter: {
screen: AddressRouter,
}
},
{
headerMode: "none",
mode: "modal",
initialRouteName: "LoginRouter"
}
);
This is just a example to give you an idea on how you could also implement your router.
I have a router.js like this:
import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import Login from '../components/login/Login';
import Activation from '../components/login/Activation';
import Phone from '../components/login/Phone';
import ContainerNavs from '../components/navs/ContainerNavs';
import Notification from '../components/navs/notification/Notification';
import Question from '../components/navs/notification/Question';
export const LoginStack = StackNavigator({
Login: {
screen: Login,
},
Phone: {
screen: Phone,
},
Activation: {
screen: Activation,
}
},
{
headerMode: 'none'
});
export const HomeStack = StackNavigator({
Home: {
screen: ContainerNavs,
},
Notifications: {
screen: Notification,
},
Question: {
screen: Question,
},
},
{
headerMode: 'none'
});
export const Root = StackNavigator({
Login: {
screen: LoginStack,
},
Home:{
screen: HomeStack,
},
},{
mode: 'modal',
headerMode: 'none',
initialRouteName: 'Login',
}
);
ContainerNavs is a FooterTab from native-base library.
my Notification component rendered inside ContainerNavs:
renderSelectedTab () {
switch (this.state.selectedTab) {
case 'home':
return (<Home />);
break;
case 'search':
return (<Text>search</Text>);
break;
case 'new':
return (<New />);
break;
case 'notification':
return (<Notification />);
break;
case 'profile':
return (<Profile />);
break;
}
}
inside Notification component I wrote this codes:
goTo(page){
this.props.navigation.navigate(page);
}
render() {
return (
<List>
<ListItem>
<Card style={{backgroundColor:'#f2f2f6'}}>
<Button
onPress={()=>this.goTo('Question')}
>
<Text>Toast</Text>
</Button>
but when I click on Toast button I got this error:
undefined is not an object (evaluation this.props.navigation.navigate)
I think I should pass navigation from ContainerNavs to Notification.
Solved by this trick:
return (<Notification navigation={this.props.navigation} />);
I am totally confused to achieve something like below, this is working fine but can't hide tab bar for EditPage and PageTwo
Login
SignUp
TabNavigator(TabNavigator)
FirstTab
SecondTab(StackNavigator)
ListPage
EditPage
ThirdTab(StackNavigator)
PageOne
PageTwo
Settings
Below is my configuration for it.
import { createStackNavigator, createSwitchNavigator, createBottomTabNavigator } from 'react-navigation';
//Other required imports here
const SignedOut = createStackNavigator({
Signup: { screen : Signup},
Login: { screen : Login}
});
const SignedIn = createBottomTabNavigator({
Dashboard: {
screen: Dashboard
},
Rewards: {
screen: createStackNavigator({
Rewards:{
screen: Rewards,
navigationOptions:{
header:null
}
},
AddReward:{
screen: AddReward,
navigationOptions:{
header:null,
tabBarVisible: false
}
}
})
},
Activities: {
screen: createStackNavigator({
Rewards:{
screen: Activities,
navigationOptions:{
header:null
}
},
NewActivity:{
screen: NewActivity,
navigationOptions:{
header:null,
tabBarVisible: false
}
}
})
},
Settings: {
screen: Settings
}
},{
tabBarComponent: ({navigation}) => <FooterComponent navigation={navigation} />,
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false
});
export const createRootNavigator = (signedIn) => {
return createSwitchNavigator(
{
SignedIn: {
screen: SignedIn
},
SignedOut: {
screen: SignedOut
}
},
{
initialRouteName: (signedIn) ? "SignedIn" :"SignedOut",
headerMode: 'none'
}
);
};
Problems
I can't hide tab bar for AddReward and NewActivity
tabBarVisible: false not working for StackNavigator inside TabNavigator
Thanks
You could use one StackNavigator with all your stacks, and set the TabNavigator as default route :
SwitchNavigator
Login
SignUp
StackNavigator
TabNavigator
FirstTab
ListPage
Settings
EditPage
PageTwo
The problem is that your screens (Rewards and AddRewards are inside a Stack Navigator)
OLD:
Rewards: {
screen: createStackNavigator({
Rewards:{
screen: Rewards,
navigationOptions:{
header:null
}
},
AddReward:{
screen: AddReward,
navigationOptions:{
header:null,
tabBarVisible: false
}
}
})
}
FIX:
Rewards: {
screen: createStackNavigator({
Rewards,
AddReward,
}),
navigationOptions:{
header:null,
tabBarVisible: false
}
}
More details are found on the official document, Tested working with v 3.0.9:
A tab navigator contains a stack and you want to hide the tab bar on specific screens
modified code from:
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
Details: DetailsScreen,
});
const TabNavigator = createBottomTabNavigator({
Feed: FeedStack,
Profile: ProfileScreen,
});
const AppNavigator = createSwitchNavigator({
Auth: AuthScreen,
Home: TabNavigator,
});
To:
const FeedStack = createStackNavigator({
FeedHome: FeedScreen,
/* any other route you want to render under the tab bar */
});
const TabNavigator = createBottomTabNavigator({
Feed: FeedStack,
Profile: ProfileScreen,
});
const HomeStack = createStackNavigator({
Tabs: TabNavigator,
Details: DetailsScreen,
/* any other route you want to render above the tab bar */
});
const AppNavigator = createSwitchNavigator({
Auth: AuthScreen,
Home: HomeStack,
});
Additionally, in this example, FeedScreen will have two headers: one from FeedStack and the other from HomeStack. To solve this problem, one solution is to set default header height of HomeStack to 0 and override height in DetailsScreen. Below is an example:
const HomeStack = createStackNavigator(
{
Tabs: TabNavigator,
Details: DetailsScreen,
/* any other route you want to render above the tab bar */
},
{
initialRouteName: 'Tabs',
defaultNavigationOptions: {
headerStyle: { height: 0, },
headerForceInset: { top: 'never', bottom: 'never' },
},
},
);
The other solution is:
A stack contains a tab navigator and you want to set the title on the stack header
const TabNavigator = createBottomTabNavigator({
Feed: FeedStack,
Profile: ProfileStack,
});
TabNavigator.navigationOptions = {
// Hide the header from AppNavigator stack
header: null,
};
Well, for me these solutions are kind of tricky.
Anyway, it works.
React Navigation v5:
https://www.youtube.com/watch?v=sH6OqX6ANeE
This solved my problem.
In Tab.Screen options, just use the tabBarStyle: {display: none}.
Ex:
<Tab.Screen name="About Screen" component={TabAboutScreen}
options={{
tabBarLabel:"About",
tabBarStyle: { display: 'none' },
}}
/>
I am trying out react navigation, but I seem to be having trouble with navigating to a nested DrawerNavigator route within my react native app.
After a successful login action, I would like to navigate to the Home screen but it doesn’t work
My setup looks like the following;
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { StackNavigator, DrawerNavigator, addNavigationHelpers } from 'react-navigation';
import { Provider, connect } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import AppNavigator from './AppNavigator';
class App extends React.Component {
render() {
return (
<AppNavigator navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.nav,
})} />
);
}
}
const mapStateToProps = (state) => ({
nav: state.nav
});
const AppWithNavigationState = connect(mapStateToProps)(App);
class Root extends Component {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={ store }>
<View style={{ flex: 1 }}>
<AppWithNavigationState />
</View>
</Provider>
);
}
}
export default Root;
NavReducer.js
import { NavigationActions } from 'react-navigation';
import AppNavigator from '../AppNavigator';
const initialState = AppNavigator.router.getStateForAction(
NavigationActions.init()
// AppNavigator.router.getActionForPathAndParams('Main')
);
export default navReducer = (state = initialState, action) => {
const nextState = AppNavigator.router.getStateForAction(action, state);
// Simply return the original `state` if `nextState` is null or undefined.
return nextState || state;
};
AppNavigator.js
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import LandingPage from './components/LandingPage';
import LoginScreen from "./components/LoginForm";
import RegistrationScreen from "./components/RegistrationForm";
import Homepage from "./components/Homepage";
const LoginStack = StackNavigator({
LandingPage: { screen: LandingPage },
Login: { screen: LoginScreen },
Registration: { screen: RegistrationScreen },
}, {
headerMode: 'none',
initialRouteName: 'LandingPage'
});
const DrawerNavigatorStack = DrawerNavigator({
Home: { screen: Homepage }
}, {
headerMode: 'none',
initialRouteName: 'Home'
});
const DrawerNavigation = StackNavigator({
DrawerStack: { screen: DrawerNavigatorStack }
}, {
headerMode: 'none',
initialRouteName: 'DrawerStack'
});
const AppNavigator = StackNavigator({
LoginStack: { screen: LoginStack },
Main: { screen: DrawerNavigation }
}, {
headerMode: 'none',
initialRouteName: 'LoginStack'
});
export default AppNavigator;
Login action
export const loginUser = ({ email, password }) => {
return (dispatch) => {
dispatch({ type: LOGIN_USER });
const data = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email,
password: password
})
};
const url = Globals.API_URL + 'accounts/login';
return fetch(url, data)
.then(response => {
const responseBody = JSON.parse(response._bodyText);
if (response.status === 200) {
dispatch({ type: LOGIN_USER_SUCCESS });
dispatch(NavigationActions.navigate({
routeName: ‘Home’, <=== supposed to navigate to the Home screen at this point
params: responseBody.data.access_token
}));
} else {
loginUserFail(dispatch, responseBody.message);
}
});
}
}
It successfully dispatches the LOGIN_USER_SUCCESS and the subsequent Navigation actions, but it doesn’t actually navigate to the Home screen
If I replace the ‘Home’ route with a route from the ‘LoginStack’ it will navigate to that screen with no problem. So for example, this would work
dispatch(NavigationActions.navigate({
routeName: ‘LandingPage’, <=== will successfully navigate back to the LandingPage
params: responseBody.data.access_token
}));
I’m obviously missing something, any ideas what that might be?
Thanks in advance