Create a gist now

Instantly share code, notes, and snippets.

anonymous /HomeScreen.js
Created Feb 28, 2017

Embed
import React from 'react';
import {
Text,
View,
Button,
TextInput,
Image,
ActivityIndicator,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false
};
}
_handlePress(event) {
this.loginFromApiAsync()
}
loginFromApiAsync() {
var username = 'studentios@italki.com';
var password = 'iosisawesome';
// var username = this.state.username;
// var password = this.state.password;
const { navigate } = this.props.navigation;
this.setState({ isLoading: true });
fetch('https://www.italki.com/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'LOGIN_PA_USERNAME='+username+'&LOGIN_PA_PASSWORD='+password
})
.then((response) => {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.headers.get('x-token'));
var token = response.headers.get('x-token');
this.setState({ isLoading: false });
navigate('Dashboard', { token: token })
})
}
static navigationOptions = {
title: 'Welcome',
};
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
var spinner = this.state.isLoading ?
( <ActivityIndicator
size='large'/> ) :
( <View/>);
return (
<View style={{flex: 1, backgroundColor: 'steelblue', flexDirection: 'column', justifyContent: 'center'}}>
<View style={{backgroundColor: 'steelblue', flex: 1, flexDirection: 'column'}}>
<View style={{flex: 3, backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center'}}>
<Image source={pic} style={{width: 183, height: 100}}/>
</View>
<Text style={{flex: 2, backgroundColor: 'steelblue', fontSize: 24, textAlign: 'center', color: '#F0F8FF', top: 8}}>
Login Page
</Text>
</View>
<View style={{backgroundColor: 'steelblue', flex: 2, flexDirection: 'column'}}>
<View style={{flex: 2, backgroundColor: 'steelblue', flexDirection: 'row'}}>
<Text style={{flex: 1, backgroundColor: 'steelblue', fontSize: 18, textAlign: 'left', color: '#F0F8FF', padding: 8}}>
User Name:
</Text>
<TextInput ref="usr" style={{flex: 2, height: 40, color: '#F0F8FF'}} placeholder="name" placeholderTextColor='#F0F8FF'
onChangeText={(text) => {
this.setState({username:text});
}}
onSubmitEditing={(event) => {
this.refs.psw.focus();
}}
/>
</View>
<View style={{flex: 2, backgroundColor: 'steelblue', flexDirection: 'row'}}>
<Text style={{flex: 1, backgroundColor: 'steelblue', fontSize: 18, textAlign: 'left', color: '#F0F8FF', padding: 8}}>
Password:
</Text>
<TextInput ref="psw" secureTextEntry={true} style={{flex: 2, height: 40, color: '#F0F8FF'}} placeholder="password" placeholderTextColor='#F0F8FF'
onChangeText={(text) => {
this.setState({password:text});
}}
/>
</View>
<View style={{flex: 12, backgroundColor: 'steelblue'}}>
<View style={{flex: 1, flexDirection: 'row', backgroundColor: 'steelblue'}}>
<View style={{flex: 1}}>{spinner}</View>
<View>
<Button onPress={this._handlePress.bind(this)} title="Login" color="#841584" accessibilityLabel="Tap on Me"/>
</View>
<View style={{flex: 1}}></View>
</View>
<View style={{flex: 8, backgroundColor: 'steelblue'}}></View>
</View>
</View>
</View>
);
}
}
module.exports=HomeScreen;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment