React Native Formik

react-native-formik.js

import React from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
  StyleSheet,
} from 'react-native';
import { Formik } from 'formik';
import * as yup from 'yup';
import { Picker } from '@react-native-picker/picker';

const schema = yup.object().shape({
  title: yup.string()
    .required('Required')
    .min(3, 'Too short')
    .max(30, 'Too long'),
  content: yup.string()
    .required('Required'),
  language: yup.string()
    .required('Required'),
});

const initialValues = {
  title: "",
  content: "",
  language: "java",
};

const Input = ({
  name,
  handleChange,
  handleBlur,
  values,
  errors,
  touched,
  ...rest
}) => (
  <View style={styles.inputContainer}>
    <TextInput
      onChangeText={handleChange(name)}
      onBlur={handleBlur(name)}
      value={values[name]}
      style={styles.input}
      {...rest}
    />
    {errors && touched && errors[name] && touched[name]
      ? <Text style={styles.error}>{errors[name]}</Text>
      : null
    }
  </View>
);

const App = () => {

  return (
    <View style={styles.container}>
      <Formik
        initialValues={initialValues}
        onSubmit={values => console.log(values)}
        validationSchema={schema}
      >
        {({
          handleChange,
          handleBlur,
          handleSubmit,
          values,
          setFieldValue,
          errors,
          touched,
          resetForm,
        }) => (
          <View>
            <Input
              name="title"
              placeholder="Title"
              {...{ values, errors, touched, handleChange, handleBlur }}
            />
            <Input
              name="content"
              placeholder="Content"
              {...{ values, errors, touched, handleChange, handleBlur }}
            />
            <View style={styles.picker}>
              <Picker
                selectedValue={values.language}
                onValueChange={itemValue => setFieldValue("language", itemValue)}
              >
                <Picker.Item label="Java" value="java" />
                <Picker.Item label="JavaScript" value="js" />
                <Picker.Item label="Html" value="html" />
              </Picker>
            </View>
            {(errors?.language && touched?.language)
              && <Text style={styles.error}>{errors.language}</Text>
            }
            <Button onPress={resetForm} title="Clear" color="purple" />
            <Button onPress={handleSubmit} title="Submit" />
          </View>
        )}
      </Formik>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    margin: 20,
  },
  inputContainer: {
    marginBottom: 10,
  },
  input: {
    backgroundColor: '#f2f2f2',
    marginBottom: 3,
    borderRadius: 6,
    paddingHorizontal: 16,
    fontSize: 16,
  },
  picker: {
    backgroundColor: '#f2f2f2',
    marginBottom: 10,
    borderRadius: 6,
  },
  error: {
    color: '#ff0000',
    fontSize: 9,
    marginLeft: 6,
  },
});

export default App;