Open AkramHarazem opened 17 hours ago
@AkramHarazem hey, thank you for the issue. May I ask you to do several things:
https://github.com/user-attachments/assets/6ce59c25-9d58-47d4-aa00-bf5961a3fc7a
I also removed KeyboardProvider
and the issue is still reproducible for me. Why did you decide that keyboard-controller
causes this problem?
import {
StyleSheet,
TextInput,
View,
Dimensions,
Button,
Text,
Keyboard,
} from 'react-native';
import {useState} from 'react';
import Modal from 'react-native-modal';
import {KeyboardAwareScrollView} from 'react-native-keyboard-controller';
const {height} = Dimensions.get('window');
export const CommercialRegisterCheck = () => {
const [isModalVisible, setModalVisible] = useState(false);
const onSubmit = () => {
Keyboard.dismiss();
setModalVisible(!isModalVisible);
};
const closeModal = () => {
setModalVisible(!isModalVisible);
};
const handleModalPress = () => {
setModalVisible(!isModalVisible);
};
return (
<KeyboardAwareScrollView
contentContainerStyle={styles.contentContainerStyle}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
extraKeyboardSpace={100}>
<TextInput
onChange={() => {}}
value=""
style={{backgroundColor: 'yellow', width: '80%', marginBottom: 40}}
/>
<Button onPress={onSubmit} title={'continue'} />
<Modal
isVisible={isModalVisible}
animationOutTiming={200}
onBackButtonPress={() => setModalVisible(false)}
onBackdropPress={() => setModalVisible(false)}
deviceHeight={height + 50}
style={styles.modalStyle}>
<View style={styles.modalContainer}>
<View style={styles.txtContainer}>
<Text style={styles.descriptionTxt}>
Lorem Ipsum is simply dummy text of the printing and typesetting
</Text>
</View>
<Button title={'close'} onPress={handleModalPress} />
</View>
</Modal>
</KeyboardAwareScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
paddingHorizontal: 33,
},
contentContainerStyle: {
flexGrow: 1,
alignItems: 'center',
marginTop: 33,
},
inputsContainer: {
marginVertical: 25,
gap: 12,
},
modalStyle: {
alignSelf: 'center',
},
modalContainer: {
backgroundColor: 'white',
borderRadius: 22,
alignItems: 'center',
width: 275,
height: 255,
padding: 26,
},
txtContainer: {
alignItems: 'center',
paddingVertical: 33,
},
descriptionTxt: {
fontSize: 16,
color: 'black',
textAlign: 'center',
maxWidth: 240,
},
});
@kirillzyusko I hope this Code snippet better
note: I am wrapping my App.jsx with KeyboardProvider
Describe the bug wired modal behavior, If modal appears before keyboard shows first time, it appears in right position but after keyboard shows at least one time the modal appears at corner as per attached screenshots
Code snippet ` return (
); };
const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: colors.background, paddingHorizontal: moderateScale(33), }, headerContainer: { position: 'absolute', top: moderateVerticalScale(30), left: moderateScale(30), zIndex: 999, flexDirection: 'row', justifyContent: 'space-between', width: '85%', }, backIcon: { width: moderateScale(16), height: moderateVerticalScale(16), resizeMode: 'contain', }, contentContainerStyle: { flexGrow: 1, alignItems: 'center', marginTop: moderateVerticalScale(33), }, imgStyle: { width: moderateScale(190), height: moderateVerticalScale(190), resizeMode: 'contain', marginVertical: moderateVerticalScale(30), }, headerTxt: { fontSize: fontSizes[18], color: colors.lightGreen, fontFamily: typo.semiBold, textAlign: 'center', }, inputsContainer: { marginVertical: moderateVerticalScale(25), gap: moderateVerticalScale(12), }, modalStyle: { alignSelf: 'center', }, modalContainer: notRegister => ({ backgroundColor: colors.white, borderRadius: moderateScale(22), alignItems: 'center', width: moderateScale(275), height: moderateVerticalScale(notRegister ? 355 : 315), paddingHorizontal: moderateScale(26), paddingVertical: moderateVerticalScale(26), }), imgModalStyle: { width: moderateScale(160), height: moderateVerticalScale(150), resizeMode: 'contain', }, txtContainer: { alignItems: 'center', paddingVertical: moderateVerticalScale(33), }, greenTxt: { fontFamily: typo.semiBold, fontSize: fontSizes[18], color: colors.lightGreen, marginBottom: moderateVerticalScale(12), }, descriptionTxt: { fontFamily: typo.medium, fontSize: fontSizes[16], color: colors.text, textAlign: 'center', maxWidth: moderateScale(240), }, closeImgContainer: { width: moderateScale(25), height: moderateVerticalScale(25), position: 'absolute', top: moderateVerticalScale(20), left: moderateScale(15), }, closeImg: { width: '100%', height: '100%', resizeMode: 'contain', }, footer: { flexDirection: 'row', gap: moderateScale(5), }, footerTxt: { fontSize: fontSizes[14], color: colors.lightGray, fontFamily: typo.regular, }, signUpTxt: { fontSize: fontSizes[14], color: colors.lightGreen, fontFamily: typo.semiBold, }, lineStyle: { height: moderateVerticalScale(1), backgroundColor: colors.darkWhite, flex: 1, }, ORTxtStyle: { fontSize: fontSizes[14], color: colors.lighterGray, fontFamily: typo.regular, }, separator: { width: '90%', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: moderateScale(30), marginVertical: moderateVerticalScale(20), },`
Screenshots
Smartphone (please complete the following information):