I am designing a simple login page that takes username and password credentials, and I need this data to make a authentication check and if it passes, go to the second view. My problem is I haven't been able to successfully pass the username and password values as props to the child component i.e., the SecureView js
This is the code I've written already. Have searched everywhere but have failed to locate a beginner friendly solution to my problem. Please help.
My TextInput code:
<TextInput
style={styles.input_username}
placeholder=" Username"
placeholderTextColor="#000000"
onChange={(event) => this.setState({username: event.nativeEvent.text})}
value={this.state.username}
/>
My getInitialState() method:
var login1 = React.createClass({
getInitialState() {
return {
username: '',
password: '',
}
},
My onSubmitPressed() function:
onSubmitPressed() {
this.props.navigator.push({
id: 'SecureView',
passProps: {
username: this.props.username
}
});
},
My index.android file:
'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
} from 'react-native';
var Login1 = require('./app/screens/login1');
var SecureView = require('./app/screens/SecureView');
var loginsimple = React.createClass({
render: function() {
return (
//<loginsimple />
<Navigator
style={styles.navigatorContainer}
initialRoute={{id: 'Login1'}}
renderScene={this.navigatorRenderScene}
username={this.props.username}/>
);
},
navigatorRenderScene(route, navigator) {
// _navigator = navigator;
switch (route.id) {
case 'Login1':
return (<Login1 navigator={navigator}
{...route.passProps}
title="Login1"/>);
case 'SecureView':
return (<SecureView navigator={navigator}
{...route.passProps}
title="SecureView"/>);
}
},
});
var styles = StyleSheet.create({
navigatorContainer: {
flex: 1,
}
});
AppRegistry.registerComponent('loginsimple', () => loginsimple);
In my SecureView js file, I have written a simple text element as such:
<Text> Welcome {this.props.username}!</Text>
My output is always as such
Welcome !
What is the correct way to pass props from my first file to my SecureView file?
