RoutingError.js

import React from 'react';
import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  TextInput,
  KeyboardAvoidingView,
  Button,
  AsyncStorage,
} from 'react-native';
import { WebBrowser, Permissions, Notifications } from 'expo';

import { StackNavigator } from "react-navigation";

import { MonoText } from '../components/StyledText';

import { UserScreen } from '../screens/users/UserScreen';

export default class HomeScreen extends React.Component {

  constructor(props)
  {
    super(props);
    this.state = {username: "", password: "", reasons: []};
  }
  static navigationOptions = {
    header: null,
  };

  async login()
  {
    const { existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
    let finalStatus = existingStatus;
    if (existingStatus !== "granted")
    {
      const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
      finalStatus = status;
    }

    let pushToken = "";
    if (finalStatus !== "granted")
    {
      pushToken = "NOTHING";
    }
    else
    {
      pushToken = await Notifications.getExpoPushTokenAsync();
    }

    fetch("https://roasted-ravenclaw968.c9users.io/login", {
      method: "POST",
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        session: {
          username: this.state.username,
          password: this.state.password,
        },
        mobile: pushToken,
      }),
    }).then((response) => {
      json = JSON.parse(response._bodyInit);
      if (json.status === "Success")
      {
        AsyncStorage.setItem("token", json.authorization);
        navigate("User", {id: json.id})
      }
      else
      {
        reasonList = []
        for (let i = 0; i < json.reason.length; i ++)
        {
          reasonList.push(
            <View>
              <Text style = {{color: "white", fontSize: 25}}>{ json.reason[i] }</Text>
            </View>
          )
        }
        this.setState({username: this.state.username, password: this.state.password, reasons: reasonList})
      }
    });
  }

  render() {
    return (
      <View style = {{flex: 1, backgroundColor: "#1a237e", alignItems: "center", flexDirection: "column", justifyContent: "flex-start"}}>
        <View style = {{height: 30}}>
        </View>
        { this.state.reasons }
        <View>
          <Image style = {{width: 220, height: 100}} source = {{uri: "https://s3-us-west-2.amazonaws.com/roasted-image-storage/RoastedU+4.png"}} />
        </View>
        <View style = {{height: 20}}>
        </View>
        <View>
          <TextInput style = {{width: 200, height: 40, color: "white", backgroundColor: "#141a5e", padding: 10, borderRadius: 10}} onChangeText = {(name) => this.setState({username: name, password: this.state.password})} placeholder = "Enter Username" placeholderTextColor = "white" blueOnSubmit = {true} />
        </View>
        <View style = {{height: 20}}>
        </View>
        <View>
          <TextInput style = {{width: 200, height: 40, color: "white", backgroundColor: "#141a5e", padding: 10, borderRadius: 10}} onChangeText = {(pass) => this.setState({username: this.state.username, password: pass})} placeholder = "Enter Password" secureTextEntry = {true} placeholderTextColor = "white" />
        </View>
        <View style = {{height: 30}}>
        </View>
        <View style = {{backgroundColor: "#141a5e", borderRadius: 10, paddingLeft: 10, paddingRight: 10}}>
          <Button style = {{color: "white", backgroundColor: "white"}} color = "white" onPress = {() => this.login()} title = "Login" />
        </View>
      </View>
    );
  }
}

const after = StackNavigator({
  Home: { screen: HomeScreen },
  User: { screen: UserScreen },
});