Safe Area top invading

[uthacod]

Good afternoon everyone. My code is hacked at the top as shown in the figure. I am using SafeAreaView can anyone tell me what is wrong.

import React from 'react';
import { KeyboardAvoidingView,StyleSheet, TextInput, Text, SafeAreaView } from 'react-native';


export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
          <Text style={{fontSize:30}}>
              Top
          </Text>
          <Text style={{fontSize:40}}>
              Quit
          </Text>
            <TextInput style={styles.boxText}/>
        </KeyboardAvoidingView>
        </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container : { flex: 1, 
      alignItems: 'center', 
      backgroundColor: 'blue' ,
      justifyContent:'space-between',
      width: '100%'
      },

  boxText : {
              width: '80%',
              fontSize: 20,
              borderColor: 'blue',
              borderWidth: 0.5,
              padding: 10,
              marginBottom: 10,
            }

});;