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, TextInput,
ActivityIndicator, ActivityIndicator,
Image, Image,
KeyboardAvoidingView,
Platform,
} from 'react-native'; } from 'react-native';
import { import {
Container, Container,
@ -57,71 +59,76 @@ const Login = ({route, navigation}) => {
style={styles.translateButtonImage} style={styles.translateButtonImage}
/> />
</TouchableOpacity> </TouchableOpacity>
<View style={styles.boardingSection}> <KeyboardAvoidingView
<Image style={{flex: 1}}
source={require('assets/images/chef-pana.png')} behavior={Platform.OS === 'ios' ? 'height' : undefined}>
style={styles.boardingImage} <View style={styles.boardingSection}>
/> <Image
<View style={styles.boardingContentSection}> source={require('assets/images/chef-pana.png')}
<Text style={styles.boardingTitle}>{t('welcome_text')}</Text> style={styles.boardingImage}
<Text style={styles.boardingSubTitle}> />
Through a wide range of caterers & brand partners, personalized <View style={styles.boardingContentSection}>
services <Text style={styles.boardingTitle}>{t('welcome_text')}</Text>
</Text> <Text style={styles.boardingSubTitle}>
</View> Through a wide range of caterers & brand partners, personalized
</View> services
<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> </Text>
</TouchableOpacity> </View>
</View> </View>
<View style={styles.buttonSignInSection(keyboardHeight)}> <View style={styles.wrapper}>
<Button <View style={styles.formSection}>
title={t('login')} <Text style={styles.formLabel}>
onPress={() => alert('login')} {t('phone_input')}{' '}
disabled={loading ? true : phone === '' ? true : false} <Text style={{color: Colors.PRIMARY}}>*</Text>
loading={loading} </Text>
/> <View style={styles.postSection}>
<Text style={styles.textOr}>{t('or_text')}</Text> <View style={styles.numberIdSection}>
<Button <Text style={styles.numberIdText}>🇮🇩 +62</Text>
title={t('register')} </View>
onPress={() => navigation.navigate('Register')} <View style={styles.inputSection}>
loading={loading} <TextInput
outline 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>
</View> </KeyboardAvoidingView>
</View> </View>
<ModalOTP <ModalOTP
isVisible={modalOTP.visible} isVisible={modalOTP.visible}

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

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

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

@ -1,5 +1,12 @@
import React, {useState} from 'react'; 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 {Container, Header, Button, Icon, Input} from 'components';
import {Colors} from 'global-styles'; import {Colors} from 'global-styles';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';
@ -19,52 +26,57 @@ const AddProduct = ({route, navigation}) => {
/> />
<View style={styles.container}> <View style={styles.container}>
<ScrollView> <ScrollView>
<View style={styles.spacing} /> <KeyboardAvoidingView
<View style={styles.imageUploadSection}> style={{flex: 1}}
<Text style={styles.imageUploadLabel}> keyboardVerticalOffset={100}
{t('menu_photo_text')} behavior={Platform.OS === 'ios' ? 'position' : null}>
<Text style={{color: Colors.RED}}>*</Text> <View style={styles.spacing} />
</Text> <View style={styles.imageUploadSection}>
<Text style={styles.imageUploadNote}>{t('menu_photo_note')}</Text> <Text style={styles.imageUploadLabel}>
<TouchableOpacity activeOpacity={0.5} style={styles.imageUpload}> {t('menu_photo_text')}
<View style={styles.imageUploadIconWrap}> <Text style={{color: Colors.RED}}>*</Text>
<Icon
name="camera"
type="Feather"
style={styles.imageUploadIcon}
/>
</View>
<Text style={styles.imgaeUploadText}>
{t('upload_image_text')}
</Text> </Text>
</TouchableOpacity> <Text style={styles.imageUploadNote}>{t('menu_photo_note')}</Text>
</View> <TouchableOpacity activeOpacity={0.5} style={styles.imageUpload}>
<View style={styles.spacing} /> <View style={styles.imageUploadIconWrap}>
<View style={styles.spacing} /> <Icon
<Input name="camera"
type="text" type="Feather"
required style={styles.imageUploadIcon}
label={t('name_text')} />
counter={30} </View>
placeholder={t('name_food_placeholder')} <Text style={styles.imgaeUploadText}>
/> {t('upload_image_text')}
<View style={styles.spacing} /> </Text>
<Input </TouchableOpacity>
type="text" </View>
required <View style={styles.spacing} />
label={t('description_text')} <View style={styles.spacing} />
counter={50} <Input
placeholder={t('description_food_placeholder')} type="text"
/> required
<View style={styles.spacing} /> label={t('name_text')}
<Input counter={30}
type="currency" placeholder={t('name_food_placeholder')}
required />
value={price} <View style={styles.spacing} />
onChangeValue={val => setPrice(val)} <Input
label={t('price_text')} type="text"
placeholder="0" 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> </ScrollView>
<Button title="Simpan" onPress={() => navigation.goBack()} /> <Button title="Simpan" onPress={() => navigation.goBack()} />
</View> </View>

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

@ -1,5 +1,5 @@
import React, {useState} from 'react'; 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 {Container, Header, Note, Button, Input} from 'components';
import {Colors} from 'global-styles'; import {Colors} from 'global-styles';
import {useTranslation} from 'react-i18next'; import {useTranslation} from 'react-i18next';