We Keep Coding

React Native drawer navigation: how to open drawer by clicking custom button in specific scene?

I've tried to open the drawer by clicking the following button (screenshot) in a specific scene.
current status
and here goes my code.
// App.js
import React, { Component } from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import { createDrawerNavigator } from 'react-navigation-drawer'
import SplashScreen from 'react-native-splash-screen'
import RNBootSplash from "react-native-bootsplash"
import MainCategory from './src/Scenes/MainCategory'
import SubCategory from './src/Scenes/SubCategory'
import DetailScene from './src/Scenes/DetailScene'
import Questions from './src/Scenes/Questions'
import Ruleta from './src/Scenes/Ruleta'
import CustomDrawerComponent from './src/Components/CustomDrawerComponent'
export default class MainRouter extends Component {
componentDidMount() {
SplashScreen.hide()
RNBootSplash.hide({ duration: 250 })
}
render() {
const StackNavigator = createStackNavigator({
MainCategory: {screen: MainCategory},
SubCategory: {screen: SubCategory},
DetailScene: {screen: DetailScene},
Questions: {screen: Questions},
Ruleta: {screen: Ruleta},
}, {
initialRouteName: "MainCategory",
headerMode: "none"
})
const DrawerNavigator = createDrawerNavigator({
MainCategory: {screen: MainCategory},
}, {
drawerPosition: 'right',
contentComponent: CustomDrawerComponent
})
const MainNavigator = createSwitchNavigator({
Stack: StackNavigator,
Drawer: DrawerNavigator,
}, {
initialRouteName: 'Stack',
contentComponent: CustomDrawerComponent
})
const AppContainer = createAppContainer(MainNavigator)
return(
<AppContainer />
)
}
}
// Specific scene
import React, { Component } from 'react'
import { ScrollView, StatusBar, View, TouchableOpacity, Text, Image, Modal } from 'react-native'
import HeaderBar from '../Components/HeaderBar'
export default class Questions extends Component {
constructor(props) {
super(props)
this.state = {
headerTitle: props.navigation.getParam('headerTitle'),
catId: props.navigation.getParam('catId'),
}
}
openSideMenu = () => {
this.props.navigation.toggleDrawer
this.props.navigation.openDrawer()
}
render() {
return (
<View style={rootStyle}>
<View>
<StatusBar hidden={false} translucent backgroundColor="transparent" barStyle="light-content" />
<HeaderBar title={headerTitle} onPressLeft={() => this.props.navigation.goBack()} leftShow={true} onPressRight={this.openSideMenu} rightShow={true} />
</View>
<ScrollView>
<QuestionList todoQues={todoQues} favQues={favQues} action={this.action.bind(this)} />
</ScrollView>
</View>
)
}
}
But it's not working.
I expect the result like the following screenshot.
expected result
Please let me know what I should do more and how to use the drawer navigator in a specific scene.
Thanks for your time!

First of all instead of calling the method this.props.navigation.toggleDrawer(), call the method this.props.navigation.dispatch(DrawerActions.openDrawer()).
You also need to import DrawerActions for this to work. And remove the first function that you called in your openSideMenu function because you don't need the this.props.navigation.openDrawer()

How can i navigate from a Drawer Stack to a Switch Stack in react navigation?

I'm using React-navigation V3. How can I navigate from MenuDrawer in contentComponent to a Login screen in the Swith Navigator??
This is my switch Navigator (my login).
const AppContainer = createAppContainer(createSwitchNavigator(
{
VerifyActiveUser,
ActProgramadas: MainDrawer,
Login,
SyncData
},
{
initialRouteName: 'VerifyActiveUser',
}
));
export default class StackNavigator extends Component{
render(){
return <AppContainer
/>;
}
}
This is my Drawer Stack (MainDrawer). MenuDrawer is my custom drawer, from there i want to go to Login Screen (From Switch Navigator) with a "go out" Button to end my user session but i don't know how to send navigations props to contentComponent of my drawer:
const DrawerConfig ={
drawerWidth: WIDTH * 0.86,
contentComponent: ({navigation}) => {
return (<MenuDrawer navigation = { navigation } />);
},
contentOptions: {
activeTintColor: 'blue',
activeBackgroundColor: 'green'
},
initialRouteName: 'ActProgramadas',
unmountInactiveRoutes: true,
edgeWidth: WIDTH * 0.80,
backBehavior: false
}
const MyDrawerNavigator = createDrawerNavigator({
ActProgramadas: { screen: StackNavigator },
ActRealizadas: { screen: StackActReal },
ObsTecnicas: { screen: StackObs },
ObsPendientes: { screen: StackObsPend },
ObsRealizadas: { screen: StackObsReal },
SyncData
}, DrawerConfig);
const AppContainer = createAppContainer(MyDrawerNavigator)
export default class DrawerNavigator extends Component{
render(){
return <AppContainer />;
}
}
Can I use redux to send the navigation.navigate('Login') prop from the swith to my custom drawer??

