I'm building an Android app with React Native.
How can you force a TextInput to "unFocus", meaning the cursor is blinking inside the text field. There are functions for isFocused() and onFocus(), but how do I actually get the text field to give up focus. You would think it does so automatically once I hit enter, but that's not the case.
import React, {Component} from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity}
from 'react-native';
var SHA256 = require("crypto-js/sha256");
export default class LoginForm extends Component{
constructor(props){
super(props);
this.state = {
email: '',
password:''
};
}
tryLogin = () => {
if(this.state.email=="email123" && this.state.password == "password"){
console.log("password verified");
this.props.navigator.replace({
title: 'Dashboard'
});
}
console.log(this.state.email);
console.log(this.state.password);
console.log("Hash" + SHA256(this.state.password));
}
render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}>
</TextInput>
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry
onChangeText={(password) => this.setState({password})}>
</TextInput>
<TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}>
<Text style={styles.loginButtonText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
}
AppRegistry.registerComponent('LoginForm', () => LoginForm);
const styles = StyleSheet.create({
container: {
padding: 20
},
input:{
height: 40,
backgroundColor: '#e74c3c',
marginBottom: 20,
color: 'white',
paddingHorizontal: 15,
opacity: .9
},
loginButtonContainer:{
justifyContent: 'center',
backgroundColor: '#bc4c3c',
paddingVertical:15
},
loginButtonText:{
textAlign:'center',
color:'white',
fontWeight: '700',
fontSize: 24
}
})
This probably won't matter as much for real users but I'm just emulating and its pesky if I want to reload.
A better way is to use ScrollView and Keyboard.dismiss. By using ScrollView when the user taps outside of textInput, keyboard dismissed. It's done because ScrollView default property for keyboardShouldPersistTaps is never. It's the behavior the user expects. For dismiss the keyboard, or it's equivalent blur the textInput, when the user tap on the login button add Keyboard.dismissed() to the tryLogin function.
import React, {Component} from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity, ScrollView, Keyboard}
from 'react-native';
var SHA256 = require("crypto-js/sha256");
export default class LoginForm extends Component{
constructor(props){
super(props);
this.state = {
email: '',
password:''
};
}
tryLogin = () => {
Keyboard.dismiss();
if(this.state.email=="email123" && this.state.password == "password"){
console.log("password verified");
this.props.navigator.replace({
title: 'Dashboard'
});
}
console.log(this.state.email);
console.log(this.state.password);
console.log("Hash" + SHA256(this.state.password));
}
render(){
return(
<ScrollView style={styles.container}>
<TextInput
style={styles.input}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}>
</TextInput>
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry
onChangeText={(password) => this.setState({password})}>
</TextInput>
<TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}>
<Text style={styles.loginButtonText}>LOGIN</Text>
</TouchableOpacity>
</ScrollView>
);
}
}
AppRegistry.registerComponent('LoginForm', () => LoginForm);
const styles = StyleSheet.create({
container: {
padding: 20
},
input:{
height: 40,
backgroundColor: '#e74c3c',
marginBottom: 20,
color: 'white',
paddingHorizontal: 15,
opacity: .9
},
loginButtonContainer:{
justifyContent: 'center',
backgroundColor: '#bc4c3c',
paddingVertical:15
},
loginButtonText:{
textAlign:'center',
color:'white',
fontWeight: '700',
fontSize: 24
}
})
You can use Keyboard API.
import { Keyboard, TextInput } from 'react-native';
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
Please see the full example in react native offical document.
I managed to solve this with this.ref reference.
First, you assign to the TextInput a ref, like this:
<input ref="myInput" />
Then, you call the blur() method to this.refs.myInput from a function
blurTextInput(){
this.refs.myInput.blur()
}
My use case was a little different. The user wouldn't enter a value directly in the input field. The field was mainly used to capture the user's attempt at entering a value and open a modal instead. I wanted to blur the field after the modal closed to reduce the extra tap the user would have to do later.
If using Hooks, you can do something as simple as
const inputRef = useRef(null);
<Input
ref={inputRef}
{...props}
/>
Then just call this anywhere you need it.
inputRef.current.blur();
Found it actually.It doesn't look as pretty and my intuition says this isn't a very "react" solution but if you want it here it is.
<TextInput
style={styles.input}
ref="email_input"
onSubmitEditing={() => this.refs['email_input'].blur()}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}/>
Noah's answer above works well, but using string refs is now discouraged in React, and is likely going to be deprecated soon. Instead, you should use a callback function that gets called when the component you want to reference renders.
<TextInput
ref={(c: any) => {
this.textInputRef = c;
}}
onSubmitEditing={() => this.textInputRef.blur()}
/>
If you're using Flow, you can then specify the type of your ref by placing something like this outside of your render function:
textInputRef: ?TextInput;
If you want to lose focus after submiting, use blurOnSubmit property.
<TextInput
blurOnSubmit={true}
//other props
/>
It does what it needs
function TextInputCustom({ placeholder, style }) {
React.useEffect(() => {
const keyboardHide = Keyboard.addListener('keyboardDidHide', () => {
Keyboard.dismiss();
});
return () => {
keyboardHide.remove()
}
}, []);
return (
<TextInput
style={style}
placeholder={placeholder}
/>
)
}
export default TextInputCustom;
I used the below code and it worked perfect for me:
i wrap all the view inside TouchableWithoutFeedback and
onPress={() => {Keyboard.dismiss();}}
import {View,TouchableWithoutFeedback,Keyboard,} from 'react-native';
......
<SafeAreaView>
<ScrollView nestedScrollEnabled={true}>
<TouchableWithoutFeedback
onPress={() => {Keyboard.dismiss();}}>
<View style={styles.container}>
{/* ..... */}
</View>
</TouchableWithoutFeedback>
</ScrollView>
</SafeAreaView>
Related
I have implemented the functionality of firebase OTP, for authentication of the user to my App.
When I created the build, The OTP functionality is working fine with IOS but not with android, in android the OTP expires soon.
Here is the case:
Case 1
Android Device A
App installed in device A, and register with the mobile number of Device A (the same device),
I got the OTP but when I entered it shows me an invalid OTP due to the OTP had been expired already
Case 2
Android Device A, and Android Device B
App installed in device A, and registered with the mobile number of Device B,
I got the OTP on Device B and I entered it in device A where the app is installed, It was working fine.
Here is my code and configuration
import React, { Fragment, Component } from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
TextInput,
Button,
Animated,
} from 'react-native';
import auth from '#react-native-firebase/auth';
import { COLORS } from './App/Auth/Colors';
import { STRINGS } from './App/Resource/Strings';
import { Animation_Open, Animation_Close } from './App/Auth/Functions';
export default class Demo extends Component {
constructor(props) {
super(props);
this.animatedValue = new Animated.Value(-500);
this.state = {
phone: '+91',
code: '',
confirm: null,
};
}
componentDidMount() {
console.log('componentDidMount Demo');
}
OnPressContinue = async () => {
auth()
.signInWithPhoneNumber(this.state.phone)
.then(confirmResult => {
console.log('confirmResult', confirmResult);
this.setState({ confirm: confirmResult });
})
.catch(error => {
console.log('My Error', error);
});
}
OnPressCodeSent = async () => {
try {
var a = await this.state.confirm.confirm(this.state.code);
console.log('a', a);
} catch (error) {
console.log('Invalid code.', error);
}
}
render() {
return (
<SafeAreaView style={styles.container}>
<StatusBar />
<View>
<View>
<TextInput
placeholder="Enter A Number"
value={this.state.phone}
onChangeText={(text) => this.setState({ phone: text })}
keyboardType="numeric"
style={{ padding: 10, borderBottomWidth: 1, width: '100%', color: 'black' }}
/>
<View style={{ marginTop: 20 }}>
<Button
title="Continue"
onPress={() => this.OnPressContinue()} />
</View>
</View>
<View style={{ marginTop: 20 }}>
<TextInput
placeholder="Enter Code"
value={this.state.code}
onChangeText={(text) => this.setState({ code: text })}
style={{ padding: 10, borderBottomWidth: 1, width: '100%', color: 'black' }}
/>
<View style={{ marginTop: 20 }}>
<Button
title="Send"
onPress={() => this.OnPressCodeSent()} />
</View>
</View>
</View>
{/* //! Toster */}
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
The issue has been resolved:
If the OTP will receive in the same device we will auto add, and compare.
Below is the code for my component. Problem is that I cannot add any space in between the buttons, only on Android emulator as you can see in the image. Right now you see marginBottom but if I replace it with padding, it still does not work.
Appreciate if anyone has an idea why is this happening.
import React from 'react';
import { StyleSheet, View} from 'react-native';
import { Button } from 'react-native-elements';
const HomeScreen = ({navigation}) => {
return(
<View style={styles.container}>
<View>
<Button title="Sign In" onPress={() => navigation.navigate('SignIn')} style={{ marginBottom: 20}}/>
<Button title="Sign Up" onPress={() => navigation.navigate('SignUp')} />
</View>
</View>
)
}
HomeScreen.navigationOptions = () => {
return {
header: () => false
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 40,
backgroundColor: 'white'
}
});
export default HomeScreen;
As I can understand you are using react-native-elements, and style prop is not vailable on that component, I can see on the documentation try using this prop "buttonStyle" to style the button and if not possible wrap the button around a view,
Thanks
I am very new to react native and this is my 1st application my org has given me to do a PoC for the same.
My requirement is i have to develop an app with
Login screen -----> Navigation Drawer(1) screen Name-- workProcessor and 2) Operation Analytics)
I am able to achieve screen at 2 different level's
i.e i am able to design Login screen and i am able to design workprocessor and operation analytics screen and switch between them
I am not able to Integrate my login screen and on click of login i should navigate to Navigation-drawer screen
My files are :
Login.js
import React from 'react';
import {
ScrollView,
Text,
TextInput,
View,
Button,
StyleSheet
} from 'react-native';
import Logo from './Logo';
import Form from './Form';
export default class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<Logo></Logo>
<Form type = "Login"></Form>
<View style ={styles.workSpaceText}>
<Text style = {styles.workSpaceText}> Change WorkSpace ?</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#455a64',
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
workSpaceText: {
flexGrow:1,
justifyContent:'center',
alignItems:'center',
},
workSpaceText: {
fontSize: 15,
marginVertical:15,
color: 'rgba(255,255,255,0.7)'
}
});
Form.js
import React from 'react';
import { StyleSheet, TextInput, View, Image, TouchableOpacity, Text } from "react-native";
import { useNavigation } from '#react-navigation/native';
// import { Actions } from 'react-native-router-flux';
const Form = () => {
const navigation = useNavigation();
loginMove= ()=>{
navigation.navigate('Landing');
}
return (
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Username"
placeholderTextColor='#ffffff'
/>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Password"
placeholderTextColor='#ffffff'
/>
<TouchableOpacity style={styles.button} onPress={loginMove}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
</View>
);
}
export default Form;
const styles = StyleSheet.create({
container: {
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center'
},
inputBox: {
width: 300,
backgroundColor: 'rgba(255,255,255,0.5)',
borderRadius: 25,
paddingHorizontal: 16,
fontSize: 16,
color: '#ffffff',
marginVertical: 10
},
button: {
width: 300,
backgroundColor: '#1c313a',
borderRadius: 25,
marginVertical: 20,
paddingVertical: 12
},
buttonText: {
fontSize: 16,
fontWeight: '500',
color: '#ffffff',
textAlign: 'center'
}
});
And my Drawer File
i.e LandingScreen.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React from 'react';
// import { Router, Stack, Scene } from 'react-native-router-flux';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import { createDrawerNavigator } from '#react-navigation/drawer';
import WorkProcessor from './workprocessor';
import OperationAnalytics from './OperationAnalytics';
import { Button, View, Text, TouchableOpacity, Image } from 'react-native';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const NavigationDrawerStructure = (props) => {
//Structure for the navigatin Drawer
const toggleDrawer = () => {
//Props to open/close the drawer
props.navigationProps.toggleDrawer();
};
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={() => toggleDrawer()}>
{/*Donute Button Image */}
<Image
source={{ uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png' }}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
function firstScreenStack({ navigation }) {
return (
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen
name="FirstPage"
component={WorkProcessor}
options={{
title: 'Work-Processor', //Set Header Title
headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
</Stack.Navigator>
);
}
function secondScreenStack({ navigation }) {
return (
<Stack.Navigator
initialRouteName="SecondPage"
screenOptions={{
headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
}
}}>
<Stack.Screen
name="SecondPage"
component={OperationAnalytics}
options={{
title: 'Operational Analytics', //Set Header Title
}} />
</Stack.Navigator>
);
}
const LandingScreen = () => (
<NavigationContainer>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#e91e63',
itemStyle: { marginVertical: 5 },
}}>
<Drawer.Screen
name="FirstPage"
options={{ drawerLabel: 'Work-Processor' }}
component={firstScreenStack} />
<Drawer.Screen
name="SecondPage"
options={{ drawerLabel: 'Operation-Analytics' }}
component={secondScreenStack} />
</Drawer.Navigator>
</NavigationContainer>
);
export default LandingScreen;
When i am clicking on login button i.e loginMove .. it is not moving to navigation drawer screen and giving error: -
Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitely. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
Please can some one help me completing this flow. I am ready for doing any code changes it's my PoC
You cannot embedd NavigationContainer, only stacks, drawers, tabs, etc
I suggest you to make two Navigations, one for login, one logged. This prevent to back to login screen when already logged in.
Example
// App.js
return(
<NavigationContainer>
{isLogged ? <LoggedNav /> : <LoginNav />}
</NavigationContainer>
)
With your Drawer in LoggedNav and Stacks in LoginNav
OR
In a first stack, you have a screen with your drawer stack and one with your landing page stack. You can embedd stacks as much as you want but not NavigationContainer. A screen can be a stack without problems.
function Login({ navigation }) {
return (
<Stack.Navigator initialRouteName="FirstPage">
<Stack.Screen
name="FirstPage"
component={WorkProcessor}
options={{
title: 'Work-Processor', //Set Header Title
headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#f4511e', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
</Stack.Navigator>
);
}
const LandingScreen = () => (
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#e91e63',
itemStyle: { marginVertical: 5 },
}}>
<Drawer.Screen
name="FirstPage"
options={{ drawerLabel: 'Work-Processor' }}
component={firstScreenStack} />
<Drawer.Screen
name="SecondPage"
options={{ drawerLabel: 'Operation-Analytics' }}
component={secondScreenStack} />
</Drawer.Navigator>
);
return(
<NavigationContainer>
<Stack.Navigator initialRouteName="login">
<Stack.Screen name="login" component={Login} ... />
<Stack.Screen name="landing" component={LandingScreen} ... />
</Stack.Navigator>
</NavigationContainer>
)
I am learning react-native programming for android application. I am trying to start second screen on pressing on TouchableOpacity. I am using navigator for same.
I am getting this error undefined is not an object( evaluating this.props.navigator.push')
I have checked a lot of threads React Native, NavigatorIOS, undefined is not an object (evaluating 'this.props.navigator.push') undefined is not an object(evaluating this.props.navigator.push) but did not work for me. I am not sure what I am doing wrong here, can anyone help me . Thanks in advance.
index.android.js
/**
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import { AppRegistry, Text, View, TextInput, TouchableOpacity, ToolbarAndroid, StyleSheet,Container,ScrollView, Navigator } from 'react-native';
class App extends Component {
renderScene (route, navigator) {
return <route.component navigator={navigator} />
}
render() {
return (
<Navigator
style={styles.container}
renderScene={this.renderScene.bind(this)}
initialRoute={{component: LoginComponent}}
/>
);
}
}
class LoginComponent extends Component {
_navigate () {
this.props.navigator.push({
component: DashboardComponent
})
}
render() {
return (
<View style={{flex: 1, flexDirection: 'column'}}>
<ToolbarAndroid title='LOGIN' titleColor='white'
onIconClicked={() => this.props.navigator.pop()}
style={styles.toolbar}/>
<View style={{padding:10}}>
<TextInput style={{height: 40, borderColor:'gray', borderWidth: .5}}
placeholder="Email address" underlineColorAndroid='transparent'/>
<TextInput style={{height: 40, borderColor:'gray', borderWidth: .5}}
placeholder="Password" secureTextEntry={true} underlineColorAndroid='transparent'/>
<TouchableOpacity style={{ height: 40, marginTop: 10 , backgroundColor: '#2E8B57'}} onPress={this._navigate.bind(this)}>
<Text style={{color: 'white', textAlign: 'center', marginTop: 10, fontWeight: 'bold'}}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
toolbar: {
backgroundColor: '#2E8B57',
height: 40,
fontFamily: 'noto_serif_regular',
},
});
AppRegistry.registerComponent('ExampleOne', () => LoginComponent);
second.android.js
import React, { Component } from 'react';
class DashboardComponent extends Component {
render() {
return (
<Text>Hello!</Text>
);
}
}
You register wrong component in AppRegistry.registerComponent, it should be App instead of LoginComponent
Navigator component need to be render first, then it will render and pass navigator prop down to it scenes.
I have this screen in react native
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.move()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
move() {
//what i can do here to go to Socrce screen ???
}
}
Something like login screen, now when I click into TouchableHighlight
I need to open this screen
'use strict';
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class HygexListView extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
module.exports = HygexListView;
I tried to implement move method but I failed! Any idea why?
Does react-native have a method to change the screen when click into TouchableHighlight?
As others pointed out, you have to use an instance of Navigator to transition between screens. Maybe you can have a look at the example apps in the React Native repo. I also find this router package quite easy to set up, and it also includes an example app that you can use as a starting point.
Edit
As a simple example using react-native-router-flux, you can edit the Example.js file in the Example directory to look like this:
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import LoginView from './LoginView';
import HygexListView from './HygexListView';
import {
Scene,
Router,
Actions,
} from 'react-native-router-flux';
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
alignItems: 'center',
},
tabBarStyle: {
backgroundColor: '#eee',
},
tabBarSelectedItemStyle: {
backgroundColor: '#ddd',
},
});
// define this based on the styles/dimensions you use
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
const style = {
flex: 1,
backgroundColor: '#fff',
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null,
};
if (computedProps.isActive) {
style.marginTop = computedProps.hideNavBar ? 0 : 64;
style.marginBottom = computedProps.hideTabBar ? 0 : 50;
}
return style;
};
class Example extends Component {
render() {
return (
<Router getSceneStyle={getSceneStyle}>
<Scene key="login" component={LoginView} initial={true}/>
<Scene key="hygex" component={HygexListView } />
</Router>
);
}
}
export default Example;
Then, in your component's move function, you have to do the following:
move(){
Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that.
I have not tested the code, so there might be some typos/missing imports/code, but it should give you an idea of what you have to do.
}
You have to implement a Navigator, which is roughly a component that manages all stuff related to screens, and header bar with back button and etc.
As you are a beginner, I suggest you to look at the docs on this link:
https://facebook.github.io/react-native/docs/navigator.html
Sorry for the short answer, I'm on my phone.
Good luck!
"use strict";
var React = require("react-native");
var {
Component,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
View,
} = React;
var SecureView = require("./SecureView");
class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Sign In
</Text>
<View>
<TextInput
placeholder="Username"
onChange={(event) => this.setState({username: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.username} />
<TextInput
placeholder="Password"
secureTextEntry={true}
onChange={(event) => this.setState({password: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.password} />
<TouchableHighlight onPress={(this.onSubmitPressed.bind(this))} style={styles.button}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>
</View>
</View>
);
}
onSubmitPressed() {
this.props.navigator.push({
title: "Secure Page",
component: SecureView,
passProps: {username: this.state.username, password: this.state.password},
});
}
};
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;
You have to use navigator. please read the documentation as mentioned below. and if you will need then i will share you my code.
Here is an example: NavigatorExample