Tamanho da tela é menor do que o posto no código

[gregory]

estou a seguir o seguinte tutorial: https://www.youtube.com/watch?v=pdFqfOTmd60

na tela do vídeo ele tem tudo alinhado e usando o flex:1

se eu uso flex 1 tudo que esta na tela, fica fora das bordas

segue logo abaixo o meu código:

import React, { useState, useEffect } from 'react';
import { View, Text, Image, TextInput, TouchableOpacity, StyleSheet, KeyboardAvoidingView, Animated } from 'react-native';
import { StatusBar } from 'react-native';
export default function App() {

  const [offset] = useState(new Animated.ValueXY({ x: 0, y: 80 }))
  useEffect(() => {
    Animated.spring(offset.y, {
      toValue: 0,
      speed: 4,
      bounciness: 30,
      useNativeDriver: true,
    }).start();

  }, []);


  return (
    <KeyboardAvoidingView style={styles.background}>
      <StatusBar
        hidden={true}
        translucent={false}
        networkActivityIndicatorVisible={true}
      />
      <View style={styles.containerLogo}>
        <Image
          source={require('./images/logo1.png')}

        />
      </View>
      <Animated.View style={[styles.container, { transform: [{ translateY: offset.y }] }]}>
        <TextInput
          style={styles.imput}
          placeholder="Email"
          autoCorrect={false}
          onChangeText={() => { }}

        />

        <TextInput
          style={styles.imput}
          placeholder="Senha"
          autoCorrect={false}
          onChangeText={() => { }}

        />
        <TouchableOpacity style={styles.btnSubmit}>
          <Text style={styles.submitText} >Entrar</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.btnRegister}>
          <Text style={styles.RegisterText} >Criar Conta</Text>
        </TouchableOpacity>
      </Animated.View>

    </KeyboardAvoidingView>
  );
}


const styles = StyleSheet.create({

  background: {
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#191919'
  },

  containerLogo: {

    justifyContent: 'center',

    alignItems: 'center',

  },
  container: {

    paddingBottom: 50,
    alignItems: 'center',
    justifyContent: 'center',
    width: '90%',
  },
  imput: {
    backgroundColor: '#FFF',
    width: '90%',
    marginBottom: 15,
    color: '#222',
    fontSize: 17,
    borderRadius: 7,
    padding: 10

  },
  btnSubmit: {
    color: 'blue',
    width: '90%',
    height: 45,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 7,

  },
  submitText: {
    color: '#FFF',
    fontSize: 18

  },
  btnRegister: {
    marginTop: 10,
  },
  RegisterText: {
    color: 'white'
  }


});

 

esqueci de avisar que se eu tirar o flex 1,consigo ver somente metade da tela