Develop Reference

Swipable is not working in Android (Expo Cli)

import {Swipeable} from 'react-native-gesture-handler' not working in android (expo Cli). I've tried everything, ejected expo cli, edited MainActivity.java file but nothing works. There are a couple of threads but none of them works. Please help as I'm stuck with this issue for a long time. Thanks
Here is my code.
import React from 'react';
import { View, Text, StyleSheet, Keyboard,SafeAreaView, TouchableOpacity, FlatList, KeyboardAvoidingView, TextInput, Animated } from 'react-native';
import { AntDesign, Ionicons } from "#expo/vector-icons";
import { SwipeListView } from 'react-native-swipe-list-view';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import { Colors } from 'react-native/Libraries/NewAppScreen';
export default class TodoModal extends React.Component {
state = {
newTodo: ""
};
toggleTodoCompleted = index => {
let list = this.props.list;
list.todos[index].completed = !list.todos[index].completed;
this.props.updateList(list);
};
addTodo = () => {
let list = this.props.list;
list.todos.push({ title: this.state.newTodo, completed: false });
this.props.updateList(list);
this.setState({ newTodo: ""});
Keyboard.dismiss();
};
renderTodo = (todo, index) => {
return (
<Swipeable renderRightActions={(_, dragX) => this.rightActions(dragX, index)}>
<View style={styles.todoContainer}>
<TouchableOpacity onPress={() => this.toggleTodoCompleted(index)}>
<Ionicons
name={todo.completed ? "ios-square" : "ios-square-outline"}
size={24}
color={"#A4A4A4"}
style={{ width: 32 }}
/>
</TouchableOpacity>
<Text
style={[
styles.todo,
{
textDecorationLine: todo.completed ? "line-through" : "none",
color: todo.completed ? "#A4A4A4" : "#2D3436"
}
]}
>
{todo.title}
</Text>
</View>
</Swipeable>
);
};
rightActions = (dragX, index) => {
return (
<TouchableOpacity>
<Animated.View style={styles.deleteButton}>
<Animated.Text>Delete</Animated.Text>
</Animated.View>
</TouchableOpacity>
);
};
render() {
const list = this.props.list;
const taskCount = list.todos.length;
const completedCount = list.todos.filter(todo => todo.completed).length;
return (
<KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : null}>
<SafeAreaView style={styles.container}>
<TouchableOpacity
style={{ position: "absolute", top: 64, right: 32, zIndex: 10}}
onPress={this.props.closeModal}
>
<AntDesign name="close" size={24} color="#2D3436" />
</TouchableOpacity>
<View style={[styles.section, styles.header, { borderBottomColor: list.color }]}>
<View>
<Text style={styles.title}>{list.name}</Text>
<Text style={styles.taskCount}>
{completedCount} of {taskCount} tasks
</Text>
</View>
</View>
<View style={[styles.section, { flex: 2 }]}>
<FlatList
data={list.todos}
renderItem={({ item, index }) => this.renderTodo(item, index)}
keyExtractor={(_, index) => index.toString()}
contentContainerStyle={{ paddingHorizontal: 32, paddingVertical: 64 }}
showsVerticalScrollIndicator={false}
/>
</View>
<View style={[styles.section, styles.footer]} >
<TextInput
style={[styles.input, {borderColor: list.color}]}
onChangeText={text => this.setState({ newTodo: text })}
value={this.state.newTodo}
/>
<TouchableOpacity style={[styles.addTodo, {backgroundColor: list.color}]} onPress={() => this.addTodo()}>
<AntDesign name="plus" size={16} color="#FFFFFF" />
</TouchableOpacity>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
section: {
flex: 1,
alignSelf: "stretch"
},
header: {
justifyContent: 'flex-end',
marginLeft: 64,
borderBottomWidth: 3
},
title: {
fontSize: 30,
fontWeight: "800",
color: "#2D3436"
},
taskCount: {
marginTop: 4,
marginBottom: 16,
color: "#A4A4A4",
fontWeight: "600"
},
footer: {
paddingHorizontal: 32,
flexDirection: "row",
alignItems: "center"
},
input: {
flex: 1,
height: 48,
borderWidth: StyleSheet.hairlineWidth,
borderRadius: 6,
marginRight: 8,
paddingHorizontal: 8
},
addTodo: {
borderRadius: 4,
padding: 16,
alignItems: "center",
justifyContent: "center"
},
todoContainer: {
paddingVertical: 16,
flexDirection: "row",
alignItems: "center"
},
todo: {
color: "#2D3436",
fontWeight: "700",
fontSize: 16
},
deleteButton: {
flex: 1,
backgroundColor: Colors.red,
justifyContent: "center",
alignItems: "center",
width: 80
}
});

