React Native Flawless Ui

Form

Having considered the options, I have decided to use formik; was an especially easy decision as it is my long-time go-to forms solution in React web development.

Formik

Formik is 100% compatible with React Native and React Native Web. However, because of differences between ReactDOM's and React Native's handling of forms and text input, there are some differences to be aware of. This section will walk you through them and what we consider to be best practices.

Example:

 
import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { Formik } from 'formik';
​
export const MyReactNativeForm = props => (
  <Formik
    initialValues={{ email: '' }}
    onSubmit={values => console.log(values)}
  >
    {props => (
      <View>
        <TextInput
          onChangeText={props.handleChange('email')}
          onBlur={props.handleBlur('email')}
          value={props.values.email}
        />
        <Button onPress={props.handleSubmit} title="Submit" />
      </View>
    )}
  </Formik>
);

Redux Form

This simple App should get you familiar with these Libraries and their use case.

 
import React, { Component } from 'react';
import { View, Text, Button, TextInput } from 'react-native';
import { Field, reduxForm } from 'redux-form';
​
class ReduxFormExample extends Component {
​
  renderInput = ({ input, label, type, meta: { touched, error, warning } }) => {
    return (
      <View>
        <TextInput {...input} />
        {error ? <Text>{error}</Text> : null}
      </View>
    )
  }
​
  _submitForm = values => {
    // Do something
  }
​
  render() {
    const { handleSubmit } = this.props;
    return (
      <View>
        <Field name="email"  placeholder="email" component={this.renderInput} />
        <Field name="name"  placeholder="name" component={this.renderInput} />
        <Button onPress={handleSubmit(this._submitForm)}>
          <Text>Submit</Text>
        </Button>
      </View>
    );
  }
}
​
export default reduxForm({
  form: 'user',
})(ReduxFormExample)

View full example with Native Base Redux Form Example

Formik Validation

yup

Yup is a JavaScript object schema validator and object parser. View on Github

Add Yup to your project

 
yarn add yup
# or
# npm install yup --save
# typescript users should add the @types/yup

 
// SignupSchema.js
import * as Yup from 'yup';
​
const SignupSchema = Yup.object().shape({
  email: Yup.string()
    .min(6, 'Too Short!')
    .max(30, 'Too Long!')
    .email('Invalid email')
    .required('Required'),
  password: Yup.string()
    .min(8, 'Too Short!')
    .max(20, 'Too Long!')
    .required('Required'),
});

 
import SignupSchema from './SignupSchema';
​
<Formik
  initialValues={{ email: '', password: '' }}
  validationSchema={SignupSchema} // here
  onSubmit={values => console.log(values)}
>
  {props => (
    <View>
      <TextInput
        onChangeText={props.handleChange('email')}
        onBlur={props.handleBlur('email')}
        value={props.values.email}
      />
      <TextInput
        onChangeText={props.handleChange('password')}
        onBlur={props.handleBlur('password')}
        value={props.values.password}
      />
      <Button onPress={props.handleSubmit} title="Submit" />
    </View>
  )}
</Formik>

Form ScrollView

ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.

react-native-keyboard-aware-scroll-view. View on Github

Example:

View config my repo ScrollableAvoidKeyboard

 
// ScrollableAvoidKeyboard.js
import React from 'react';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
​
const ScrollableAvoidKeyboard = ({
  children,
  contentContainerStyle,
  ...restProps
}) => (
    <KeyboardAwareScrollView
      bounces={false}
      bouncesZoom={false}
      alwaysBounceVertical={false}
      alwaysBounceHorizontal={false}
      removeClippedSubviews={false}
      contentContainerStyle={contentContainerStyle}
      enableOnAndroid={true}
      {...restProps}
    >
      {children}
    </KeyboardAwareScrollView>
  );
​
export default ScrollableAvoidKeyboard;

Android Support

You can easily enable it by setting windowSoftInputMode in AndroidManifest.xml. You need to enable Android Support with the following steps:

Make sure you are using react-native 0.46 or above.
Set windowSoftInputMode to adjustPan in AndroidManifest.xml.
Set enableOnAndroid property to true.

Use

 
import { ScrollableAvoidKeyboard } from './ScrollableAvoidKeyboard';
​
​
const FormScrollView = () => (
  <ScrollableAvoidKeyboard>
    <View>
      <TextInput placeholder="Placeholder 1" />
      <TextInput placeholder="Placeholder 2" />
      <TextInput placeholder="Placeholder 3" />
      <TextInput placeholder="Placeholder 4" />
      <TextInput placeholder="Placeholder 5" />
      <TextInput placeholder="Placeholder 6" />
      <TextInput placeholder="Placeholder 7" />
      <TextInput placeholder="Placeholder 8" />
      <TextInput placeholder="Placeholder 9" />
      <TextInput placeholder="Placeholder 10" />
    </View>
  </ScrollableAvoidKeyboard>
);