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;
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 created createDrawerNavigator. But when call "props.navigation.dispatch(DrawerActions.openDrawer())" nothing show. Here is my code.
MenuNavigator.js
import { createDrawerNavigator } from "react-navigation";
import Login from "../screens/auth/Login"
import ForgotPassword from "../screens/auth/ForgotPassword"
import SignUp from "../screens/auth/SignUp";
const MenuNavigator = createDrawerNavigator({
//Drawer Optons and indexing
ForgotPassword: ForgotPassword,
SignUp: SignUp,
},
{
contentOptions: {
activeTintColor: '#e91e63',
},
}
);
export default MenuNavigator;
AppNavigator
import { createStackNavigator, createAppContainer } from "react-navigation";
import StackNavigatorMain from "./StackNavigatorMain"
import MenuNavigator from "./MenuNavigator"
const AppNavigator = createStackNavigator(
{
StackNavigatorMain: StackNavigatorMain,
MenuNavigator: MenuNavigator
},
{
headerMode: "none",
navigationOptions: {
headerVisible: false
},
initialRouteName: "StackNavigatorMain"
}
);
export default createAppContainer(AppNavigator);
Call openDrawer
onLoginClicked = () => {
props.navigation.dispatch(DrawerActions.openDrawer());
}
First get the reference of the navigator from top level component like this:
const AppContainer = createAppContainer(AppNavigator);
return <AppContainer ref={navigatorRef => Navigation.setTopLevelNavigator(navigatorRef)} />;
In Navigation.js file you need to set a global variable for navigator reference :
let _navigator;
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
Then create function there like this:
function openDrawer() {
_navigator.dispatch(DrawerActions.openDrawer())
}
Do not forget to import them:
import { DrawerActions } from 'react-navigation';
After that export them from Navigation.js file:
export default {
setTopLevelNavigator,
openDrawer,
}
AFAIK Opening drawer from React-navigation v3 is called like this piece of code
this.props.navigation.openDrawer();
EDIT:
I tried to minimally replicate this using react-navigation v3
https://snack.expo.io/#keysl183/basic-drawer-v3
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
}
}
)
My objective is to implement redux into my react-native proj. But it's not an error, it's unsuccessful. How can I organize my code such that it'll work?
App.js
import React from 'react';
import { AppRegistry } from 'react-native';
import { Provider } from 'react-redux';
import ReduxNavigation from './src/navigation/ReduxNavigation';
import AppReducer from './src/reducers/index';
import { middleware } from './src/utils/redux';
import { createStore, applyMiddleware } from 'redux';
import { logger } from 'redux-logger';
import thunk from 'redux-thunk';
import AppNavigation from './src/navigation/AppNavigation';
//import promise from 'redux-promise-middleware';
import { NavigationActions } from 'react-navigation';
// create our store
const store = createStore(AppReducer, applyMiddleware(thunk, logger));
class App extends React.Component {
render() {
return (
<Provider store={store}>
<AppNavigation />
</Provider>
);
}
}
export default App;
../utils/redux
import {
createReactNavigationReduxMiddleware,
reduxifyNavigator,
createNavigationReducer,
} from 'react-navigation-redux-helpers';
import { createStackNavigator } from 'react-navigation';
const middleware = createReactNavigationReduxMiddleware(
'root',
state => state.nav
);
const App = reduxifyNavigator('root');
export { middleware, App };
../navigation/navReducer
import { NavigationActions } from 'react-navigation';
import AppNavigation from '../navigation/AppNavigation';
const firstAction = AppNavigation.router.getActionForPathAndParams(
'initialStack'
);
const tempNavState = AppNavigation.router.getStateForAction(firstAction);
const initialNavState = AppNavigation.router.getStateForAction(tempNavState);
const nav = (state = initialNavState, action) => {
let nextState;
switch (action.type) {
default: {
nextState = AppNavigation.router.getStateForAction(action, state);
break;
}
}
return nextState || state;
};
export default nav;
../reducers/index
import { combineReducers } from 'redux';
import transactionsReducer from './transactionsReducer';
import setVisibilityFilter from './setVisibilityFilter';
import userReducer from './userReducer';
import AppNavigation from '../navigation/AppNavigation';
import { createNavigationReducer } from 'react-navigation-redux-helpers';
import nav from './navReducer';
const navReducer = createNavigationReducer(AppNavigation);
const AppReducer = combineReducers({
nav: navReducer,
transactionsReducer,
setVisibilityFilter,
userReducer,
});
export default AppReducer;
../navigation/ReduxNavigation
import React from 'react';
import { addNavigationHelpers,StackNavigator } from 'react-navigation';
import { connect } from 'react-redux';
import {AppNavigation} from './AppNavigation';
class ReduxNavigation extends React.Component {
render() {
const { dispatch, nav } = this.props;
return (
<AppNavigation
navigation={addNavigationHelpers({
dispatch,
state: nav,
})}
/>
);
}
}
const mapStateToProps = state => ({
nav: state.nav,
});
export default connect(mapStateToProps)(ReduxNavigation);
../navigation/AppNavigation
//please consider all my screens to be dumb for transparency..
import React from 'react';
import { StackNavigator, createDrawerNavigator } from 'react-navigation';
import { Button, Icon } from 'native-base';
import InitialScreen from '../containers/InitialScreen';
//import ForgottenPasswordScreen from '../containers/ForgottenPassword';
import Transactions from '../containers/Transactions';
import Screen1 from '../containers/Screen1';
import Screen2 from '../containers/Screen2';
import Screen3 from '../containers/Screen3';
import SignIn from '../containers/SignIn';
import Accounts from '../components/Accounts';
import SignUp from '../containers/SignUp';
// drawer stack
const DrawerStack = createDrawerNavigator({
screen1: { screen: Screen1 },
screen2: { screen: Screen2 },
screen3: { screen: Screen3 },
});
const DrawerNavigation = StackNavigator(
{
DrawerStack: { screen: DrawerStack },
},
{
headerMode: 'float',
}
);
// login stack
const LoginStack = StackNavigator({
transactionsScreen: { screen: Transactions },
});
const initialStack = StackNavigator({
initialScreen: { screen: InitialScreen },
});
// Manifest of possible screens
export const AppNavigation = StackNavigator(
{
initialStack: { screen: initialStack },
drawerStack: { screen: DrawerNavigation },
loginStack: { screen: LoginStack },
},
{
headerMode: 'none',
title: 'Main',
initialRouteName: 'initialStack',
}
);
I'm a beginner and it's highly likely my code structures could be wrong, but this is the basic idea. I have to use navigationV3.
Would someone go through this and advise me on my bad practices on the above code? I want to improve my coding style.
Would someone also create and share a boilerplate for the above scenario? EXPO compactable.