I have a bottomSheet component and when the keyboard is open the view of the bottomSheet get round.
The component without opening keyboard:
but when keybored is opened:
component code:
<BottomSheet visible={isOpen} onBackButtonPress={() => { setToUpdate(undefined) setIsOpen(false); }}><View style={[buttomSheetStyles.bottomNavigationView, { height: "80%", backgroundColor: Colors.white500 }]}><View style={[buttomSheetStyles.buttomSheetContainer, { alignItems: 'center', justifyContent: 'space-around' }]}><Image source={require('../assets/return.png')} resizeMode='contain' style={{ position: 'absolute', top: -100 }} /><View style={{ justifyContent: 'center', alignItems: 'center', paddingHorizontal: 30, marginTop: 80 }}><Text style={{ fontFamily: I18nManager.isRTL ? 'almarai-bold' : 'montserrat-bold', fontSize: 17, textAlign: 'center' }}>{t("returnsScreen:NewReturnHeader")}</Text></View><Formik validationSchema={returnValidationSchema} initialValues={(toUpdate === undefined) ? { packageQuantity: '', unitQuantity: '', cause: '', image: '' } : { packageQuantity: toUpdate.value.productQuantity.packageQuantity.toString(), unitQuantity: toUpdate.value.productQuantity.unitQuantity.toString(), cause: toUpdate.value.cause, image: toUpdate.value.image.fileContent }} onSubmit={(values) => { console.log(values.cause) if (toUpdate === undefined) onSubmit(values); else onSubmit(values, toUpdate.index); setToUpdate(undefined) }}> {({ handleChange, handleBlur, handleSubmit, setValues, setFieldValue, touched, values, errors, isValid, dirty, }) => (<View style={{ flex: 1, }}><View style={{ flex: 1, }}><View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', flex: 1 }}><Text style={{ flex: 2.5, textAlign: 'left', paddingLeft: 10, color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:products")}</Text><Text style={{ flex: 1, textAlign: 'center', color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:package")}</Text><Text style={{ flex: 1, textAlign: 'center', color: Colors.primary500, fontFamily: I18nManager.isRTL ? 'almarai-regular' : 'montserrat-regular' }}>{t("common:units")}</Text></View><View style={{ flex: 3, justifyContent: "center", alignItems: "center", flexDirection: 'row' }}><CachedImage source={{ uri: `${env.apiUrl.concat(env.productImagePngById.replace(":productId", orderItem.product!.id)).concat("?thumbnail=true")}`, // (required) -- URI of the image to be cached expiresIn: 43200, // 12 hours in seconds (optional), if not set -- will never expire and will be managed by the OS }} cacheKey={`${orderItem.product!.id}-thumbnail`} // (required) -- key to store image locally placeholderContent={( // (optional) -- shows while the image is loading<Image source={{ uri: productDefaultImage }} resizeMode="contain" style={{ width: 100, height: 70 }} /> )} resizeMode="contain" // pass-through to <Image /> tag style={{ width: 100, height: 70 }} /><View style={{ flex: 5, justifyContent: 'center', alignItems: 'center' }}><View style={{ flex: 5, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}><View style={{ flex: 1, justifyContent: 'center', marginStart: 7 }}><Text style={styles.nameStyleText}>{I18nManager.isRTL ? orderItem.product!.rtlName : orderItem.product!.name}</Text></View><View style={{ flex: 1.5, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}><Input style={{ alignItems: 'center', backgroundColor: Colors.white500 }} value={values.packageQuantity.toString()} onChangeText={handleChange('packageQuantity')} status={ touched.packageQuantity ? !errors.packageQuantity ? "success" : "danger" : "warning" } keyboardType="numeric" /><Input style={{ alignItems: 'center', backgroundColor: Colors.white500 }} value={values.unitQuantity.toString()} onChangeText={handleChange('unitQuantity')} status={ touched.unitQuantity ? !errors.unitQuantity ? "success" : "danger" : "warning" } keyboardType="numeric" /></View></View></View></View></View><View style={{ flex: 0.5, borderColor: Colors.black900, borderWidth: 1 }}><Picker prompt={t("common:selectReason")} mode="dropdown" selectedValue={values.cause} onValueChange={(e) => { console.log("e: ", e) setFieldValue('cause', e) } }><Picker.Item enabled={false} label={t("common:selectReason")} value={``} /><Picker.Item label={t("returnsScreen:DAMAGED")} value={ReturnProductEnum.DAMAGED} /><Picker.Item label={t("returnsScreen:UNLOADED")} value={ReturnProductEnum.UNLOADED} /><Picker.Item label={t("returnsScreen:EXPIRED")} value={ReturnProductEnum.EXPIRED} /></Picker></View><View style={{ flex: 2 }}><CameraInput imageCallback={handleChange("image")} openCamera={isCameraOpen} setOpenCamera={setIsCameraOpen} status={errors.image} image={values.image} /></View><Button style={{ flex: 0.5, width: '100%', borderRadius: 9, height: 65, justifyContent: "space-evenly", }} status='info' disabled={!isValid || !dirty || loading} onPress={() => handleSubmit()} accessoryRight={loading ? <View style={{ justifyContent: 'center', alignItems: 'center' }}><Spinner size='small' status='info' /></View> : IconComponent( (I18nManager.isRTL ? evaIcons.backArrow : evaIcons.frontArrow), Colors.white500 )}> {(props) => (<Text {...props} style={{ fontFamily: I18nManager.isRTL ? 'almarai-bold' : 'montserrat-bold', color: Colors.white500, fontSize: 17, marginLeft: 35, }}> {t("common:submit")}</Text> )}</Button></View> )}</Formik></View></View></BottomSheet >is there's any way I can make keyboard, on top of the bottomSheet?or a way to make the bottomsheet scrollable...or if there's any better way to atchive the same result ?