When keyboard show then open modal , modal appear at the corner

[AkramHarazem]

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 (

enter_your_commercial_register_number ( resetField('commercialNum')} placeholder={t('commercial_register')} label="commercial_register" onBlur={onBlur} onFocus={resetCheck} returnKeyType="next" returnKeyLabel={t('next')} onSubmitEditing={handleSubmit(onSubmit)} /> )} /> continue or

    <View style={styles.footer}>
      <AppText style={styles.footerTxt}>already_have_account</AppText>
      <AppButton
        type={BUTTON_TYPES.TERTIARY}
        textStyle={styles.signUpTxt}
        onPress={navigateToSignIn}>
        sign_in
      </AppButton>
    </View>
    <Modal
      isVisible={isModalVisible}
      animationOutTiming={200}
      onBackButtonPress={() => setModalVisible(false)}
      onBackdropPress={() => setModalVisible(false)}
      deviceHeight={height + moderateVerticalScale(50)}
      style={styles.modalStyle}>
      <View style={styles.modalContainer(error?.status === 404)}>
        <AppIcon
          disabled={false}
          onPress={closeModal}
          containerStyle={styles.closeImgContainer}>
          <Image source={close} style={styles.closeImg} />
        </AppIcon>
        <Image source={registerImg} style={styles.imgModalStyle} />
        <View style={styles.txtContainer}>
          {/* <AppText style={styles.greenTxt}>
            {error?.status === 404 ? 'sorry' : 'already_exist'}
          </AppText> */}
          <AppText style={styles.descriptionTxt}>
            {error?.data?.errors?.[0]}
          </AppText>
        </View>
        {error?.status !== 403 ? (
          <AppButton upperCase onPress={handleModalPress}>
            {error?.status === 404 ? 'register' : 'sign_in'}
          </AppButton>
        ) : null}
      </View>
    </Modal>
  </KeyboardAwareScrollView>
</View>

); };

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):

• Desktop OS: ubuntu 22.04
• Device: onePlus 8T
• OS: android 14.0
• RN version: 0.75.4
• RN architecture: new fabric
• JS engine: Hermes
• Library version: 1.14.2

[kirillzyusko]

@AkramHarazem hey, thank you for the issue. May I ask you to do several things:

• please, properly format your issue (I see that you are using images inside the code and please format the code with ```)
• may I ask you to provide a reproduction example? It seems like you have a pretty complex reproduction scenario. In my playground example app I can reproduce a problem even if I don't show a keyboard:

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?

[AkramHarazem]

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