HomeScreen.js

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;