keyboard scroll
This commit is contained in:
Samandar Turgunboyev
@@ -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