/** 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 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};
how can i make sure that image does not move or flicker while typing on the email address the problem seems to be that email input is taking the type of password here instead of email and if i remove the password field it works fine how to fix this