I'm using React Navigation (V2) and I have a basic set up of screens like this:
import {
createDrawerNavigator,
createStackNavigator,
createSwitchNavigator
} from "react-navigation";
import DetailScreen from "../screens/DetailScreen";
import HomeScreen from "../screens/HomeScreen";
import LoginScreen from "../screens/LoginScreen";
import SettingsScreen from "../screens/SettingsScreen";
const StackNavigator = createStackNavigator({
Home: { screen: HomeScreen },
Detail: { screen: DetailScreen }
});
StackNavigator.navigationOptions = ({ navigation }) => {
let drawerLockMode = "unlocked";
if (navigation.state.index > 0) {
drawerLockMode = "locked-closed";
}
return {
drawerLockMode
};
};
const DrawerNavigator = createDrawerNavigator({
HomeStack: { screen: StackNavigator },
Settings: { screen: SettingsScreen }
});
const Navigator = createSwitchNavigator(
{ LoginScreen, DrawerNavigator },
{ initialRouteName: "LoginScreen" }
);
export default Navigator;
While using my app the user ends up on the DetailScreen, makes some choices and is then supposed to go back to the HomeScreen. I want to pass params to the HomeScreen while going back. Unfortunately it seems like pop() and goBack() do not accept any params.
How can I go back a screen and pass params while doing so?
You can use the listeners for the screen and fire your refresh changes there.
didFocus - the screen focused (if there was a transition, the transition
completed)
// In your component
componentDidMount () {
this._onFocusListener = this.props.navigation.addListener('didFocus', (payload) => {
// Update the component (API calls here)
});
}
Related
I am working with React Native createBottomTabNavigator and see that:
lazy - Defaults to true. If false, all tabs are rendered immediately. When true, tabs are rendered only when they are made active for the first time. Note: tabs are not re-rendered upon subsequent visits.
https://reactnavigation.org/docs/bottom-tab-navigator/
Where do I put the attribute "lazy" and set it to false if I want to reload the Connection page every time I click on the Connect navigation tab?
import { createStackNavigator, createAppContainer, createBottomTabNavigator, createSwitchNavigator } from 'react-navigation';
import ...
const RegisterScreens = createSwitchNavigator({
Phone: PhoneLoginScreen,
Register: RegisterScreen
});
const switchNavigator = createSwitchNavigator({
SplashScreen,
TutotialScreen,
loginFlow: createStackNavigator({
Main: MainScreen,
EmailLogin: EmailLoginScreen,
PhoneLogin: RegisterScreens
}),
mainFlow: createBottomTabNavigator({
Home: createStackNavigator({
HomeScreen,
AccountScreen
}),
Connect : ConnectionsScreen,
Chat: createStackNavigator({
AllChatScreen,
SingleChat
})
})
});
const App = createAppContainer(switchNavigator);
export default() => {
return (
<AuthProvider>
<App ref={(navigator)=> {setNavigator(navigator)}}/>
</AuthProvider>
)
};
I am using hooks and want to reload the Connection page because of a callout happening in useEffect()
I'm getting the following error from my React Native Android app.
'The component for route Dashboard must be a React component. For example:
import MyScreen from './MyScreen'
...
Dashboard: MyScreen
You can also use a navigator:
import MyNavigator from './MyNavigator'
...
Dashboard: MyNavigator'
I believe the following code is the problem. I have no idea how to fix it though, and would really appreciate some help.
import { createStackNavigator, createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator } from "react-navigation";
import Login from './Login';
import Dashboard from './Dashboard'
import PatientsScreen from './PatientsScreen'
const AppNavigator = createStackNavigator(
{
Home: { screen: Login },
Dashboard: { screen: DrawerNavigator, screen: DashboardTabNavigator }
},
{
headerMode: 'none'
}
);
const DashboardTabNavigator = createMaterialTopTabNavigator({
Patients: PatientsScreen
})
const DrawerNavigator = createDrawerNavigator (
{
Dashboard: { screen: Dashboard }
},{
initialRouteName: 'Dashboard'
}
)
export default createAppContainer(AppNavigator);
Here's a screenshot of what I am trying to achieve. The top left burger menu is a drawer navigator, and the tabs for patients, devices and recordings are what I'm working on now. I'm trying to use tab navigation logic with those. In the code I posted above, I am trying to set up a route to navigate to the PatientsScreen from the Dashboard.
Create your TopTabNavigator and DrawerNavigator before your StackNavigator.
You might check Dashboard: { screen: DrawerNavigator, screen: DashboardTabNavigator }, you're using the key twice, so only DashboardTabNavigator will be used.
From what you said and the screenshot you posted, I did it like this :
const DashboardTabNavigator = createMaterialTopTabNavigator({
Patients: PatientsScreen,
Recordings : RecordingsScreen,
Devices : DevicesScreen
})
const DrawerNavigator = createDrawerNavigator (
{
Dashboard: { screen: DashboardTabNavigator }
},{
initialRouteName: 'Dashboard'
}
)
const AppNavigator = createStackNavigator(
{
Home: { screen: Login },
Dashboard: {screen : DrawerNavigator }
},
{
headerMode: 'none'
}
);
Can you try below code
I have added mock RecordingScreen, DeviceScreen, change this as per your need
import { createStackNavigator, createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator } from "react-navigation";
import React, {Component} from "react";
import {View, Text} from 'react-native';
import Login from './Login';
import Dashboard from './Dashboard'
import PatientsScreen from './PatientsScreen'
class RecordingsScreen extends Component {
render(){
return <Text>Recordings</Text>
}
}
class DevicesScreen extends Component {
render(){
return <Text>Devices</Text>
}
}
const DashboardTabNavigator = createMaterialTopTabNavigator({
Patients: PatientsScreen,
Recordings: RecordingsScreen,
Devices: DevicesScreen
});
const AppStack = createStackNavigator({
Dashboard: DashboardTabNavigator
});
const DrawerNavigator = createStackNavigator(
{
DrawerStack: AppStack
},
{
headerMode: "none"
}
);
const AppNavigator = createStackNavigator(
{
Home: Login,
Dashboard: DrawerNavigator
},
{
headerMode: 'none',
initialRouteName: 'Dashboard'
}
);
export default createAppContainer(AppNavigator);
I used stackNavigator 2 in one of my projects as follows.
import { StackNavigator } from "react-navigation";
import {
LoginScreen,
TechStackScreen
} from '../screens';
// Public routes
export const PublicRoutes = StackNavigator({
login: { screen: LoginScreen}
});
// Secured routes
export const SecuredRoutes = StackNavigator({
techStack: { screen: TechStackScreen}
});
But when I tried to use it with version 3+ this doesn't work. Can anyone give me sample code of how to use stacknavigation 3+ like this?
You need to use createAppContainer on your root navigator. This was a breaking change introduced in v3
Also StackNavigator has been replaced by createStackNavigator
Here is a simple example of the usage.
App.js
import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
render() {
return (
<AppContainer />
)
}
}
MainNavigation.js
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';
const screens = {
Screen1: {
screen: Screen1
},
Screen2: {
screen: Screen2
}
}
const config = {
headerMode: 'none',
initialRouteName: 'Screen1'
}
const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);
You should import and use createStackNavigator, here is the docs https://reactnavigation.org/docs/en/stack-navigator.html
Just need a small change on your code
// Public routes
export const PublicRoutes = createStackNavigator({
login: { screen: LoginScreen}
});
// Secured routes
export const SecuredRoutes = createStackNavigator({
techStack: { screen: TechStackScreen}
});
Well, if you are using StackNavigator, like this:
// Inside "App.js"
render() {
return (
<NavigationContainer >
<Stack.Navigator >
<Stack.Screen name='Details'
component={ Details } />
</Stack.Navigator >
</NavigationContainer >
)
}
You can use the navigation via accessing properties available with each component:
// Inside "Details" Component
export default class Details extends React.Component {
render() {
const { navigate } = this.props.navigation
return (
<Button title='Goto Component' onPress={ () => navigate( 'SomeOtherComponent' ) }/>
)
}
}
I do have a simple React-native app, using react-navigation for navigation. My issue is that for one of the screens the header and title is not showing, even though it is set in navigationOptions:
main.js:
import React from "react";
import { View, Text } from "react-native";
import {
createDrawerNavigator,
createAppContainer,
createStackNavigator
} from "react-navigation";
import ArticleList from "./screens/ArticleList";
import ArticleList2 from "./screens/ArticeList2";
import ArticleWebView from "./screens/ArticleWebView";
// create the Navigator to be used
const Stack = createStackNavigator({
ArticleList: { screen: ArticleList },
ArticleWebView: { screen: ArticleWebView }
});
const Drawer = createDrawerNavigator(
{
Stack: { screen: Stack },
ArticleList2: { screen: ArticleList2 }
},
{
initialRouteName: "Stack"
}
);
// The container for the navigator
const AppContainer = createAppContainer(Drawer);
class App extends React.Component {
render() {
return <AppContainer />;
}
}
export default App;
The ArticleList2 is a very simple component:
import React from "react";
import { View, Text } from "react-native";
import ArticleListComponent from "../components/ArticleListComponent";
class ArticleList2 extends React.Component {
static navigationOptions = {
title: 'Link2'
};
render() {
return (
<View>
<Text>LIst2</Text>
</View>
);
}
}
export default ArticleList2;
However, the title and header are not rendered in the app. Could anybody help please?
DrawerNavigator does not include a header. In order to create a header inside of ArticleList2 you will have to create a new StackNavigator for the component.
You have to think about and plan out the navigation flow of your app.
The Drawer section of the React Navigation documentation is a little lacking, but you can use the same principle as described in the Tab section
A stack navigator for each tab
const ArticleList2Stack = createStackNavigator({
ArticleList2: { screen: ArticleList2 }
});
const Drawer = createDrawerNavigator(
{
Stack: { screen: Stack },
ArticleList2: { screen: ArticleList2Stack }
},
{
initialRouteName: "Stack"
}
);
I'm trying to set up my StackNavigator with redux.
import { connect } from "react-redux";
import { StackNavigator } from "react-navigation";
import ChatList from "../chat/chat-list";
import ChatDetail from "../chat/chat-detail";
// how do we pass props into this??
const ChatContainer = StackNavigator({
ChatList: {
screen: ChatList
},
ChatDetail: {
screen: ChatDetail,
navigationOptions: ({ navigation }) => ({
title: "Jesus",
tabBarVisible: false
})
}
});
export default connect(state => ({
cool: state.cool,
}), dispatch => ({}))(ChatContainer);
how would I pass cool into StackNavigator and down to ChatList?
you can use Navigator Props
const SomeStack = StackNavigator({
// config
});
<SomeStack
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
https://reactnavigation.org/docs/navigators/stack#Navigator-Props
new link for react-navigation 3.x
https://reactnavigation.org/docs/en/stack-navigator.html#navigator-props