Add KeyboardAvoidingView for visible TextInput

components/common/app-modal.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   Dimensions,
+  KeyboardAvoidingView,
   Modal,
   StyleSheet,
   TouchableOpacity,
@@ -19,6 +20,7 @@ const AppModal = ({ children, onClose }) => (
     transparent={true}
     visible={true}
   >
+    <KeyboardAvoidingView behavior={'padding'} style={styles.safeAreaView}>
       <TouchableOpacity onPress={onClose} style={styles.blackBackground} />
       <View style={styles.modalWindow}>
         <View style={styles.headerContainer}>
@@ -26,6 +28,7 @@ const AppModal = ({ children, onClose }) => (
         </View>
         {children}
       </View>
+    </KeyboardAvoidingView>
   </Modal>
 )
 
@@ -62,6 +65,11 @@ const styles = StyleSheet.create({
     elevation: 2, // works on android
     minWidth: '80%',
   },
+  safeAreaView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 })
 
 export default AppModal