You have to wrap the swipeable in a gestureHandlerRootView
import { GestureHandlerRootView, Swipeable } from "react-native-gesture-handler";
<GestureHandlerRootView>
<Swipeable renderRightActions={(_, dragX) => this.rightActions(dragX, index)}>
<View style={styles.todoContainer}>
<TouchableOpacity onPress={() => this.toggleTodoCompleted(index)}>
<Ionicons
name={todo.completed ? "ios-square" : "ios-square-outline"}
size={24}
color={"#A4A4A4"}
style={{ width: 32 }}
/>
</TouchableOpacity>
<Text
style={[
styles.todo,
{
textDecorationLine: todo.completed ? "line-through" : "none",
color: todo.completed ? "#A4A4A4" : "#2D3436"
}
]}
>
{todo.title}
</Text>
</View>
</Swipeable>
</Swipeable>

React Native Vertical Delivery Progress Bar

How can I put a Vertical progress bar on React Native
I need to make a delivery bar progress
**Example: driver is at point A and needs to go to point B ...*

This is a bit tricky but do able. You will have to have a vertical line and place the items horizontally in a row format.
Lets say you have a data structure like this.You can update the current location using the flag and set the labels.
const data = [
{ title: 'Stop 1', letter: 'A', isCurrent: false },
{ title: 'Stop 2', letter: 'B', isCurrent: false },
{ title: 'Stop 3', letter: 'C', isCurrent: false },
{ title: 'Stop 4', letter: 'D', isCurrent: true },
{ title: 'Stop 5', letter: 'E', isCurrent: false },
];
This will be your component which handle the map
const MapProgress = (props) => {
if (!props.data || props.data.lenght === 0) return null;
const firstItem = props.data.shift();
return (
<View style={{ flex: 1 }}>
<View style={styles.verticalLine}></View>
<View style={styles.verticalWrap}>
<View style={styles.itemWrap}>
<View style={styles.firstPoint}></View>
<View style={{ marginLeft: 5, flex: 1 }}>
<Text>{firstItem.title}</Text>
</View>
</View>
{props.data.map((item) => (
<View style={styles.itemWrap}>
<View style={styles.pointWrap}>
<Text
style={[
styles.markerText,
item.isCurrent ? styles.currentMarker : null,
]}>
{item.letter}
</Text>
</View>
<View style={{ marginLeft: 5, flex: 1 }}>
<Text style={item.isCurrent ? styles.currentMarker : null}>
{item.title}
</Text>
</View>
</View>
))}
</View>
</View>
);
};
These will have to be styled to place the views properly
const styles = StyleSheet.create({
verticalLine: {
backgroundColor: 'black',
width: 2,
height: '95%',
position: 'absolute',
marginLeft: 35,
marginTop: 20,
},
verticalWrap: {
justifyContent: 'space-between',
height: '100%',
},
itemWrap: {
width: 200,
height: 40,
borderWidth: 1,
marginLeft: 20,
justifyContent: 'center',
flexDirection: 'row',
alignItems: 'center',
},
pointWrap: {
backgroundColor: 'black',
height: 20,
width: 20,
marginLeft: 5,
alignItems: 'center',
},
firstPoint: {
backgroundColor: 'black',
borderRadius: 20,
height: 10,
width: 10,
marginLeft: 10,
},
markerText: { color: 'white' },
currentMarker: { color: 'green' },
});
You can use the component like this
<MapProgress data={data} />
You can tryout the snack below
https://snack.expo.io/#guruparan/mapprogress

