@mobeye/react-native-form-fields v1.4.0

@mobeye/react-native-form-fields

Optimized field components with nice design for react-native forms

Table of contents

• Getting started
• General Usage
• Field common props
• Fields
• Other components
• Example

Getting started

Install the library using Yarn:

// add library
yarn add @mobeye/react-native-form-fields

// add peer dependencies
yarn add @react-native-community/datetimepicker

General Usage

See example app (example/App.tsx) for more examples using TypeScript

You can use most Fields based on the example below, they work in the same way as a basic TextInput.
!!! All fields and component are wrapped with React.memo for memoization.

import React from 'react';
import SingleLineTextField from '@mobeye/react-native-form-fields';

const containerStyle = {
    width: '90%',
    marginTop: 10,
    borderRadius: 5,
    padding: 10,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 14,
    elevation: 5,
};

const App = () => {
    const [text, setText] = React.useState('');

    // Make sure to use React callbacks and/or memoized values to prevent unnecessary renders !
    return (
        <SingleLineTextField
            label="Click on me !"
            value={text}
            onChangeText={setText}
            containerStyle={containerStyle}
        />
    );
};

Field common props

Description

All fields come with an optional Description to display text and/or images above the field. Can be used to give context, indications or whatever you want.

Those props are present in every field and will be immediately passed to the Description component.

FormUrl

Custom type used to pass pictures to the Description component

ImageViewerProps

Props of the custom ImageViewer component passed using descriptionImageViewer Those 4 props will be passed to the component by the DescriptionPictures component It is up to you to use them or not

Styles

In addition to their own style props, every field has these 4 styles:

Colors

All fields have an optional props colors which is an object with the optional following keys: valid, error, active, inactive, activeBackground, inactiveBackground, placeholder

Depending on the field only some of them can be used. If unsure please refer to the types exported with the library

Fields

SingleLineTextField

A TextInput with a nice animation on focus/blur

MultiLineTextField

A multi line TextInput with a nice animation on focus/blur

MCQField

A MCQ field that can be foldable.

PickerField

A simple presentational picker field with an openPicker prop to work with an input picker component like DatePicker.

DatePickerField

A date picker field which use the DatePicker component.

PhotoField

A field that display photos. To take photo with it, you need to implement yourself a camera.

Other components

Description

You can directly import and use the Description component.

DatePicker

A date picker component. To be used with a presentational component like PickerField that can display the picked date.

Example

You can run a simple example present in the module to test the form. First, you need to install node_modules and example pods:

yarn && cd example/ios/ && pod install && cd .. && yarn && yarn start

Then, open the example directory with xcode or android studio to build the example.