nochill/naise-pos-android-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FIX] Keyboard Avoiding View

Browse Source
This commit is contained in:
Andi Firwansyah 2022-12-04 15:53:50 +07:00
parent 6777de5dd0
commit a5a3a145dd
4 changed files with 131 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/scenes/Login/index.js
View File

@ -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}

6
src/scenes/Login/styles.js
View File

@ -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),

104
src/scenes/Products/ProductList/AddProduct/index.js
View File

@ -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>

2
src/scenes/Register/BusinessProfileRegistration/BusinessSummary/index.js
View File

@ -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';