You better try this lib: https://github.com/oblador/react-native-progress#progressbar
Or you can create a your custom progressbar, it pretty simple in React Native. You could try
<View style={{height: 50, width: '100%', flexDirection: 'row'}}>
<View style={{height: '100%', flex: this.state.currentProgress, backgroundColor: "blue"}}/>
<View style={{height: '100%', flex: 100 - this.state.currentProgress, backgroundColor: "grey"}}/>
</View>
I think that it.

For vertical progress bar. You cane use
react-native-progress npm and simply rotate the bar using style transform property.
import React from 'react';
import * as Progress from 'react-native-progress';
return <Progress progress={progress} style={{ transform: [{ rotate: '-90deg' }] }} />;
Please refer original answer:
https://github.com/oblador/react-native-progress/issues/61#issuecomment-322694271

How do fix the white keyboard space that shows whenever I use KeyboardAwareView or react-native-keyboard-aware-scroll-view in my Expo react-native?

I am using Expo - react-native in creating an app, but using KeyboardAvoidingView and other Keyboard Packages (react-native-keyboard-aware-scroll-view) show white spaces at the bottom of the screen. How do I fix this?
(https://i.stack.imgur.com/1c0M6.jpg) have tried KeyboardAvoidingView and react-native-keyboard-aware-scroll-view but the problem still persist
import React, {Component} from 'react';
import {StyleSheet,
ScrollView,
Text,ActivityIndicator,
TouchableOpacity,
TextInput,
View,
StatusBar,
ImageBackground,
KeyboardAvoidingView} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-
navigation';
import { KeyboardAwareView } from 'react-native-keyboard-aware-
view';
import { AsyncStorage } from 'react-native';
export default class LoginForm extends Component {
render() {
return (
<KeyboardAwareView contentContainerStyle={{flex: 1}} animated={true}>
<View style={styles.container}>
<ScrollView style={{flex: 1}}>
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<ImageBackground style={{width: "100%",height: "100%",resizeMode: "cover"}} source={require('./bg.jpg')}>
<View style={styles.title}>
<Text style={styles.big}>AgroSight</Text>
<Text style={styles.small}>An agro based app for farmers and persons</Text>
{
this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
}
</View>
<View style={styles.formContainer}>
<ScrollView style={{flex:1}}>
<TextInput
style={styles.input}
placeholder="Email Address"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing = {() => this.passwordInput.focus()}
placeholderTextColor="rgba(255,255,255,.7)"
name="email"
onChangeText={(TextInput) => this.setState({userEmail: TextInput})}
/>
<TextInput
style={styles.input}
placeholder="Password"
returnKeyType="go"
secureTextEntry
ref={(input) => this.passwordInput = input}
placeholderTextColor="rgba(255,255,255,.7)"
name="password"
onChangeText={(TextInput) => this.setState({password: TextInput})}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
<Text style={styles.buttonText}>LOG IN</Text>
</TouchableOpacity>
</ScrollView>
</View>
<View style={styles.bottomRow}>
<Text style={styles.signupText}> Don't have account ?
<Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
</Text>
</View>
</ImageBackground>
</ScrollView>
</View>
</KeyboardAwareView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
height: "30%"
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});

I checked and modify your code in react native ios. The following code might be helpful for you.
import React, {Component} from 'react';
import {StyleSheet,
ScrollView,
Dimensions,
Text,ActivityIndicator,
TouchableOpacity,
TextInput,
View,
StatusBar,
ImageBackground,
KeyboardAvoidingView} from 'react-native';
let {height, width} = Dimensions.get('window');
export default class LoginForm extends Component {
render() {
return (
<KeyboardAvoidingView behavior={"padding"} enabled style= .
{{flexGrow:1,height:'100%'}}>
<ScrollView bounces={false} >
<StatusBar
backgroundColor="transparent"
barStyle="default"
translucent={true}
/>
<ImageBackground style={{width: "100%",height: height}} source={require('./bg.jpg')}>
<View style={{flex:1}}>
<View style={styles.title}>
<Text style={styles.big}>AgroSight</Text>
<Text style={styles.small}>An agro based app for farmers and persons</Text>
{
this.state.ActivityLoader ? <ActivityIndicator color='#FFF' size='large' style={styles.Activity} />: null
}
</View>
<View style={{flex:2}}>
<TextInput
style={styles.input}
placeholder="Email Address"
returnKeyType="next"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing = {() => this.passwordInput.focus()}
placeholderTextColor="rgba(255,255,255,.7)"
name="email"
onChangeText={(TextInput) => this.setState({userEmail: TextInput})}
/>
<TextInput
style={styles.input}
placeholder="Password"
returnKeyType="go"
secureTextEntry
ref={(input) => this.passwordInput = input}
placeholderTextColor="rgba(255,255,255,.7)"
name="password"
onChangeText={(TextInput) => this.setState({password: TextInput})}
/>
<TouchableOpacity style={styles.buttonContainer} onPress={ this.LoginUser }>
<Text style={styles.buttonText}>LOG IN</Text>
</TouchableOpacity>
</View>
<View style={styles.bottomRow}>
<Text style={styles.signupText}> Don't have account ?
<Text style={styles.reg} onPress={() => this.props.navigation.navigate('RegisterScreen')}>REGISTER HERE</Text>
</Text>
</View>
</View>
</ImageBackground>
</ScrollView>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
title: {
marginTop: 20,
alignItems: "center",
justifyContent:"center",
// height:'30%'
flex:1
},
big: {
marginTop: 20,
fontSize: 50,
color: "white",
alignItems:"center",
fontWeight:"bold",
},
small: {
marginTop: 4,
fontSize: 20,
color:"#FFF",
fontWeight:"bold",
opacity: .8
},
bottomRow: {
padding: 20,
justifyContent: "center",
paddingVertical: 20
},
signupText: {
fontSize: 21,
color:"#FFF",
fontWeight: "700",
alignItems: "center"
},
reg: {
color: "#FED81E",
alignItems: "center"
},
formContainer:{
padding: 20,
flex:1
},
input: {
height: 50,
backgroundColor: "green",
color: "#FFF",
paddingHorizontal: 10,
marginBottom: 10,
borderRadius: 7,
fontSize: 20,
paddingVertical: 10
},
buttonContainer: {
backgroundColor: "#FFF",
paddingVertical: 15,
borderRadius: 8
},
buttonText: {
textAlign: 'center',
color:"green",
fontWeight: '700',
fontSize: 27
},
Activity:{
position: 'absolute',
left: 0,
right: 0,
top: 150,
bottom: 0,
alignItems: 'center',
justifyContent: 'center',
zIndex: 999
},
});
If you run the above code in android then change behavior={"height"}

KeyBoardAvoidingView hides content

enter image description here
Current Behaviour
The KeyBoardAvoidingView hides the Login button.
Its the same on Android and on iPhone.
On an Android Tablet It hides the Login button but since the screen is large you can see the button halfway from the top.
Expected Behaviour
I want the Login button at the bottom to move into the app frame when user wants to input his login details.
App.js
import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity, AppRegistry} from 'react-native';
import { StackNavigator } from 'react-navigation'; // 1.0.0-beta.23
import Login from './screens/Login';
class App extends React.Component {
render() {
return (
<View
style={styles.container} >
<View style={styles.boxContainer}>
<View style = {[styles.boxContainer, styles.boxOne]}>
<Text style={styles.paragraph}>Tido</Text>
</View>
<View style={styles.boxContainerToggle}>
<TouchableOpacity style={[styles.boxContainer, styles.boxTwo]} onPress={() => this.props.navigation.navigate('Login')}>
<Text style={styles.paragraph}>Login</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.boxContainer, styles.boxThree]}>
<Text style={styles.paragraph}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
boxContainer: {
flex: 1, // 1:3
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
boxContainerToggle: {
flex: 1,
flexDirection: 'row'
},
boxOne: {
flex: 6, // 5:6
justifyContent: 'space-around',
alignItems: 'center',
},
boxTwo: {
flex: 1, // 1:6
backgroundColor: 'powderblue',
flexDirection: 'row',
width: '50%',
height: '100%'
},
boxThree: {
flex: 1, // 1:6
flexDirection: 'row',
backgroundColor: 'skyblue',
width: '50%',
height: '100%'
},
paragraph: {
margin: 24,
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});
const appScreens = StackNavigator({
Index: { screen: App },
Login: { screen: Login }
})
AppRegistry.registerComponent('tido', () => appScreens);
export default appScreens;
Login.js
import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView} from 'react-native';
export default class Login extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.boxContainer}>
<View style = {[styles.boxContainer, styles.boxOne]}>
<TextInput
style={styles.inputBox}
placeholder="username,email or phone"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent">
</TextInput>
<TextInput
style={styles.inputBox}
secureTextEntry={true}
placeholder="password"
placeholderTextColor="#00000030"
underlineColorAndroid="transparent">
</TextInput>
</View>
<View style={styles.boxContainerToggle}>
<TouchableOpacity
style={[styles.boxContainer, styles.boxTwo]}>
<Text style={styles.paragraph}>Login</Text>
</TouchableOpacity>
</View>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
boxContainer: {
flex: 1, // 1:3
justifyContent: 'center',
},
boxContainerToggle: {
flex: 1,
flexDirection: 'row',
},
boxOne: {
flex: 5, // 5:6
backgroundColor: 'white',
padding: 20
},
boxTwo: {
flex: 1, // 1:6
backgroundColor: '#252525',
flexDirection: 'row',
width: '100%',
height: '100%',
alignItems: 'center'
},
inputBox: {
height: 40,
backgroundColor: '#B6B6B630',
marginBottom: 10,
paddingHorizontal: 10,
},
paragraph: {
fontSize: 27,
fontWeight: 'bold',
textAlign: 'center',
color: '#FFFFFF',
},
});

