/** Sub View */
	const loginCard = () => {
		return (
			<View style={styles.cardView}>
				<TextInput
					placeholder={translate(translationKeys.EmailPlaceholder)}
					keyBoardType="email-address"
					value={email}
					onChangeText={onChangeTextEmail}
				/>
				<TextInput
					containerStyle={styles.textInputContainer}
					placeholder={translate(translationKeys.PasswordPlaceholder)}
					isSecure
					value={password}
					onChangeText={onChangeTextPassword}
				/>
				<Button
					title={translate(translationKeys.LogIn)}
					onPress={onPressLoginBtn}
				/>

				<BiometricView
					isLoginCredentialsPresent={isLoginCredentialsPresent}
					onAuthenticated={() => {
						return onNavigate();
					}}
				/>

				<Divider type="horizontal" />

				<View style={styles.row}>
					<SecondaryButton
						title={translate(translationKeys.ButtonForgotPassword)}
						onPress={() => {
							navigation.navigate("ForgotPasswordScreen");
						}}
					/>
					<Divider type="vertical" />
					<SecondaryButton
						title={translate(translationKeys.ButtonCreateAccount)}
						onPress={() => {
							navigation.navigate("TermsAndConditionsScreen");
						}}
					/>
				</View>
			</View>
		);
	};

	const renderRootScreen = () => {
		if (isLoginCredentialsPresent === null) {
			showLoader(true);
		}

		const {updateStatus} = settingsState;
		const {isUpdateAvailable} = updateStatus;

		if (isUpdateAvailable) {
			showLoader(false);
			return null;
		}
		return <RootScreen onCallback={onCallback} />;
	};

	/** Main view */
	return (
		<Background keyBoardHandled keyboardVerticalOffset={useHeaderHeight()}>
			{renderRootScreen()}

			<Alert
				visible={alertStatus.isVisible}
				title={alertStatus.title}
				description={alertStatus.message}
				positiveButtonTitle={alertStatus.buttonTitle}
				onPress={alertStatus.onPress || onDismissAlert}
			/>
			<StatusBar
				translucent
				barStyle="dark-content"
				backgroundColor="transparent"
			/>
			<ImageBackground
				style={styles.backgroundImage}
				source={{uri: getBackgroundImage(themeId)}}
			>
				<SafeAreaView>
					<ScrollView
						style={styles.container}
						scrollEnabled={isKeyBoardOpen}
						showsVerticalScrollIndicator={false}
						keyboardShouldPersistTaps="handled"
					>
						<View style={styles.cardContainer}>
							<Image
								style={styles.logo}
								resizeMode={DeviceInfo.isTablet() ? "contain" : "cover"}
								resizeMethod="scale"
								source={{uri: getLogo(themeId)}}
							/>
							<Card>{loginCard()}</Card>
						</View>
					</ScrollView>
					<BiometricAlert show={isAlertVisible} />
				</SafeAreaView>
			</ImageBackground>
		</Background>
	);
};
 this is my code now the issue is on ios 18 where if i type something on email field it starts shaking the background image also if i type password it works normally how to fix this note it works normally on before 18 ios versions and this is my style file : import {Platform, StyleSheet} from "react-native";

import {Platforms} from "@config/constants/GenericReactNativeConstants";
import {iTheme} from "@config/types/ThemeTypes";

import Typography from "@styles/Typography";
import {getCardWidth} from "@utils/DeviceOrientationUtils";
import {hp, wp} from "@utils/ResponsiveScreenUtil";

const createStyles = (theme: iTheme) => {
	const styles = StyleSheet.create({
		backgroundImage: {
			flex: 1,
		},

		cardContainer: {
			alignItems: "center",
		},

		container: {
			marginHorizontal: hp(15),
		},

		textInputContainer: {
			marginTop: hp(10),
		},

		logo: {
			width: getCardWidth(),
			height: wp(120),
			marginTop: Platform.OS === Platforms.android ? hp(80) : hp(30),
		},
		appTitle: {
			fontSize: Typography.fontSizes.FONT_SIZE_45,
			color: theme.colors.primary,
			fontWeight: "300",
			marginLeft: wp(20),
		},
		statusbar: {
			backgroundColor: theme.colors.background.statusBar,
		},
		cardView: {
			paddingHorizontal: hp(20),
			paddingTop: hp(20),
			paddingBottom: hp(5),
			width: "100%",
		},
		row: {
			flexDirection: "row",
			justifyContent: "space-evenly",
			alignItems: "center",
			marginVertical: hp(4),
		},
	});

	return styles;
};

export default {createStyles};