How to show error message in registerform with react-native?

I have a react-native app. And I try to show specific error message to the user when email is not correct formatted.

this is the context with the email validation:

export const AuthContextProvider = ({ children }) => {
	const [isLoading, setIsLoading] = useState(false);
	const [error, setError] = useState(null);
	const [user, setUser] = useState(null);
	const [emailValidError, setEmailValidError] = useState("");



	const handleValidEmail = (val) => {
		let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;

		if (val.length === 0) {
			setEmailValidError("email address must be enter");
		} else if (reg.test(val) === false) {
			setEmailValidError("enter valid email address");
		} else if (reg.test(val) === true) {
			setEmailValidError("");
		}
	};

	const onRegister = async (email, username, password, password2) => {
		
		if (password !== password2) {
			setError("wachtwoorden zijn niet gelijk aan elkaar");
			return;
		}
		registerRequest(email, username, password, password2)
			.then((u) => {
				setUser(u);
				setIsLoading(false);
			})
			.catch((e) => {
				setIsLoading(false);
				setError(e.toString());
			});
	};

	return (
		<AuthContext.Provider
			value={{
				isAuthenticated: !!user,
				isLoading,
				error,
				user,
				onLogin,
				onRegister,
				handleValidEmail,
			}}>
			{children}
		</AuthContext.Provider>
	);
};

And this is the register from:

		export const RegisterScreen = ({ navigation }) => {
	const [email, setEmail] = useState("");
	const [username, setUsername] = useState("");
	const [password, setPassword] = useState("");
	const [password2, setPassword2] = useState("");
	const { onRegister, isLoading, error, handleValidEmail, emailValidError } =
		useContext(AuthContext);

	return (
		<AccountBackground>
			<AccountCover />
			<Title> app</Title>
			<AccountContainer>
				<AuthInput
					label="E-mail"
					value={email}
					textContentType="emailAddress"
					keyboardType="email-address"
					autoCapitalize="none"
					onChangeText={(u) => {
						setEmail(u);
						handleValidEmail(u);
					}}
					error={emailValidError}
				/>

				<Spacer size="large">
					<AuthInput
						label="username"
						value={username}
						textContentType="username"
						keyboardType="username"
						autoCapitalize="none"
						onChangeText={(user) => setUsername(user)}
					/>
				</Spacer>
				<Spacer size="large">
					<AuthInput
						label="Wachtwoord"
						value={password}
						textContentType="password"
						secureTextEntry
						autoCapitalize="none"
						onChangeText={(p) => setPassword(p)}
					/>
				</Spacer>
				<Spacer size="large">
					<AuthInput
						label="Herhaal wachtwoord"
						value={password2}
						textContentType="password2"
						secureTextEntry
						autoCapitalize="none"
						onChangeText={(pas) => setPassword2(pas)}
					/>
				</Spacer>
				{error && (
					<ErrorContainer size="large">
						<Text variant="error">{error}</Text>
					</ErrorContainer>
				)}
				<Spacer size="large">
					{!isLoading ? (
						<AuthButton
							icon="email"
							mode="contained"
							onPress={() => onRegister(email, username, password, password2)}>
							Register
						</AuthButton>
					) : (
						<ActivityIndicator animating={false} />
					)}
				</Spacer>
			</AccountContainer>
			<Spacer size="large">
				<AuthButton mode="contained" onPress={() => navigation.goBack()}>
					Back
				</AuthButton>
			</Spacer>
		</AccountBackground>
	);
};

and errorContainer:

export const ErrorContainer = styled.View`
	max-width: 300px;
	align-items: center;
	align-self: center;
	margin-top: ${(props) => props.theme.space[2]};
	margin-bottom: ${(props) => props.theme.space[2]};
`;

export const AuthInput = styled(TextInput)`
	width: 200px;
	background-color: #c6daf7;
`;

But when the email textinput left blanco. it only shows error.

Question: how to use the method handleValidEmail with the input email field?

Your code doesn't show where the error state should be displayed. You set the state but you are not using it in your view.

You can do that by modifying the AuthInput to accept the error like the following:

<AuthInput
    label="E-mail"
    value={email}
    textContentType="emailAddress"
    keyboardType="email-address"
    autoCapitalize="none"
    onChangeText={(u) => {
        setEmail(u);
        handleValidEmail(u);
    }}
    error={emailValidError}
/>

And display the text in the AuthInput component:

/* Somewhere: */
{error ? <Text>{error}</Text> : null}