keyboard scroll
This commit is contained in:
Samandar Turgunboyev
@@ -25,15 +25,16 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Keyboard,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
TouchableWithoutFeedback,
|
||||
View
|
||||
} from 'react-native';
|
||||
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { auth_api } from '../login/lib/api';
|
||||
import PhonePrefix from '../login/ui/PhonePrefix';
|
||||
@@ -360,27 +361,27 @@ export default function RegisterFormScreen() {
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior="padding"
|
||||
style={{ flex: 1 }}
|
||||
<KeyboardAwareScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
enableOnAndroid
|
||||
extraScrollHeight={120}
|
||||
>
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={['#0f172a', '#1e293b', '#334155']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<View style={styles.decorCircle1} />
|
||||
<View style={styles.decorCircle2} />
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<View style={styles.container}>
|
||||
<LinearGradient
|
||||
colors={['#0f172a', '#1e293b', '#334155']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
<View style={styles.decorCircle1} />
|
||||
<View style={styles.decorCircle2} />
|
||||
|
||||
<AuthHeader />
|
||||
<AuthHeader />
|
||||
|
||||
<SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
|
||||
|
||||
<SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
|
||||
<KeyboardAvoidingView
|
||||
style={{ flex: 1 }}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
@@ -647,90 +648,90 @@ export default function RegisterFormScreen() {
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
</SafeAreaView>
|
||||
</SafeAreaView>
|
||||
|
||||
{/* ---- Country BottomSheet ---- */}
|
||||
<BottomSheet
|
||||
ref={countrySheetRef}
|
||||
index={-1}
|
||||
snapPoints={snapPoints}
|
||||
enablePanDownToClose={true}
|
||||
enableDynamicSizing={false}
|
||||
enableOverDrag={false}
|
||||
backdropComponent={renderBackdrop}
|
||||
backgroundStyle={styles.bottomSheetBg}
|
||||
handleIndicatorStyle={styles.handleIndicator}
|
||||
android_keyboardInputMode="adjustResize"
|
||||
keyboardBehavior="interactive"
|
||||
keyboardBlurBehavior="restore"
|
||||
>
|
||||
<View style={styles.sheetHeader}>
|
||||
<Text style={styles.sheetTitle}>{t('Davlat')}</Text>
|
||||
</View>
|
||||
{/* ---- Country BottomSheet ---- */}
|
||||
<BottomSheet
|
||||
ref={countrySheetRef}
|
||||
index={-1}
|
||||
snapPoints={snapPoints}
|
||||
enablePanDownToClose={true}
|
||||
enableDynamicSizing={false}
|
||||
enableOverDrag={false}
|
||||
backdropComponent={renderBackdrop}
|
||||
backgroundStyle={styles.bottomSheetBg}
|
||||
handleIndicatorStyle={styles.handleIndicator}
|
||||
android_keyboardInputMode="adjustResize"
|
||||
keyboardBehavior="interactive"
|
||||
keyboardBlurBehavior="restore"
|
||||
>
|
||||
<View style={styles.sheetHeader}>
|
||||
<Text style={styles.sheetTitle}>{t('Davlat')}</Text>
|
||||
</View>
|
||||
|
||||
{/* Search input */}
|
||||
<View style={styles.searchContainer}>
|
||||
<Search size={16} color="#94a3b8" />
|
||||
<BottomSheetTextInput
|
||||
value={countrySearch}
|
||||
onChangeText={setCountrySearch}
|
||||
placeholder={t('Qidirish...')}
|
||||
placeholderTextColor="#94a3b8"
|
||||
style={styles.searchInput}
|
||||
clearButtonMode="while-editing"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
</View>
|
||||
{/* Search input */}
|
||||
<View style={styles.searchContainer}>
|
||||
<Search size={16} color="#94a3b8" />
|
||||
<BottomSheetTextInput
|
||||
value={countrySearch}
|
||||
onChangeText={setCountrySearch}
|
||||
placeholder={t('Qidirish...')}
|
||||
placeholderTextColor="#94a3b8"
|
||||
style={styles.searchInput}
|
||||
clearButtonMode="while-editing"
|
||||
autoCorrect={false}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<BottomSheetFlatList
|
||||
data={filteredCountries}
|
||||
keyExtractor={(item: any) => item.id?.toString()}
|
||||
contentContainerStyle={styles.listContainer}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyList}>
|
||||
<Text style={styles.emptyListText}>{t('Natija topilmadi')}</Text>
|
||||
</View>
|
||||
}
|
||||
renderItem={({ item }: { item: any }) => {
|
||||
const isSelected = item.flag?.toUpperCase() === selectedCountry;
|
||||
const flagCode = item.flag ? item.flag.toLowerCase() : '';
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.listItem, isSelected && styles.selectedListItem]}
|
||||
onPress={() => {
|
||||
setSelectedCountry(item.flag?.toUpperCase());
|
||||
closeCountrySheet();
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, flex: 1 }}>
|
||||
{flagCode ? (
|
||||
<Image
|
||||
source={{ uri: `https://flagcdn.com/w320/${flagCode}.png` }}
|
||||
style={{ width: 34, height: 22, borderRadius: 2 }}
|
||||
/>
|
||||
) : (
|
||||
<Globe size={20} color={isSelected ? '#2563eb' : '#94a3b8'} />
|
||||
)}
|
||||
<Text style={[styles.listItemText, isSelected && styles.selectedListItemText]}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</View>
|
||||
{isSelected && (
|
||||
<View style={styles.checkmark}>
|
||||
<CheckIcon color="#3b82f6" strokeWidth={2.5} size={16} />
|
||||
<BottomSheetFlatList
|
||||
data={filteredCountries}
|
||||
keyExtractor={(item: any) => item.id?.toString()}
|
||||
contentContainerStyle={styles.listContainer}
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyList}>
|
||||
<Text style={styles.emptyListText}>{t('Natija topilmadi')}</Text>
|
||||
</View>
|
||||
}
|
||||
renderItem={({ item }: { item: any }) => {
|
||||
const isSelected = item.flag?.toUpperCase() === selectedCountry;
|
||||
const flagCode = item.flag ? item.flag.toLowerCase() : '';
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={[styles.listItem, isSelected && styles.selectedListItem]}
|
||||
onPress={() => {
|
||||
setSelectedCountry(item.flag?.toUpperCase());
|
||||
closeCountrySheet();
|
||||
}}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, flex: 1 }}>
|
||||
{flagCode ? (
|
||||
<Image
|
||||
source={{ uri: `https://flagcdn.com/w320/${flagCode}.png` }}
|
||||
style={{ width: 34, height: 22, borderRadius: 2 }}
|
||||
/>
|
||||
) : (
|
||||
<Globe size={20} color={isSelected ? '#2563eb' : '#94a3b8'} />
|
||||
)}
|
||||
<Text style={[styles.listItemText, isSelected && styles.selectedListItemText]}>
|
||||
{item.name}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</BottomSheet>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
{isSelected && (
|
||||
<View style={styles.checkmark}>
|
||||
<CheckIcon color="#3b82f6" strokeWidth={2.5} size={16} />
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</BottomSheet>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAwareScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
|
||||
import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView, TouchableWithoutFeedback } from '@gorhom/bottom-sheet';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { AxiosError } from 'axios';
|
||||
import { router, useFocusEffect } from 'expo-router';
|
||||
@@ -7,18 +7,19 @@ import React, { useCallback, useRef, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
KeyboardAvoidingView,
|
||||
Keyboard,
|
||||
Linking,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
View
|
||||
} from 'react-native';
|
||||
|
||||
import OneClick from '@/assets/images/one_click.png';
|
||||
import PAYME from '@/assets/images/Payme_NEW.png';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
|
||||
import { price_calculation } from '../lib/api';
|
||||
import { CreateAdsResponse } from '../lib/types';
|
||||
import StepFour from './StepFour';
|
||||
@@ -209,122 +210,127 @@ export default function CreateAdsScreens() {
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
behavior="padding"
|
||||
<KeyboardAwareScrollView
|
||||
showsVerticalScrollIndicator={false}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
enableOnAndroid
|
||||
extraScrollHeight={120}
|
||||
style={[styles.safeArea, isDark ? styles.darkBg : styles.lightBg]}
|
||||
>
|
||||
<ScrollView contentContainerStyle={[styles.container, { paddingBottom: 90 }]}>
|
||||
<Image
|
||||
source={OneClick}
|
||||
style={{ width: 180, height: 56, marginBottom: 10 }}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text style={[styles.title, isDark ? styles.darkText : styles.lightText]}>
|
||||
{t("Bir Zumda Jonatish")}
|
||||
</Text>
|
||||
|
||||
{currentStep === 1 && (
|
||||
<StepOne ref={stepOneRef} formData={formData} updateForm={updateForm} />
|
||||
)}
|
||||
{currentStep === 2 && (
|
||||
<StepTwo ref={stepTwoRef} formData={formData} updateForm={updateForm} />
|
||||
)}
|
||||
{currentStep === 3 && (
|
||||
<StepThree
|
||||
ref={stepThreeRef}
|
||||
formData={formData}
|
||||
updateForm={updateForm}
|
||||
data={data?.data}
|
||||
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
||||
<ScrollView contentContainerStyle={[styles.container, { paddingBottom: 90 }]}>
|
||||
<Image
|
||||
source={OneClick}
|
||||
style={{ width: 180, height: 56, marginBottom: 10 }}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
)}
|
||||
{currentStep === 4 && <StepFour data={ads} setPayment={setPaymentType} />}
|
||||
<View style={styles.footer}>
|
||||
{currentStep > 1 && currentStep !== 4 && (
|
||||
<TouchableOpacity
|
||||
style={[styles.back, isDark ? styles.darkBack : styles.lightBack]}
|
||||
onPress={() => setCurrentStep((s) => s - 1)}
|
||||
>
|
||||
<Text style={[styles.btnText, isDark ? styles.darkBtnText : styles.lightBtnText]}>
|
||||
{t('Orqaga')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={[styles.title, isDark ? styles.darkText : styles.lightText]}>
|
||||
{t("Bir Zumda Jonatish")}
|
||||
</Text>
|
||||
|
||||
{currentStep === 1 && (
|
||||
<StepOne ref={stepOneRef} formData={formData} updateForm={updateForm} />
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.next}
|
||||
disabled={isPending}
|
||||
onPress={() => {
|
||||
let isValid = true;
|
||||
|
||||
if (currentStep === 1) isValid = stepOneRef.current?.validate() ?? false;
|
||||
if (currentStep === 2) isValid = stepTwoRef.current?.validate() ?? false;
|
||||
if (currentStep === 3) isValid = stepThreeRef.current?.validate() ?? false;
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
if (currentStep < 3) setCurrentStep((s) => s + 1);
|
||||
if (currentStep === 3) handleSubmit();
|
||||
if (currentStep === 4) handlePresentModalPress();
|
||||
}}
|
||||
>
|
||||
<Text style={styles.btnText}>
|
||||
{currentStep === 3
|
||||
? t('Yaratish')
|
||||
: currentStep === 4
|
||||
? t("To'lash")
|
||||
: t('Keyingisi')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* FOOTER */}
|
||||
|
||||
{/* PAYMENT BOTTOM SHEET */}
|
||||
<BottomSheetModal
|
||||
ref={bottomSheetModalRef}
|
||||
index={0}
|
||||
snapPoints={['70%', '95%']}
|
||||
backdropComponent={renderBackdrop}
|
||||
handleIndicatorStyle={{ backgroundColor: '#94a3b8', width: 50 }}
|
||||
backgroundStyle={{ backgroundColor: isDark ? '#0f172a' : '#ffffff' }}
|
||||
enablePanDownToClose
|
||||
>
|
||||
<BottomSheetScrollView
|
||||
style={styles.sheetContent}
|
||||
contentContainerStyle={styles.sheetContentContainer}
|
||||
>
|
||||
<View style={{ padding: 20 }}>
|
||||
<Text style={[styles.sheetTitle, isDark ? styles.darkText : styles.lightText]}>
|
||||
{t("To'lov turini tanlang")}
|
||||
</Text>
|
||||
{currentStep === 2 && (
|
||||
<StepTwo ref={stepTwoRef} formData={formData} updateForm={updateForm} />
|
||||
)}
|
||||
{currentStep === 3 && (
|
||||
<StepThree
|
||||
ref={stepThreeRef}
|
||||
formData={formData}
|
||||
updateForm={updateForm}
|
||||
data={data?.data}
|
||||
/>
|
||||
)}
|
||||
{currentStep === 4 && <StepFour data={ads} setPayment={setPaymentType} />}
|
||||
<View style={styles.footer}>
|
||||
{currentStep > 1 && currentStep !== 4 && (
|
||||
<TouchableOpacity
|
||||
style={[styles.back, isDark ? styles.darkBack : styles.lightBack]}
|
||||
onPress={() => setCurrentStep((s) => s - 1)}
|
||||
>
|
||||
<Text style={[styles.btnText, isDark ? styles.darkBtnText : styles.lightBtnText]}>
|
||||
{t('Orqaga')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.paymentItem,
|
||||
isDark ? styles.darkPaymentItem : styles.lightPaymentItem,
|
||||
{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' },
|
||||
]}
|
||||
onPress={() => sendPayment('payme')}
|
||||
>
|
||||
<Image source={PAYME} style={{ width: 80, height: 80 }} />
|
||||
</TouchableOpacity>
|
||||
style={styles.next}
|
||||
disabled={isPending}
|
||||
onPress={() => {
|
||||
let isValid = true;
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.paymentItem,
|
||||
isDark ? styles.darkPaymentItem : styles.lightPaymentItem,
|
||||
]}
|
||||
onPress={() => sendPayment('referral')}
|
||||
if (currentStep === 1) isValid = stepOneRef.current?.validate() ?? false;
|
||||
if (currentStep === 2) isValid = stepTwoRef.current?.validate() ?? false;
|
||||
if (currentStep === 3) isValid = stepThreeRef.current?.validate() ?? false;
|
||||
|
||||
if (!isValid) return;
|
||||
|
||||
if (currentStep < 3) setCurrentStep((s) => s + 1);
|
||||
if (currentStep === 3) handleSubmit();
|
||||
if (currentStep === 4) handlePresentModalPress();
|
||||
}}
|
||||
>
|
||||
<Text style={[styles.paymentText, isDark ? styles.darkText : styles.lightText]}>
|
||||
{t('Referal orqali')}
|
||||
<Text style={styles.btnText}>
|
||||
{currentStep === 3
|
||||
? t('Yaratish')
|
||||
: currentStep === 4
|
||||
? t("To'lash")
|
||||
: t('Keyingisi')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BottomSheetScrollView>
|
||||
</BottomSheetModal>
|
||||
</KeyboardAvoidingView>
|
||||
</ScrollView>
|
||||
|
||||
{/* FOOTER */}
|
||||
|
||||
{/* PAYMENT BOTTOM SHEET */}
|
||||
<BottomSheetModal
|
||||
ref={bottomSheetModalRef}
|
||||
index={0}
|
||||
snapPoints={['70%', '95%']}
|
||||
backdropComponent={renderBackdrop}
|
||||
handleIndicatorStyle={{ backgroundColor: '#94a3b8', width: 50 }}
|
||||
backgroundStyle={{ backgroundColor: isDark ? '#0f172a' : '#ffffff' }}
|
||||
enablePanDownToClose
|
||||
>
|
||||
<BottomSheetScrollView
|
||||
style={styles.sheetContent}
|
||||
contentContainerStyle={styles.sheetContentContainer}
|
||||
>
|
||||
<View style={{ padding: 20 }}>
|
||||
<Text style={[styles.sheetTitle, isDark ? styles.darkText : styles.lightText]}>
|
||||
{t("To'lov turini tanlang")}
|
||||
</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.paymentItem,
|
||||
isDark ? styles.darkPaymentItem : styles.lightPaymentItem,
|
||||
{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' },
|
||||
]}
|
||||
onPress={() => sendPayment('payme')}
|
||||
>
|
||||
<Image source={PAYME} style={{ width: 80, height: 80 }} />
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
styles.paymentItem,
|
||||
isDark ? styles.darkPaymentItem : styles.lightPaymentItem,
|
||||
]}
|
||||
onPress={() => sendPayment('referral')}
|
||||
>
|
||||
<Text style={[styles.paymentText, isDark ? styles.darkText : styles.lightText]}>
|
||||
{t('Referal orqali')}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</BottomSheetScrollView>
|
||||
</BottomSheetModal>
|
||||
</TouchableWithoutFeedback>
|
||||
</KeyboardAwareScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user