[FIX] Keyboard Avoiding View

src/scenes/Login/index.js

@@ -6,6 +6,8 @@ import {
   TextInput,
   ActivityIndicator,
   Image,
+  KeyboardAvoidingView,
+  Platform,
 } from 'react-native';
 import {
   Container,
@@ -57,6 +59,9 @@ const Login = ({route, navigation}) => {
             style={styles.translateButtonImage}
           />
         </TouchableOpacity>
+        <KeyboardAvoidingView
+          style={{flex: 1}}
+          behavior={Platform.OS === 'ios' ? 'height' : undefined}>
           <View style={styles.boardingSection}>
             <Image
               source={require('assets/images/chef-pana.png')}
@@ -73,7 +78,8 @@ const Login = ({route, navigation}) => {
           <View style={styles.wrapper}>
             <View style={styles.formSection}>
               <Text style={styles.formLabel}>
-              {t('phone_input')} <Text style={{color: Colors.PRIMARY}}>*</Text>
+                {t('phone_input')}{' '}
+                <Text style={{color: Colors.PRIMARY}}>*</Text>
               </Text>
               <View style={styles.postSection}>
                 <View style={styles.numberIdSection}>
@@ -106,7 +112,7 @@ const Login = ({route, navigation}) => {
                 </Text>
               </TouchableOpacity>
             </View>
-          <View style={styles.buttonSignInSection(keyboardHeight)}>
+            <View style={styles.buttonSignInSection}>
               <Button
                 title={t('login')}
                 onPress={() => alert('login')}
@@ -122,6 +128,7 @@ const Login = ({route, navigation}) => {
               />
             </View>
           </View>
+        </KeyboardAvoidingView>
       </View>
       <ModalOTP
         isVisible={modalOTP.visible}

src/scenes/Login/styles.js

@@ -112,9 +112,9 @@ export default StyleSheet.create({
   },
 
   // button section
-  buttonSignInSection: keyboardHeight => ({
+  buttonSignInSection: {
-    marginBottom: Platform.OS === 'ios' ? keyboardHeight : width * 0.05,
+    // marginBottom: Platform.OS === 'ios' ? keyboardHeight : width * 0.05,
-  }),
+  },
   textOr: {
     fontFamily: FONTS.poppins[500],
     fontSize: RFValue(12),

src/scenes/Products/ProductList/AddProduct/index.js

@@ -1,5 +1,12 @@
 import React, {useState} from 'react';
-import {View, ScrollView, Text, TouchableOpacity} from 'react-native';
+import {
+  View,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
 import {Container, Header, Button, Icon, Input} from 'components';
 import {Colors} from 'global-styles';
 import {useTranslation} from 'react-i18next';
@@ -19,6 +26,10 @@ const AddProduct = ({route, navigation}) => {
       />
       <View style={styles.container}>
         <ScrollView>
+          <KeyboardAvoidingView
+            style={{flex: 1}}
+            keyboardVerticalOffset={100}
+            behavior={Platform.OS === 'ios' ? 'position' : null}>
             <View style={styles.spacing} />
             <View style={styles.imageUploadSection}>
               <Text style={styles.imageUploadLabel}>
@@ -65,6 +76,7 @@ const AddProduct = ({route, navigation}) => {
               label={t('price_text')}
               placeholder="0"
             />
+          </KeyboardAvoidingView>
         </ScrollView>
         <Button title="Simpan" onPress={() => navigation.goBack()} />
       </View>

src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {View, ScrollView, TextInput} from 'react-native';
+import {View, ScrollView, KeyboardAvoidingView, Platform} from 'react-native';
 import {Container, Header, Note, Button, Input} from 'components';
 import {Colors} from 'global-styles';
 import {useTranslation} from 'react-i18next';