You can add a logout screen in your drawer. The screen is a React component which defines the logout behavior on mounting:
import React from 'react';
import { View, AsyncStorage, ActivityIndicator, StatusBar } from 'react-native';
export default class LogoutScreen extends React.Component {
async componentDidMount() {
await AsyncStorage.clear();
this.props.navigation.navigate('Login');
}
render() {
return (
<View>
<ActivityIndicator />
<StatusBar barStyle='default' />
</View>
);
}
}

Routing with React-Native

I have a HomePage.js with only one button, Login Button, and when clicked I want to render LoginPage.js. I tried something like this but it's not working:
HomePage.js:
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
constructor () {
super();
this.state = {LoginPage:false};
}
showLogin = () => {
this.setState({LoginPage:true});
}
render() {
return(
<View>
<TouchableOpacity onPress={() => this.showLogin()}>
<Text>LogIn</Text>
</TouchableOpacity>
</View>
)
}
}
export default HomePage;
In React it's easily done with react-router but I don't know how to do it with React-Native.
EDIT 1 after including react-navigation I get the following error: Route 'navigationOptions' should declare a screen. Did I miss something?
App.js:
import React, {Component} from 'react';
import {StackNavigator} from 'react-navigation';
import HomePage from './HomePage';
import LoginPage from './LoginPage';
const App = StackNavigator({
Home: {screen: HomePage},
LoginPage: {screen: LoginPage},
navigationOptions: {
header: () => null,
}
});
export default App;
HomePage.js
import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import LoginPage from './LoginPage';
class HomePage extends Component{
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return(
<View>
<TouchableOpacity onPress={() => navigate('LoginPage'), { name: 'Login' }}>
<Text>Login</Text>
</TouchableOpacity>
<Button
onPress={() => navigate('LoginPage'), { name: 'Login' }}
>Log In</Button>
</View>
)
}
}
export default HomePage;
LoginPage.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class LoginPage extends Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
return (
<View>
<Text>This is login page</Text>
</View>
);
}
}
export default LoginPage;

Use React Navigation. Its the best and simple solution right now for react native.
for adding the library use npm install --save react-navigation
You can define class for routing like below using a StackNavigator.
import {
StackNavigator,
} from 'react-navigation';
const BasicApp = StackNavigator({
Main: {screen: MainScreen},
Profile: {screen: ProfileScreen},
, {
headerMode: 'none',
}
});
Then u can define classes like the one u mentioned in the question.
eg:
class MainScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}
and second class
class ProfileScreen extends React.Component {
static navigationOptions = ({navigation}) => ({
title: navigation.state.params.name,
});
render() {
const { goBack } = this.props.navigation;
return (
<Button
title="Go back"
onPress={() => goBack()}
/>
);
}
}
The navigate function can be used for navigating to a class and goBack can be used for going back to a screen.
For hiding header u can use header mode or specify navigation options in each screen
For details please refer : https://reactnavigation.org/

If you're just looking for a plugin like react-router to use on React Native, you can use react-native-router-flux, available here: https://github.com/aksonov/react-native-router-flux.
Also, it's better if you just put a reference to the function in there instead of invoking it. Something like:
<TouchableOpacity onPress={this.showLogin}>...</TouchableOpacity>

Calling a function in one of the components in the route

Suppose I have this:
const navtest = StackNavigator({
Home: {screen: HomeScreen},
Stuff: {screen: Screen2},
Stuff2: {screen: Screen3},
});
And I'm currently viewing Stuff2/Screen3. And I have some function in my HomeScreen component, say XYZ( ). On the basis of any certain action on my current route ( Screen3 ), how do I call that function XYZ( ) in HomeScreen?
My Routes file which directly links to index.js.
import {AppRegistry} from 'react-native';
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import Screen2 from './Screen2';
import Screen3 from './Screen3';
import HomeScreen from './HomeScreen';
const navtest= StackNavigator({
Home: {screen: HomeScreen},
Stuff: {screen: Screen2},
Stuff2: {screen: Screen3},
});
AppRegistry.registerComponent('navtest', () => navtest);
and in my HomeScreen file
export default class HomeScreen extends Component {
constructor(props){
super(props);
this.state = {one: '0'};
}
static navigationOptions = {
header: null,
};
functionToPass() {
console.log('Function accessed');
this.setState({one: 'X'});
}
render() {
const {navigate} = this.props.navigation;
return (
<View>
<TouchableOpacity onPress = {() => navigate('Stuff', {ABC: 'abc'})}>
<Text>
{this.state.one}
</Text>
</TouchableOpacity>
</View>
);
}
}

