Add keyboard avoiding view react native

app.js

   import React, {Component} from 'react';

const App =()=>
<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}}>
        <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
          <KeyboardAvoidingView behavior='position' contentContainerStyle={{flex: 1}} style={styles.mainContainer}>
            <View style={styles.logoView}>
              <Image source={logo} />
              <Text style={{fontSize: deviceHeight/33, marginTop: deviceHeight/60}}>Welcome</Text>
              <Text style={{fontSize: 14, marginTop: deviceHeight/80}}>Please sign in to continue</Text>
            </View>
            <View style={styles.formView}>
              <TextInput ref={(c) => this._email = c} onSubmitEditing={() => this._password.focus()} value={email} onChangeText={(t) => this.setState({email: t})} style={styles.textInput} keyboardType='email-address' placeholder='Email' />
              <TextInput ref={(c) => this._password = c} onSubmitEditing={() => this._confirmPassword.focus()} value={password} onChangeText={(t) => this.setState({password: t})} style={styles.textInput} secureTextEntry placeholder='Password' />
              <Text style={{fontSize: 14, alignSelf: 'flex-end', marginTop: 15}}>Forgot Password?</Text>
              <View style={styles.buttonView}>
                <LoadingButton onPress={this.handleLogin} style={{width: '60%', alignSelf: 'flex-end', marginTop: deviceHeight/28}} title='Sign In' />
              </View>
              <View style={styles.biometricLoginView}>
                <Image source={faceId} style={styles.faceIdImg} />
                <Text style={{marginTop: 12, fontSize: 14}}>Sign in with Face ID</Text>
              </View>
            </View>
          </KeyboardAvoidingView>
        </SafeAreaView>
        <MessageAlert ref={(c) => this._dropdown = c} />
      </ScrollView>

export default App;