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
Related
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 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
}
}
)
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 trying to understand reactnavigation and i am setting up a concept app to understand.
What i am struggling at first is, that i get the Error Message "The component for route "SomeRoute" must be a React Component"
I do know, what it means, but i do not understand why this error is thrown.
I have following setup:
App.js:
import React from 'react';
import { Root } from './config/router';
import { SafeArea } from 'react-native';
class App extends Component {
render() {
return <Root />;
}
}
export default App;
router.js( config/router.js )
import React from 'react';
import { DrawerNavigator, TabNavigator, StackNavigator } from 'react-navigation';
import Feed from './../components/Feed';
import Search from './../components/Search';
import Favorites from './../components/Favorites';
import TextList from './../components/ComingSoon';
import Detail from './../components/Detail';
import Downloads from './../components/Downloads';
export const FeedStack = StackNavigator({
Feed: {
screen: Feed,
navigationOptions: {
title: 'Machines'
}
},
List: {
screen: TextList,
navigationOptions: {
title: 'List View'
}
},
Detail: {
screen: Detail,
navigationOptions: {
title: 'Detail'
}
}
});
export const TabStack = TabNavigator({
Dashboard: {
screen: FeedStack,
navigationOptions: {
title: 'Dashboard'
}
},
Search: {
screen: Search,
navigationOptions: {
title: 'Search'
}
},
Favorites: {
screen: Favorites,
navigationOptions: {
title: 'Favorites'
}
}
});
export const DownloadStack = StackNavigator({
Downloads: {
screen: Downloads,
navigationOptions: {
title: 'Downloads'
}
}
});
export const Root = DrawerNavigator({
Feed: {
Screen: TabStack,
navigationOptions: {
title: 'Machines'
}
},
Downloads: {
screen: DownloadStack
}
});
and Feed.js ( components/Feed.js )
import React from 'react';
import { View, Text } from 'react-native';
class Feed extends React.Component {
render() {
return (
<View>
<Text>Hallo Feed Soon</Text>
</View>
);
}
}
export default Feed;
As i can see, Feed is extending React.Component and also exporting a default Classname "Feed".
It seems to be a very Basic Mistake, what am i doing wrong here?
ok i found it.
The route "Feed" in Root has a "Screen" property instead of a "screen" Property.
can be closed by error in front of screen.
if you use react native router flux then this could be problem for using the wrong export syntax.
Usual syntax for export :
export {ComponentName};
or this :
export default ComponentName;
it should be (when using the react-native-router-flux
module.exports = ComponentName;