Как сделать валидацию полей react-native

Есть экран регистрации, как сделать его валидацию???

export default function RegistrationScreen() {
  const navigation = useNavigation()
  const toLogin = () => {
    navigation.navigate('Login')
  }


  const [surname, setSurname] = useState('')
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')

  const [IsLoading, setIsLoading] = useState(false)
  const [error, setError] = useState('')

  const [_, setUser] = useAuth()

 
  const hanldeRegister = () => {
    setIsLoading(true)
    axios({
      method: 'POST',
      url: ,
      params: {
        key: ,
      },
      data: {
        email,
        password,
      },
    })
      .then((res) => {
        axios({
          method: 'POST',
          url: ,
          params: {
            key: ,
          },
          data: {
            idToken: res.data.idToken,
            displayName: name + ' ' + surname
          }
        }).then((r) => {
          setUser({...r.data, idToken: res.data.idToken})
        }).catch(e => {
          console.log(e, 'updaate profile error');
          alert(e.message);
        })
        .finally(() => {
          setIsLoading(false);
        })

        console.log(res.data)
      })
      .catch((error) => console.log(error.response.request._response))
  }

  return (
    <View
     style={styles.container}>
        <View style={styles.header}>
            <Pressable
            style={styles.quit_button_cont}
            onPress={toLogin}>
                <QuitBtn
                    style={[styles.quit_button]}
                    resizeMode='contain'/>
            </Pressable>
            <RegWord style={styles.regWord}/>
            <Image
                source={require('../assets/images/Logo_small.png')}
                style={styles.logo_s}
                resizeMode='contain'/>
        </View>
            <View
             style={styles.cont_inp}
             behavior="position">
                <CustomInput 
                    value={name}
                    setValue={setName}
                    placeholder="Имя"
                    margin={10}/>
                
                <CustomInput
                    value={surname}
                    setValue={setSurname}
                    placeholder="Фамилия"
                    margin={10}/>

                <CustomInput
                    value={email}
                    setValue={setEmail} 
                    placeholder="Логин"
                    margin={10}/>

                <CustomInput 
                    placeholder="Пароль"
                    margin={10}
                    secureTextEntry={true}/>
                <CustomInput 
                    placeholder="Повторите пароль"
                    value={password}
                    setValue={setPassword}
                    margin={10}
                    secureTextEntry={true}
                    flex={1}/>
                <CustomButton 
                    text={"Зарегистрироваться"}
                    onPress={hanldeRegister}
                    margin={0}/>
            </View>    
    </View>
)
}