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


<Controller
control={control}
name="commercialNum"
rules={{
required: 'commercial_num_is_required',
}}
render={({field: {onChange, onBlur, value}}) => (
<AppInput
ref={commercialRef}
onChangeText={onChange}
value={value}
resetValue={() => resetField('commercialNum')}
placeholder={t('commercial_register')}
label="commercial_register"
onBlur={onBlur}
onFocus={resetCheck}
returnKeyType="next"
returnKeyLabel={t('next')}
onSubmitEditing={handleSubmit(onSubmit)}
/>
)}
/>

<AppButton
onPress={handleSubmit(onSubmit)}
upperCase={true}
type={isValid ? BUTTON_TYPES.PRIMARY : BUTTON_TYPES.DISABLED}
isLoading={isCheckingCR}>
continue

<View style={[styles.separator, styles.row]}>

or



already_have_account

sign_in


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





{/*
{error?.status === 404 ? 'sorry' : 'already_exist'}
*/}

{error?.data?.errors?.[0]}


{error?.status !== 403 ? (

{error?.status === 404 ? 'register' : 'sign_in'}

) : null}




);
};

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:

Screen.Recording.2024-10-27.at.10.45.17.mov

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

[kirillzyusko]

@AkramHarazem did you find a solution? Why you closed this issue? 👀

[AkramHarazem]

@kirillzyusko No, I didn't find solution but I reverted new architecture to false and keep using react-native-keyboard-aware-scroll-view

[kirillzyusko]

but I reverted new architecture

Ah, sad to hear it. Anyway, feel free to re-open or open a new bug if you will see this bug again in future versions of react-native 👀

[Jul1enF]

I'm facing the exact same issue and it's only happening on android.

If i use a KeyboardAvoidingView and a ScrollView instead of a KeyboardAwareScrollView, there is no problem.

But otherwise, if the keyboard mount, after that, setting visible the modal causes bugs juste like AkramHarazem. I can retrieve the good position by putting a position : absolute directely to the style of the modal, but i can't interact with it. Pressing the backdrop or my close button doesn't do anything. It's stuck. Only backButtonPress works.

I have the latest expo sdk, latest react native and all of the latest packages. I would like to keep the newArchEnabled true.

Any idea of a quick fix that could help me ?

[kirillzyusko]

@Jul1enF may I ask you to open a new issue with minimal reproduction example?

[Jul1enF]

Of course !