Инвариантное нарушение: недопустимый тип элемента

Я пытаюсь очистить свои стили с помощью таблицы стилей, но не могу заставить ее работать. Я считаю, что ошибка (см. Ниже) возникает, когда я пытаюсь создать таблицу стилей (const styles = EStyleSheet.create.
Обратите внимание, я использую реагировать родной расширенной таблицы стилей Однако проблема не в этом. Это также происходит с таблицей стилей react-native. Это изображение ошибки:

Это мой код:

import React, { Component } from "react";

import {
  View,
  Text,
  Button,
  Image,
  StyleSheet,
  TextInput,
  KeyboardAvoidingView,
  TouchableOpacity
} from "react-native";

export default class Login extends Component {
  render() {
    return (
      <View style = {styles.wrapper}>
        <Text>Login screen </Text>

        <KeyboardAvoidingView behavior = "padding" style = {styles.loginContainer}>

          <TextInput
          placeholder = "username or email"
          placeholderTextColor='whitesmoke'
          style = {styles.input}
          />

          <TextInput
          placeholder = "password"
          secureTextEntry
          placeholderTextColor='whitesmoke'
          style = {styles.input}
          />

          <TouchableOpacity style = {styles.loginbutton} onPress = {() => this.props.navigation.navigate("Grades")}>
            <Text style = {{
              textAlign: 'center',
              color: "whitesmoke",
              fontWeight: '700',
            }}>
            Login
            </Text>
          </TouchableOpacity>

        </KeyboardAvoidingView>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  loginContainer: {
    paddingHorizontal: 9,
    backgroundColor: "red"
  },

  input: {
      paddingHorizontal: 10,
      marginBottom: 10,
      color: '#f1c40f', //sunflower color
      backgroundColor: '#3498db',
    },

 logo: {
    width: 231,
    height: 231
  },

  wrapper: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center" 
  }

});

Вот мой app.js.

import React from "react";
import { Font } from "expo";

import { Root } from "./app/router";
import { FontError } from "./app/components/fontError";

export default class App extends React.Component {
  state = {
    fontLoaded: false
  };
  async componentDidMount() {
    await Font.loadAsync({
      Arial: require("./app/resources/Arial.ttf")
    });
    this.setState({ fontLoaded: true });
  }
  render() {
    if (!this.state.fontLoaded) return <FontError/>;
    return <Root />;
  }
  // ...
}

Мой корневой компонент - router.js, я использую реагирующую навигацию.

import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";

import {
  Login,
  Grades,
} from "./screens";

export const Root = createStackNavigator({
  Login: {screen: Login},
  Grades: {screen: Grades},

});

Не стесняйтесь попросить меня добавить любую дополнительную информацию. Заранее благодарны за Вашу помощь.