How can I design an authentication UI in React Native?

How can I design an authentication UI in React Native?

You can start by using libraries like React Navigation for navigation and Formik for form handling. Would you like a code example?

Yes, please provide a code example for a login form.

Here's a simple login form using Formik:

import React from 'react';
import { View, TextInput, Button } from 'react-native';
import { Formik } from 'formik';

const LoginForm = () => {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      onSubmit={values => console.log(values)}
    >
      {({ handleChange, handleBlur, handleSubmit, values }) => (
        <View>
          <TextInput
            onChangeText={handleChange('email')}
            onBlur={handleBlur('email')}
            value={values.email}
            placeholder='Email'
          />
          <TextInput
            onChangeText={handleChange('password')}
            onBlur={handleBlur('password')}
            value={values.password}
            placeholder='Password'
            secureTextEntry
          />
          <Button onPress={handleSubmit} title='Login' />
        </View>
      )}
    </Formik>
  );
};

This will create a basic login form.

What about adding validation to the form?

You can use Yup for validation. Here's how you can integrate it:

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});

<Formik
  initialValues={{ email: '', password: '' }}
  validationSchema={validationSchema}
  onSubmit={values => console.log(values)}
>
  {/* Form code here */}
</Formik>