Are you navigating from Home to Screen3? Then you can pass you function down as a param to be available in the navigation state. E.g. this.props.navigation.navigate(‘Stuff2’, { someFunc: someFuncFromHome }); then, in your Screen3, you can invoke the function like this: this.props.navigation.state.params.someFunc();
If Home is not the previous route, then maybe the function should be extracted outside of the Home component and use a redux action or similar things to achieve the same result.
Follow up:
There are a few ways that I think that may be able to help you.
1) Introduce Redux to your app. This is a good use case for redux as this state can be manipulated from anywhere in the app. Dispatch the same redux action from any where in the app, and the HomeScreen can read from redux.
2) If you don't want redux in your app yet, maybe you can keep the state in a navigator wrapper component like the one in my comment earlier.
class App extends Component {
constructor(props) {
super(props)
this.state = { one: '0' };
}
yourRootChangeFunc() {
this.setState({ one: 'X' });
}
render() {
return <App screenProps={{ rootChange: this.rootChange, one: this.state.one }} />
}
}
Then you can access one in other screens with this.props.screenProps.one
3) Another way is use setParams, which you can setParams for a specific screen by passing in the key of the route.
In HomeScreen component:
export default class HomeScreen extends Component {
...
componentWillMount() {
this.props.navigation.setParams({ one: '0' });
}
render() {
const { state: { params = {} } = this.props.navigation;
return (
...
<View>
{params.one || '0'} // this is because currently there is no way to set a default params for a route
</View>
...
);
}
}
Then in Screen2 component:
import React, { Component } from 'react';
import {
View,
TouchableOpacity,
Text,
} from 'react-native';
import { NavigationActions } from 'react-navigation';
export default class Screen2 extends Component {
onPress = () => {
const setParamsAction = NavigationActions.setParams({
params: { one: 'X' },
key: this.props.navigation.state.params.homeKey,
})
this.props.navigation.dispatch(setParamsAction)
}
render() {
return (
<View>
<TouchableOpacity onPress={this.onPress}>
<Text>Screen2</Text>
</TouchableOpacity>
</View>
);
}
}
This way, pressing on Screen2 text in Screen2 will change the params for HomeScreen. Then when go back to HomeScreen, we can see that the text changed from '0' to 'X'.

Reuse screen in React Navigation

I'm new to React Native and trying to set up a navigation between two screens (or pages) using react-navigation package. I'm using a StackNavigator right now.
The problem I am facing is that there seems to be no way to navigate back to a previous screen. All I can do is call navigate(). If, for example, I want to navigate from Home to FRW and back to Home, it seems this will leave me with two instances of Home on the stack that are executed in parallel (one of which can't be seen). My code is something like this:
app.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './views/HomeScreen.js'
import FRWScreen from './views/FRWScreen.js'
const MainNavigator = StackNavigator({
FRW: { screen: FRWScreen },
Home: { screen: HomeScreen },
}, {
headerMode: 'screen',
headerVisible: false,
navigationOptions: {
header: null
},
initialRouteName: "Home"
});
export default class TestApp extends Component {
render() {
return (
<MainNavigator></MainNavigator>
);
}
}
AppRegistry.registerComponent('TestApp', () => TestApp);
HomeScreen.js
export default class HomeScreen extends Component {
static navigationOptions = {
title: 'Welcome'
};
(...)
onSomeButtonPressed() {
this.props.navigation.navigate('FRW');
}
componentDidMount() {
if (this.locationWatchID !== undefined) return;
this.locationWatchID = navigator.geolocation.watchPosition((position) => {
console.log(this.locationWatchID);
});
}
componentWillUnmount() {
navigator.geolocation.clearWatch(this.locationWatchID);
}
render() {
(...)
return (
<View style={styles.container}>
<MapView ref={ref => { this.map = ref; }} />
<TouchableHighlight
style={styles.someButton}
onPress={this.onSomeButtonPressed.bind(this)}
>
<Text>Press Me</Text>
</TouchableHighlight>
</View>
)
}
}
FRWScreen.js looks similar to HomeScreen.js (and contains .navigate("Home"))
The result of this code is, after navigating to FRW and back, that the geolocation callback is executed twice with different watchIDs. Which makes me believe the HomeScreen is actually on the navigation stack twice.

On your FRWScreen you should use this.props.navigation.goBack(null) instead. See https://reactnavigation.org/docs/navigators/navigation-prop#goBack-Close-the-active-screen-and-move-back.