react-native-form-inputs

Status : Pending work with defining style object structure

📜React Native Inputs

A customisable input library to quickly build complex forms in React Native

Install

npm install react-native-inputs

Usage

import { ParentComponent, FieldInput, DatePickerInput, OptionInput } from ‘react-native-inputs’;

Passing text props and state handling

These components are built with the Formik API in mind and we recommend they are used as such. Support for other form-related APIs is more than welcome, just submit a PR! A short example for the formik-based use cases

<FieldInput 
    label="Email" 
    value={formik.values.email} 
    onChangeText={formik.handleChange('email')} 
    />
<FieldInput 
    label="First name" 
    value={formik.values.firstName} 
    onChangeText={formik.handleChange('firstName')} 
    />
<FieldInput 
    label="Last name" 
    value={formik.values.lastName} 
    onChangeText={formik.handleChange('lastName')} 
    />
<FieldInput 
    label="Phone number" 
    value={formik.values.phoneNumber} 
    editable={false}  
    inputStyle={{ marginBottom: 0 }} />
<DateTimeInput 
    value={formik.values.birthdate} 
    onChangeValue={handleChange('birthdate')}
      />
<OptionInput
        value={formik.values.relationship}
        label="Relationship"
        extraNote="(optional)"
        onChangeValue={handleChange('relationship')}
        options={relationshipOptions}
      />

Styling via Context

This library implements styles through the React Context API. Any component you want to provide custom styles to should be a child component of a <ParentComponent value={customStyleObject}> with the customStyleObject attribute fed to the value prop.

The components will catch style attributes only meant for them, for eg. if we want to style the a FieldInput instance

    <ParentComponent value={{fieldInputStyle:{ fontSize : 20}}>
         <FieldInput
            onBlur={onFocusChange('email', false)}
            onFocus={onFocusChange('email', true)}
            placeholder={'Email'}
            value={formik.values.email}
            keyboardType="email-address"
            autoCapitalize="none"
            autoCorrect={false}
            returnKeyType="go"
            contextMenuHidden
            onSubmitEditing={() => passwordInputRef.current.focus()}
            onChangeText={formik.handleChange('email')}
            label={'Email'}
            editable={!formik.isSubmitting}>
    </ParentComponent>