I've searched how to setup a button to make the drawer action on Stackoverflow for my react-native project and followed as per answers, but still it is not working. Some answers, it simply didn't work, but sometimes it is giving error (Invariant violation error). But the sliding action for opening up the drawer is working, still I want to include button for navigation drawer. I referred this link : Add hamburger button to React Native Navigation
Here is my code, I'm sorry it is too large.
import React, { Component } from 'react';
import {
StyleSheet, Text,
View, TextInput,
Button, TouchableHighlight,
TouchableOpacity, Image,
Alert, ImageBackground,
Platform, YellowBox,
Dimensions, Keyboard,
TouchableWithoutFeedback, AsyncStorage,
ActivityIndicator, FlatList,
ScrollView
} from 'react-native';
import { createStackNavigator, createAppContainer,createDrawerNavigator, DrawerToggle, DrawerNavigator, DrawerActions, StackNavigator } from "react-navigation";
import { Container, Content, ListItem, List } from "native-base";
class Hidden extends React.Component {
render() {
return null;
}
}
const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children}
</TouchableWithoutFeedback>
);
class LoginView extends Component {
static navigationOptions = {
header: null,
};
constructor(props) {
super(props);
this.myTextInput1 = React.createRef();
this.myTextInput2 = React.createRef();
this.state = {
email : '',
password: '',
};
let keys = ['email', 'password'];
AsyncStorage.multiRemove(keys, (err) => {
console.log('Local storage user info removed!');
});
}
onClickListener = (viewId) => {
Alert.alert("Help", "Contact Admin for "+viewId);
}
validateEmail = (email) => {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};
loginNext = ()=>{
AsyncStorage.multiSet([
["email", this.state.email],
["password", this.state.password]
]);
this.setState({
email : '',
password: '',
});
this.myTextInput1.current.clear();
this.myTextInput2.current.clear();
Keyboard.dismiss();
if (this.validateEmail(this.state.email)){
this.props.navigation.navigate('profile');
}
else{
Alert.alert('Warning','Enter proper email!')
}
}
render() {
return (
<DismissKeyboard>
<ImageBackground source={require('./zbg_app_1.jpg')} style={{width: '100%', height: '100%'}}>
<View style={styles.container}>
<View style={styles.inputContainer}>
<Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/email/ultraviolet/50/3498db'}}/>
<TextInput style={styles.inputs}
placeholder="Email"
keyboardType="email-address"
underlineColorAndroid='transparent'
onChangeText={(email) => this.setState({email})}
ref = {this.myTextInput1}/>
</View>
<View style={styles.inputContainer}>
<Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
<TextInput style={styles.inputs}
placeholder="Password"
secureTextEntry={true}
underlineColorAndroid='transparent'
onChangeText={(password) => this.setState({password})}
ref = {this.myTextInput2}/>
</View>
<TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={()=>{(this.state.email != '' && this.state.password != '') ?this.loginNext():Alert.alert('Warning','Empty Field(s)!')}}>
<Text style={styles.loginText}>Login</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.buttonContainer} onPress={() => this.onClickListener('forgot_password')}>
<Text>Forgot your password?</Text>
</TouchableHighlight>
</View>
</ImageBackground>
</DismissKeyboard>
);
}
}
class ProfileView extends Component {
static navigationOptions = {
headerTitle: 'Profile',
};
constructor(props) {
super(props);
this.myTextInput1 = React.createRef();
this.state = {
loggedEmail :'',
loggedPassword: '',
city:''
}
}
submitNext = ()=>{
this.myTextInput1.current.clear();
Keyboard.dismiss();
Alert.alert('Information',this.state.city);
{/*AsyncStorage.setItem('city',this.state.city);
this.setState({
city:''
});
*/}
}
render() {
AsyncStorage.multiGet(['email', 'password']).then(data => {
let email = data[0][1];
let password = data[1][1];
if (email !== null){
this.setState({loggedEmail:email});
}
});
return (
<View style={{ flexDirection: 'column' , alignItems: 'center', justifyContent: 'center'}}>
<View style={{ flexDirection: 'column' , marginTop: 60, alignItems: 'center', justifyContent: 'center'}}>
<Text>{this.state.loggedEmail}</Text>
<Button onPress={()=> this.props.navigation.navigate('login')} title="Login Page"/>
</View>
{/*<View style={styles.container1}>
<View style={styles.inputContainer}>
<TextInput style={styles.inputs}
placeholder="Enter city"
underlineColorAndroid='transparent'
onChangeText={(city) => this.setState({city})}
ref = {this.myTextInput1}/>
</View>
<TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={()=>{(this.state.city != '') ?this.submitNext():Alert.alert('Warning','Empty Field(s)!')}}>
<Text style={styles.loginText}>Submit</Text>
</TouchableHighlight>
</View>*/}
</View>
);
}
}
class Custom_Side_Menu extends Component {
render() {
return (
<View style={styles.sideMenuContainer}>
<Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg' }}
style={styles.sideMenuProfileIcon} />
<View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
<View style={{width: '100%'}}>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
<Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/social.jpg' }}
style={styles.sideMenuIcon} />
<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
<Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }}
style={styles.sideMenuIcon} />
<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
<Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/outbox.jpg' }}
style={styles.sideMenuIcon} />
<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text>
</View>
</View>
<View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
</View>
);
}
}
class Fetch extends Component{
constructor(props){
super(props);
this.state ={ isLoading: true,};
}
componentDidMount(){
return fetch('http://d4abf7d9.ngrok.io/opdytat003/api/login/',
{
method: 'POST',
headers:{
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render(){
console.log(this.state.dataSource)
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return(
<ScrollView style={{flex: 1, paddingTop:30}}>
{/*<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
keyExtractor={({id}, index) => id}
/>*/}
<Text>API => Zelthy API:</Text>
<Text>{JSON.stringify(this.state.dataSource.next_step)}</Text>
<Text>{JSON.stringify(this.state.dataSource.access_token)}</Text>
<Text>{JSON.stringify(this.state.dataSource.menu)}</Text>
<Text>{JSON.stringify(this.state.dataSource.detail)}</Text>
<Text>{JSON.stringify(this.state.dataSource.responsecode)}</Text>
<Text>{JSON.stringify(this.state.dataSource.refresh_token)}</Text>
</ScrollView>
);
}
}
const AppLogin = createStackNavigator({
login: {
screen: LoginView,
},
},
{
initialRouteName: "login"
}
);
const AppProfile = createStackNavigator({
profile: {
screen: ProfileView,
},
},
);
const Nav = createDrawerNavigator(
{
Home: {
screen: AppLogin,
navigationOptions:{
drawerLockMode: 'locked-closed',
drawerLabel: <Hidden />
},
},
Profile: {
screen: AppProfile
},
Activities: {screen: Custom_Side_Menu},
API: {screen: Fetch},
'Sign Out': {screen: LoginView},
},
{
contentOptions: {
activeTintColor: 'green',
inactiveTintColor: 'white',
},
drawerPosition: 'left',
drawerWidth: 200,
drawerBackgroundColor: 'purple',
initialRouteName: 'Home'
}
);
export default createAppContainer(Nav);
I've referred Github React Native issues links but it also didn't help in my case.
When I add this part of code in StackNavigator of Profile screen, I get this below output but no change on clicking.
navigationOptions: ({ navigation }) => ({
title: 'Profile', // Title to appear in status bar
headerLeft: <Button title='=' onPress={ () => navigation.navigate('DrawerOpen') } />
})
Screenshot:
