I am following the documentation of createBottomTabNavigator in React Native, in order to hide the bottom tabs. I have to add the navigationOptions and pass tabBarVisible: false.
Not sure what I am missing:
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import AuthScreen from './screens/AuthScreen'
import WelcomeScreen from './screens/WelcomeScreen'
import MapScreen from './screens/MapScreen'
import DeckScreen from './screens/DeckScreen'
import SettingsScreen from './screens/SettingsScreen'
import ReviewScreen from './screens/ReviewScreen'
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation'
import { Provider } from 'react-redux'
import store from './store'
const TabNavigator = createBottomTabNavigator(
{
Welcome: WelcomeScreen,
Auth: AuthScreen,
Main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
}, {
navigationOptions: {
tabBarVisible: false,
lazy: true
}
}
)
const AppContainer = createAppContainer(TabNavigator);
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<AppContainer />
</Provider>
)
}
}
Place tabBarVisible in defaultNavigationOptions, not navigationOptions:
const TabNavigator = createBottomTabNavigator(
{
Welcome: WelcomeScreen,
Auth: AuthScreen,
Main: {
screen: createBottomTabNavigator({
map: MapScreen,
deck: DeckScreen,
review: {
screen: createStackNavigator({
review: ReviewScreen,
settings: SettingsScreen
})
}
})
}
}, {
defaultNavigationOptions: {
tabBarVisible: false
},
navigationOptions: {
lazy: true
}
}
)
Related
I want to start the App with "LoadingScreen.js" but it keeps starting with "MainScreen.js"
App.js:
import React from 'react'
import { StyleSheet, Platform, Image, Text, View } from 'react-native'
import { createAppContainer, createSwitchNavigator, SwitchNavigator } from 'react-navigation'
import MainScreen from './screens/MainScreen'
import LoginScreen from './screens/LoginScreen'
import LoadingScreen from './screens/LoadingScreen'
const Total=createSwitchNavigator(
{
MainScreen,
LoginScreen,
LoadingScreen,
},
{
initialRouteName: 'LoadingScreen'
}
)
const AppSwitch=createAppContainer(Total)
export default AppSwitch;
Am I missing something? Thank you for your help
***Modified:
const Total = createSwitchNavigator(
{
Loading: {
screen: LoadingScreen,
path: "./screens/LoadingScreen"
},
Login: {
screen: LoginScreen,
path: "./screens/LoginScreen"
},
},
{
initialRouteName: 'Loading'
}
)
const AppSwitch = createAppContainer(Total)
export default AppSwitch;
Try swapping screens as following
const Total=createSwitchNavigator(
{
LoadingScreen,
MainScreen,
LoginScreen,
},
{
initialRouteName: 'LoadingScreen' <<--- Ignore this property --->>
}
)
More clearly defined here Dynamic InitialRouteName
I am just trying to add a dummy bottom nav bar with four buttons that don't really do anything. I know it's a weird question...
Here is my App.js
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Home from './screens/HomeScreen';
const AppNavigator = createStackNavigator({
HomeScreen: { screen: Home,
navigationOptions: ({ navigate })=> ({
header: null,
}),
}
});
const App = createAppContainer(AppNavigator);
export default App;
It doesn't need to do anything, it just needs to show up on every screen
You could try this one
import React, { Component } from 'react';
import { View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Home from './screens/HomeScreen';
const Dummy = () => {
return <View />;
};
const HomeNavigator = createStackNavigator({
HomeScreen: { screen: Home,
navigationOptions: ({ navigate })=> ({
header: null,
}),
},
});
const AppNavigator = createBottomTabNavigator({
Tab1: {
screen: HomeNavigator,
},
Tab2: {
screen: Dummy,
},
Tab3: {
screen: Dummy,
},
Tab4: {
screen: Dummy,
},
});
const App = createAppContainer(AppNavigator);
export default App;
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 want to pass this.props to screen components from app.js, below is my code.
I tried doing same but when I pass it as screenProp it shows as undefined in screen component.
App.js
import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import MapScreen from './MapScreen';
import LoginScreen from './LoginScreen';
import RegisterDeviceScreen from './RegisterDeviceScreen';
import React, { Component } from 'react';
import {
AsyncStorage,
} from 'react-native';
class AuthLoadingScreen extends Component {
componentDidMount() {
this._bootstrapAsync();
}
_bootstrapAsync = async () => {
const userToken = await AsyncStorage.getItem('sessionText');
if (!userToken) {
await AsyncStorage.clear();
}
await this.props.navigation.navigate(userToken ? 'App' : 'Auth');
};
render() {
return <RegisterDeviceScreen screenProps={this.props} />;
}
}
const AppStack = createStackNavigator(
{
HomeScreen: { screen: HomeScreen },
MapScreen: { screen: MapScreen },
LoginScreen: { screen: LoginScreen },
RegisterDeviceScreen: { screen: RegisterDeviceScreen },
},
{
navigationOptions: {
gesturesEnabled: false,
}
});
const AuthStack = createStackNavigator(
{
LoginScreen: { screen: LoginScreen },
RegisterDeviceScreen: { screen: RegisterDeviceScreen },
HomeScreen: { screen: HomeScreen },
MapScreen: { screen: MapScreen },
},
{
navigationOptions: {
gesturesEnabled: false,
}
});
const SwitchNavigator = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: AuthStack,
App: AppStack,
},
{
initialRouteName: 'AuthLoading',
}
);
const AppContainer = createAppContainer(SwitchNavigator);
export default AppContainer;
When I try to log it in componentdidmount() inside homescreen component it shows screenProp as undefined.
I am building an App on React-Native for which I am using React-Navigation
Now, Inside that i am using Stack-Navigation and TabNavigator (updated it DrawerNavigator)
import {
createStackNavigator,
TabNavigator,
DrawerNavigator
} from 'react-navigation';
import CoinCapCharts from "./src/container/CoinCapCharts.js"
import CoinCap from './src/container/CoinCap.js';
//THis is being Exported to App.js
export const Tab = TabNavigator({
TabA: {
screen: CoinCap
},
TabB: {
screen: CoinCap
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyScreen = createStackNavigator({
Home: {
screen: CoinCap
},
CoinCapCharts: {
screen: CoinCapCharts
}
},{
initialRouteName: 'Home',
headerMode: 'none'
});
export const Drawer = DrawerNavigator({
Tabs: { screen: Tab },
Stack: { screen: MyScreen },
})
I am importing this in my App.js where I am doing something like this
import React from 'react';
import {
Drawer
}from './Screen.js';
import {
View
} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View>
<Drawer/>
<Tab/>
</View>
);
}
}
Now, This is indeed showing Tab the first time I run my app but after I navigate to different screen and return back, It doesn't appear to be showing that Tab again
[Question:] What could I be doing wrong and How can I fix it?
Try to define one within the other.
Something like:
const Tab = TabNavigator({
TabA: {
screen: Home
},
TabB: {
screen: Home
}
}, {
order: ['TabA', 'TabB'],
animationEnabled: true,
})
export const MyStack = createStackNavigator({
Home: {
screen: Home
},
CoinCapCharts: {
screen: CoinCapCharts
},
Tab: {
screen: Tab
},
},{
initialRouteName: 'Home',
headerMode: 'none'
});
Now, render MyStack (not sure that Screen is the best name :)
export default class App extends React.Component {
render() {
return (
<View>
<MyStack />
</View>
);
}
}