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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user