The problem is that KeyboardAvoidingView cannot correctly apply padding if it's children doesn't have plain size set. In this particular case you need to figure out the screen dimenson and apply screen height (minus navigation bar height) to your root View style:
import { Dimensions } from 'react-native';
const { screenHeight: height } = Dimensions.get('window');
const styles = StyleSheet.create({
...
containerContent: {
height: screenHeight - navBarHeight,
justifyContent: 'center',
}
...
},
And apply it in your render method:
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<View style={styles.containerContent}>
...
</View>
</KeyboardAvoidingView>
);
}

I am still seeing that on keyboard open the toolbar is being pushed up out of visible area. This is the code :
<KeyboardAvoidingView style={styles.containerContent}>
<View style={styles.containerContent}>
<GiftedChat
messages={}
onSend={this.onSend}
renderAvatar={null}
user={{
_id: 1,
}}
imageStyle={{}}
/>
</View>
</KeyboardAvoidingView>
const styles = StyleSheet.create({
containerContent: {
height: Dimensions.get('window').height - kHeaderHeight,
justifyContent: 'center',
flex: 1,
},
});

React Native Navigation error. ' Main' should declare a screen

I am currently working with React Native and the new React Navigation. but there is an error: Currently having an error in one screen.
Navigation is as follows
MainScreen->Login takes to Splash Screen
Splash -> click on a button takes to Home Screen
HomeScreen->Logout Should take to Main Screen
MainScreen to Home is working fine But Home Screen to Main is not working.
Below is the error coming
' Main' should declare a screen
//Code for the Main screen
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Image,
Alert
} from 'react-native';
import Splash from './Splash';
import Signin from './signin';
import Forget from './forget';
import { StackNavigator } from 'react-navigation';
class Main extends Component {
constructor(props) {
super(props)
this.state = {
txt_input_email: '',
txt_input_password: '',
};
}
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
//==========================function to validate user information=========================================//
mvalidate(){
const { navigate } = this.props.navigation;
if (this.state.txt_input_email==""){
Alert.alert("Please enter email");
return;
}
if(this.state.txt_input_password==""){
Alert.alert("Please enter Password");
return;
}
if(!this.validateEmail(this.state.txt_input_email ||
!this.vlidatePassword(this.state.txt_input_password))){
Alert.alert("Email/Password is invalid/Wrong");
}else{
if(this.state.txt_input_email=="abc#gmail.com" && this.state.txt_input_password=="abc123"){
navigate('SplashPage')
}else{
Alert.alert('Wrong username/password');
}
}
}
validateEmail(email) {
if(/^(([^<>()\[\]\\.,;:\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 true;
}else{
return false;
}
}
vlidatePassword(password){
if(/^[a-zA-Z0-9]{4,100}$/){
return true;
}else{
false;
}
}
//=========================================================================================================//
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require('../images/logo.jpg')} style={styles.image}></Image>
<Text style={styles.text}> Sign In</Text>
<View style={styles.set}>
<View style={styles.imageset}>
<Image source={require('../images/facebook-logo.png')} style={styles.facebook}></Image>
<Image source={require('../images/google-plus.png')} style={styles.google}></Image>
</View>
<View style={[styles.inputWrap, styles.set]}>
<TextInput
placeholder="Email/Employee Id"
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({txt_input_email: value.trim()})}
/>
</View>
<View style={styles.inputWrap}>
<TextInput
placeholder="Password"
secureTextEntry
style={styles.input}
underlineColorAndroid="transparent"
onChangeText={value => this.setState({txt_input_password: value.trim()})}
/>
</View>
<View style={styles.imageset}>
<TouchableOpacity activeOpacity={.5} onPress={() => navigate('ForgetPage')}>
<View>
<Text style={styles.forget}>Forget Password ?</Text>
</View>
</TouchableOpacity>
<TouchableOpacity activeOpacity={.5} onPress={()=>this.mvalidate()} >
<View style={styles.button}>
<Text style={styles.buttonText}> SIGN IN</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.imageset}>
<Text style={styles.user}>New User ? </Text>
<TouchableOpacity activeOpacity={.5} onPress={() => navigate('SigninPage')} >
<View>
<Text style={styles.signup}>Sign Up</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
inputWrap: {
flexDirection: "row",
marginVertical: 10,
height: 40,
width: 300,
marginHorizontal: 20,
backgroundColor: "#FF0000"
},
text: {
color: "#FFF",
fontSize: 25
},
input: {
flex: 1,
paddingHorizontal: 15,
backgroundColor: '#fff'
},
button: {
backgroundColor: "#FF8C00",
paddingVertical: 15,
marginVertical: 15,
marginLeft: 45,
width: 100,
height: 35,
alignItems: "center",
justifyContent: "center"
},
buttonText: {
color: '#FFF',
fontSize: 15
},
forget: {
color: "#11D923",
backgroundColor: "transparent",
fontSize: 18,
marginHorizontal: 15,
marginTop: 20,
},
signup: {
color: "#11D923",
backgroundColor: "transparent",
fontSize: 18,
marginLeft: 25,
marginTop: 15
},
image: {
width: 250,
height: 110
},
set: {
marginTop: 20
},
imageset: {
flexDirection: "row"
},
facebook: {
marginLeft: 85,
width: 65,
height: 65
},
google: {
marginLeft: 20,
width: 65,
height: 65
},
user: {
fontSize: 18,
color: "#FFF",
marginLeft: 25,
marginTop: 17
}
});
const FirstProject = StackNavigator({
MainPage: { screen: Main },
SplashPage: { screen: Splash },
SigninPage: { screen: Signin },
ForgetPage: { screen: Forget },
});
export default FirstProject;
//Code or the Splash Screen
import React, { Component } from 'react';
import { AppRegistry, View, Text, Image, StyleSheet, TouchableHighlight } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './Home';
class Splash extends Component {
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.contain}>
<Image source={require('../images/splash.jpg')} style={{
height: 435, width: 300,
marginHorizontal: 30, marginTop: 52
}}>
<TouchableHighlight onPress={() => navigate('HomePage')} >
<Image source={require('../images/cancel.png')} style={styles.container}>
</Image></TouchableHighlight>
<Image source={require('../images/facebook-logo.png')} style={styles.facebook}></Image>
</Image>
<View style={styles.dir}>
<TouchableHighlight >
<Image source={require('../images/heart.png')} style={styles.welcome}></Image>
</TouchableHighlight>
<Image source={require('../images/whatsapp.png')} style={styles.whatsap}></Image>
<Image source={require('../images/sharing-big-symbol.png')} style={styles.instructions}></Image>
</View>
<Image source={require('../images/google-plus.png')} style={styles.google}></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 30,
marginHorizontal: 270
},
contain: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000000'
},
welcome: {
height: 35,
width: 35,
marginHorizontal: 40,
marginVertical: 5
},
instructions: {
height: 45,
width: 45,
marginHorizontal: 14,
marginVertical: 5
},
whatsap: {
height: 35,
width: 35,
marginLeft: 135,
marginVertical: 9
},
facebook: {
height: 35,
width: 35,
marginLeft: 247,
marginVertical: 368
},
google: {
height: 35,
width: 35,
marginLeft: 235
},
dir: {
flexDirection: 'row'
}
});
const SplashPage = StackNavigator({
SplashPage: { screen: Splash },
HomePage: { screen: Home}
});
export default SplashPage;
// Code for the Home Page
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View, Image,
TouchableHighlight,
DrawerLayoutAndroid,
TouchableOpacity
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Main from './Main';
import About from './meditationpages/about';
class Home extends Component {
openDrawer() {
this.refs['DRAWER'].openDrawer()
}
//=======navigation optionpane========//
static navigationOptions = {
title: 'Welcome',
header: null
};
//====================================//
render() {
navigationView = (
<View style={{ flex: 1, backgroundColor: '#B0E0E6', }}>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Home</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Meditation</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Art & Wellness</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>One - on - One counselling</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Health Moments</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Blogs</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Live Sessions</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Forums</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Masters</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Global Events & Retreats</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Interview/Audio/Video</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>Online Learning</Text>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>e-store</Text>
</View>
);
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<DrawerLayoutAndroid
drawerWidth={250}
ref={'DRAWER'}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.welcome}>
<TouchableHighlight onPress={() => this.openDrawer()}>
<Image source={require('../images/menu.png')} style={styles.imagess}></Image>
</TouchableHighlight>
<Image source={require('../images/home.png')} style={[styles.imagess, styles.menu_diff]}></Image>
<TouchableHighlight onPress={() => navigate('AboutPage')} >
<Image source={require('../images/meditation.png')} style={[styles.imagess, styles.icon_diff]}></Image></TouchableHighlight>
<Image source={require('../images/art.png')} style={[styles.imagess, styles.icon_diff]}></Image>
</View>
<TouchableHighlight onPress={() => navigate('MainPage')} style={styles.set}>
<View style={styles.button}>
<Text style={styles.buttonText} > Logout</Text>
</View>
</TouchableHighlight>
</DrawerLayoutAndroid>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#4682B4',
},
welcome: {
flexDirection: 'row',
marginTop: 10,
backgroundColor: '#4682B4'
},
imagess: {
marginLeft: 10,
height: 35,
width: 35
},
menu_diff: {
marginLeft: 177
},
icon_diff: {
marginLeft: 15
},
buttonText: {
color: '#FFF',
fontSize: 20
},
button: {
backgroundColor: "#FF8C00",
paddingVertical: 15,
marginVertical: 15,
marginHorizontal: 120,
width: 100,
height: 40,
alignItems: "center",
justifyContent: "center"
},
set: {
marginTop: 250,
justifyContent: 'center',
alignItems: 'center',
},
});
const HomePages = StackNavigator({
HomePage: { screen: Home },
AboutPage: { screen: About },
MainPage:{ screen: Main},
});
export default HomePages

I have solved this issue. I commented one line
const HomePages = StackNavigator({
HomePage: { screen: Home },
AboutPage: { screen: About },
// MainPage:{ screen: Main}, //Commenting this line solved the issue
});
Maybe main page reference was already created that's why it was creating the problem.