I have two flows in my app in the main flow.. one is stack navigation and the other is drawer navigation. Stack navigation is working okay but drawer one is giving me this error -
Invariant Violation: The navigation prop is missing for this navigator. In react-navigation version 3 you must set up your app container directly. More info:
https://reactnavigation.org/docs/en/app-containers.html
App.js
import { createAppContainer,
createStackNavigator ,
createBottomTabNavigator,
createDrawerNavigator,
createSwitchNavigator
} from "react-navigation";
import LoginScreen from "./src/screens/LoginScreen";
import RegisterScreen from "./src/screens/RegisterScreen";
import StartScreen from './src/screens/StartScreen';
import { HomeDrawerNavigator } from "./src/components/HomeDrawerNavigator";
const MainNavigator = createSwitchNavigator(
{
loginFlow: {
screen: createStackNavigator(
{
StartScreen :{screen:StartScreen
},
LoginScreen : {screen : LoginScreen},
RegisterScreen : {screen : RegisterScreen}
}
)
},
homeflow: {
screen:HomeDrawerNavigator
}
}
)
const App = createAppContainer(MainNavigator);
export default App;
HomeDrawerNavigator.js
import { createDrawerNavigator } from "react-navigation";
import HomeScreen from "../screens/HomeScreen";
import PolicyScreen from "../screens/PolicyScreen";
export const HomeDrawerNavigator = createDrawerNavigator({
HomeScreen: { screen: HomeScreen },
PolicyScreen: { screen: PolicyScreen }
})
I have also added <HomeDrawerNavigator/> component in my Homescreen.js.
I'm trying to set up a simple screen navigation bar using react-navigation. I've got the navigation working but can't make any icons appear on each tab.
I've tried using FontAwesome instead of IonicIcons but the same Box with an X through it appears in place of the desired icon.
import React, {Component} from 'react';
import {createBottomTabNavigator, createAppContainer} from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import HomeScreen from './screens/HomeScreen'
import SearchScreen from './screens/SearchScreen'
import ScanScreen from './screens/ScanScreen'
const TabNavigator = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: () => (<Icon name="md-home" />)
}
},
Scan: {
screen: ScanScreen
},
Search: {
screen: SearchScreen
}
});
export default createAppContainer(TabNavigator);
You have to link it react-native-vector-icons, in your command prompt:
react-native link react-native-vector-icons
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"
}
);
this seems to be a common problem with react navigation once they updated their API
looked at Fix Error: The component for route 'Home' must be a React component
neither profile nor camera components want to load into this tabNavigator. Any suggestions?
Camera.js
import React, { Component } from 'react';
class Camera extends Component {
render() {
return (
<Text>Camera</Text>
);
}
}
export default Camera;
InstaClone.js
import React, { Component } from 'react'
import { View, StyleSheet} from 'react-native'
import Camera from './components/screens'
import {MainFeed, Login, Profile} from './components/screens'
import { createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
const Tabs = createBottomTabNavigator({
feed: MainFeed,
Camera: Camera,
profile: Profile
});
const MainStack = createAppContainer(createSwitchNavigator({
login: Login,
main: Tabs
}));
const MainStack = createAppContainer(Tabs);
class InstaClone extends Component {
render() {
return <MainStack/>
}
}
export default InstaClone;
I'm learning react native with configuring tabNavigator, DrawerNavigator, and StackNavigator into one without NativeBase or Expo with a single react-navigation library.
I achieved it but there comes an error when I perform some specific sequence in my application.
The application starts with Tab Screen. -> Change Tab -> Open Drawer -> Goto Stack -> open Drawer and then go to Tabs gives this error.
Here is my code :
App.js
import React from 'react';
import {Drawer} from "./src/navigation/MergedNavigator";
import {View,Text} from "react-native";
const App = () => (
<View style={{flex: 1,backgroundColor: '#293656'}}>
<Drawer />
</View>
);
export default App;
MergedNavigator.js
import {DrawerNavigator,StackNavigator,createBottomTabNavigator} from 'react-navigation';
// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';
// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';
//plain
export const stack = StackNavigator({
DetailScreen:{screen:DetailScreen},
MainScreen:{screen:MainScreen}
},{
initialRouteName:'DetailScreen'
});
const secondStack = StackNavigator({
RegisterScreen:{screen:RegisterScreen},
ForgotScreen:{screen:ForgotScreen}
},{
initialRouteName:'ForgotScreen'
})
export const Tabs = createBottomTabNavigator({
Login:{screen:LoginScreen},
TabOne:{screen:secondStack},
TabTwo:{screen:TabTwo}
},{
animationEnabled:true
})
export const Drawer = DrawerNavigator({
Tabs:{screen:Tabs},
Stack:{screen:stack}
})
And all other imported stack screen has nothing but the title.
What's the problem here with my code? Or is there any better way I can achieve these all 3 Navigators with only react-navigation?
There is an issue with the sub actions being reset inside the Stack which can be seen here
Therefore the workaround for this issue would be to wrap your createBottomTabNavigator inside a createStackNavigator with headerMode: none in order to achieve the desired effect.
Info
By adding a StackNavigator nested directly within a DrawerNavigator, the sub actions will be reset only to the StackNavigator defined and won't affect the child screen states, therefore it won't throw the error, as mentioned in the code
if (route.index !== undefined && route.index !== 0) {
subAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: route.routes[0].routeName,
}),
],
});
}
MergedNavigator.js
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';
// tab navigator screens
import LoginScreen from '../screens/Login';
import TabOne from '../screens/tabA';
import TabTwo from '../screens/tabB';
//plain
export const stack = StackNavigator({
DetailScreen:{screen:DetailScreen},
MainScreen:{screen:MainScreen}
},{
initialRouteName:'DetailScreen'
});
const secondStack = StackNavigator({
RegisterScreen:{screen:RegisterScreen},
ForgotScreen:{screen:ForgotScreen}
},{
initialRouteName:'ForgotScreen'
})
export const Tabs = createBottomTabNavigator({
Login:{screen:LoginScreen},
TabOne:{screen:secondStack},
TabTwo:{screen:TabTwo}
},{
animationEnabled:true
})
const TabStack = createStackNavigator({ //... Adding the Stack here
Tabs: {screen: Tabs}
}, {
headerMode: 'none'
})
export const Drawer = DrawerNavigator({
Tabs:{screen:Tab},
Stack:{screen:stack}
})
Here's a modified Snack with header's enabled
import { StackActions, NavigationActions } from 'react-navigation';
let { navigation } = this.props;
let resetAction = StackActions.reset({
key: undefined,
index: 0,
actions: [NavigationActions.navigate({ routeName: 'YourScreen' })],
});
navigation.dispatch(resetAction);
When you set the key to undefined, the navigator uses the actual stack, not the root.
First of all your main issue is you cann't create more than one StackNavigator() on your code.
Please try different navigator for redirection like below example code.
import {DrawerNavigator,StackNavigator,createBottomTabNavigator,createMaterialTopTabNavigator} from 'react-navigation';
// stack navigation screens
import DetailScreen from '../screens/detail';
import MainScreen from '../screens/main';
import ForgotScreen from '../screens/ForgotScreen';
import RegisterScreen from '../screens/RegisterScreen';
// tab navigator screens
import * as TAB from '../tab';
export const stack = StackNavigator({
DetailScreen:{screen:DetailScreen},
MainScreen:{screen:MainScreen}
},{
initialRouteName:'DetailScreen'
});
const secondStack = createMaterialTopTabNavigator({
RegisterScreen:{screen:RegisterScreen},
ForgotScreen:{screen:ForgotScreen}
},{
initialRouteName:'ForgotScreen'
})
export const Tabs = createBottomTabNavigator({
Login:{screen:TAB.Login},
TabOne:{screen:secondStack},
TabTwo:{screen:TAB.TabB}
},{
animationEnabled:true,
initialRouteName:'Login'
})
export const Drawer = DrawerNavigator({
Tabs:{screen:Tabs},
Stack:{screen:stack}
},
{
animationEnabled:true,
initialRouteName:'Tabs'
})
hope above code snippet is useful for you.