From a5a3a145dd0a7f6d134cb9dc9f7f9b21c6161cdc Mon Sep 17 00:00:00 2001
From: Andi Firwansyah <macbook@Andi-Firwansyah-2.local>
Date: Sun, 4 Dec 2022 15:53:50 +0700
Subject: [PATCH] [FIX] Keyboard Avoiding View

---
 src/scenes/Login/index.js                     | 131 +++++++++---------
 src/scenes/Login/styles.js                    |   6 +-
 .../Products/ProductList/AddProduct/index.js  | 104 ++++++++------
 .../BusinessSummary/index.js                  |   2 +-
 4 files changed, 131 insertions(+), 112 deletions(-)

diff --git a/src/scenes/Login/index.js b/src/scenes/Login/index.js
index 1a84463..9be02f1 100644
--- a/src/scenes/Login/index.js
+++ b/src/scenes/Login/index.js
@@ -6,6 +6,8 @@ import {
   TextInput,
   ActivityIndicator,
   Image,
+  KeyboardAvoidingView,
+  Platform,
 } from 'react-native';
 import {
   Container,
@@ -57,71 +59,76 @@ const Login = ({route, navigation}) => {
             style={styles.translateButtonImage}
           />
         </TouchableOpacity>
-        <View style={styles.boardingSection}>
-          <Image
-            source={require('assets/images/chef-pana.png')}
-            style={styles.boardingImage}
-          />
-          <View style={styles.boardingContentSection}>
-            <Text style={styles.boardingTitle}>{t('welcome_text')}</Text>
-            <Text style={styles.boardingSubTitle}>
-              Through a wide range of caterers & brand partners, personalized
-              services
-            </Text>
-          </View>
-        </View>
-        <View style={styles.wrapper}>
-          <View style={styles.formSection}>
-            <Text style={styles.formLabel}>
-              {t('phone_input')} <Text style={{color: Colors.PRIMARY}}>*</Text>
-            </Text>
-            <View style={styles.postSection}>
-              <View style={styles.numberIdSection}>
-                <Text style={styles.numberIdText}>🇮🇩 +62</Text>
-              </View>
-              <View style={styles.inputSection}>
-                <TextInput
-                  style={styles.input}
-                  value={phone}
-                  onChangeText={val => setPhone(val)}
-                  placeholder="Nomor HP"
-                  keyboardType="number-pad"
-                  autoFocus={true}
-                />
-                <TouchableOpacity onPress={() => setPhone('')}>
-                  <Icon
-                    name="closecircle"
-                    type="AntDesign"
-                    style={styles.cleanInputIcon}
-                  />
-                </TouchableOpacity>
-              </View>
-            </View>
-            {error?.phone?.message && (
-              <Text style={styles.error}>{error.phone.message}</Text>
-            )}
-            <TouchableOpacity style={styles.phoneIssueButton}>
-              <Text style={styles.phoneIssueButtonTitle}>
-                {t('phone_issue')}
+        <KeyboardAvoidingView
+          style={{flex: 1}}
+          behavior={Platform.OS === 'ios' ? 'height' : undefined}>
+          <View style={styles.boardingSection}>
+            <Image
+              source={require('assets/images/chef-pana.png')}
+              style={styles.boardingImage}
+            />
+            <View style={styles.boardingContentSection}>
+              <Text style={styles.boardingTitle}>{t('welcome_text')}</Text>
+              <Text style={styles.boardingSubTitle}>
+                Through a wide range of caterers & brand partners, personalized
+                services
               </Text>
-            </TouchableOpacity>
+            </View>
           </View>
-          <View style={styles.buttonSignInSection(keyboardHeight)}>
-            <Button
-              title={t('login')}
-              onPress={() => alert('login')}
-              disabled={loading ? true : phone === '' ? true : false}
-              loading={loading}
-            />
-            <Text style={styles.textOr}>{t('or_text')}</Text>
-            <Button
-              title={t('register')}
-              onPress={() => navigation.navigate('Register')}
-              loading={loading}
-              outline
-            />
+          <View style={styles.wrapper}>
+            <View style={styles.formSection}>
+              <Text style={styles.formLabel}>
+                {t('phone_input')}{' '}
+                <Text style={{color: Colors.PRIMARY}}>*</Text>
+              </Text>
+              <View style={styles.postSection}>
+                <View style={styles.numberIdSection}>
+                  <Text style={styles.numberIdText}>🇮🇩 +62</Text>
+                </View>
+                <View style={styles.inputSection}>
+                  <TextInput
+                    style={styles.input}
+                    value={phone}
+                    onChangeText={val => setPhone(val)}
+                    placeholder="Nomor HP"
+                    keyboardType="number-pad"
+                    autoFocus={true}
+                  />
+                  <TouchableOpacity onPress={() => setPhone('')}>
+                    <Icon
+                      name="closecircle"
+                      type="AntDesign"
+                      style={styles.cleanInputIcon}
+                    />
+                  </TouchableOpacity>
+                </View>
+              </View>
+              {error?.phone?.message && (
+                <Text style={styles.error}>{error.phone.message}</Text>
+              )}
+              <TouchableOpacity style={styles.phoneIssueButton}>
+                <Text style={styles.phoneIssueButtonTitle}>
+                  {t('phone_issue')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.buttonSignInSection}>
+              <Button
+                title={t('login')}
+                onPress={() => alert('login')}
+                disabled={loading ? true : phone === '' ? true : false}
+                loading={loading}
+              />
+              <Text style={styles.textOr}>{t('or_text')}</Text>
+              <Button
+                title={t('register')}
+                onPress={() => navigation.navigate('Register')}
+                loading={loading}
+                outline
+              />
+            </View>
           </View>
-        </View>
+        </KeyboardAvoidingView>
       </View>
       <ModalOTP
         isVisible={modalOTP.visible}
diff --git a/src/scenes/Login/styles.js b/src/scenes/Login/styles.js
index 106646d..cbeeaa9 100644
--- a/src/scenes/Login/styles.js
+++ b/src/scenes/Login/styles.js
@@ -112,9 +112,9 @@ export default StyleSheet.create({
   },
 
   // button section
-  buttonSignInSection: keyboardHeight => ({
-    marginBottom: Platform.OS === 'ios' ? keyboardHeight : width * 0.05,
-  }),
+  buttonSignInSection: {
+    // marginBottom: Platform.OS === 'ios' ? keyboardHeight : width * 0.05,
+  },
   textOr: {
     fontFamily: FONTS.poppins[500],
     fontSize: RFValue(12),
diff --git a/src/scenes/Products/ProductList/AddProduct/index.js b/src/scenes/Products/ProductList/AddProduct/index.js
index cd67ab1..edd620f 100644
--- a/src/scenes/Products/ProductList/AddProduct/index.js
+++ b/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,52 +26,57 @@ const AddProduct = ({route, navigation}) => {
       />
       <View style={styles.container}>
         <ScrollView>
-          <View style={styles.spacing} />
-          <View style={styles.imageUploadSection}>
-            <Text style={styles.imageUploadLabel}>
-              {t('menu_photo_text')}
-              <Text style={{color: Colors.RED}}>*</Text>
-            </Text>
-            <Text style={styles.imageUploadNote}>{t('menu_photo_note')}</Text>
-            <TouchableOpacity activeOpacity={0.5} style={styles.imageUpload}>
-              <View style={styles.imageUploadIconWrap}>
-                <Icon
-                  name="camera"
-                  type="Feather"
-                  style={styles.imageUploadIcon}
-                />
-              </View>
-              <Text style={styles.imgaeUploadText}>
-                {t('upload_image_text')}
+          <KeyboardAvoidingView
+            style={{flex: 1}}
+            keyboardVerticalOffset={100}
+            behavior={Platform.OS === 'ios' ? 'position' : null}>
+            <View style={styles.spacing} />
+            <View style={styles.imageUploadSection}>
+              <Text style={styles.imageUploadLabel}>
+                {t('menu_photo_text')}
+                <Text style={{color: Colors.RED}}>*</Text>
               </Text>
-            </TouchableOpacity>
-          </View>
-          <View style={styles.spacing} />
-          <View style={styles.spacing} />
-          <Input
-            type="text"
-            required
-            label={t('name_text')}
-            counter={30}
-            placeholder={t('name_food_placeholder')}
-          />
-          <View style={styles.spacing} />
-          <Input
-            type="text"
-            required
-            label={t('description_text')}
-            counter={50}
-            placeholder={t('description_food_placeholder')}
-          />
-          <View style={styles.spacing} />
-          <Input
-            type="currency"
-            required
-            value={price}
-            onChangeValue={val => setPrice(val)}
-            label={t('price_text')}
-            placeholder="0"
-          />
+              <Text style={styles.imageUploadNote}>{t('menu_photo_note')}</Text>
+              <TouchableOpacity activeOpacity={0.5} style={styles.imageUpload}>
+                <View style={styles.imageUploadIconWrap}>
+                  <Icon
+                    name="camera"
+                    type="Feather"
+                    style={styles.imageUploadIcon}
+                  />
+                </View>
+                <Text style={styles.imgaeUploadText}>
+                  {t('upload_image_text')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+            <View style={styles.spacing} />
+            <View style={styles.spacing} />
+            <Input
+              type="text"
+              required
+              label={t('name_text')}
+              counter={30}
+              placeholder={t('name_food_placeholder')}
+            />
+            <View style={styles.spacing} />
+            <Input
+              type="text"
+              required
+              label={t('description_text')}
+              counter={50}
+              placeholder={t('description_food_placeholder')}
+            />
+            <View style={styles.spacing} />
+            <Input
+              type="currency"
+              required
+              value={price}
+              onChangeValue={val => setPrice(val)}
+              label={t('price_text')}
+              placeholder="0"
+            />
+          </KeyboardAvoidingView>
         </ScrollView>
         <Button title="Simpan" onPress={() => navigation.goBack()} />
       </View>
diff --git a/src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js b/src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js
index 182b589..afb18e2 100644
--- a/src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js
+++ b/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';