@mobeye/react-native-form-fields

Optimized field components with nice design for react-native forms

Getting started

Install the library using Yarn:

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

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

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

const App = () => {
    const [text, setText] = React.useState('');
    
    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,
    }
    
    // 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.

Property	Type	Description
`descriptionText`	`string`	(Optional) Text to display
`descriptionPictures`	`FormUrl[]`	(Optional) Pictures to display. See FormUrl
`descriptionImageViewer`	`FC<ImageViewerProps>`	(Optional) If an ImageViewer component is provided, it will open on picture press. See ImageViewerProps
`onPressDescriptionPicture`	`(index: number) => void`	(Optional) callback fired when user touches a picture
`descriptionContainerStyle`	`ViewStyle`	(Optional) Style for the Description container
`descriptionTextStyle`	`TextStyle`	(Optional) Style for the text
`descriptionPicturesContainerStyle`	`ViewStyle`	(Optional) Style for the view containing the pictures
`descriptionPictureStyle`	`ImageStyle`	(Optional) Style for the Image components rendering the pictures

`FormUrl`

Custom type used to pass pictures to the Description component

Property	Type	Description
`src`	`string`	(Required) Url or path to the image
`name`	`string`	(Optional) Not used for now
`size`	`number`	(Optional) Not used for now
`dimensions`	`{ width: number; height: number }`	(Optional) If not provided will be computed on initial render and every time `pictures` changes

`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

Property	Type	Description
`isVisible`	`boolean`	(Required) Show/Hide ImageViewer
`pictureUris`	`string[]`	(Required) List of the description pictures
`startingIndex`	`number`	(Required) index of the picture pressed by the user
`goBack`	`() => void`	(Required) callback to dismiss the viewer

Styles

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

Property	Type	Description
`containerStyle`	`ViewStyle`	(Optional) Container style
`labelAndValidationContainerStyle`	`ViewStyle`	(Optional) Label/validation container style
`labelStyle`	`TextStyle`	(Optional) Label text style
`validationDotStyle`	`ViewStyle`	(Optional) Validation dot style

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

Property	Type	Description
`label`	`string`	(Required) Label to display and animate
`value`	`string`	(Required) Value to display in the input. Can be empty
`isValid`	`bool \| null`	(Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid
`onChangeText`	`(text: string) => void`	(Optional) `TextInput` `onChangeText` callback
`onFocus`	`() => void`	(Optional) Triggered on input focus
`onBlur`	`() => void`	(Optional) Triggered on input blur
`leftIcon`	`ReactNode`	(Optional) Component to be rendered on the left of the input
`rightIcon`	`ReactNode`	(Optional) Component to be rendered on the right of the input
`textInputProps`	`TextInputProps`	(Optional) Props that will be directly passed down to the `TextInput`
`inputContainerStyle`	`ViewStyle`	(Optional) input container style
`inputStyle`	`TextStyle`	(Optional) Style to pass down to the `TextInput`

`MultiLineTextField`

Property	Type	Description
`label`	`string`	(Required) Label to display and animate
`value`	`string`	(Required) Value to display in the input. Can be empty
`isValid`	`bool \| null`	(Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid
`onChangeText`	`(text: string) => void`	(Optional) `TextInput` `onChangeText` callback
`onFocus`	`() => void`	(Optional) Triggered on input focus
`onBlur`	`() => void`	(Optional) Triggered on input blur
`textInputProps`	`TextInputProps`	(Optional) Props that will be directly passed down to the `TextInput`
`inputStyle`	`TextStyle`	(Optional) Style to pass down to the `TextInput`

`MCQField`

Property	Type	Description
`label`	`string`	(Required) Label to display and animate
`possibleAnswers`	`string[]`	(Required) List of possible answers to display
`selectedAnswersIndices`	`number[]`	(Required) List of indices of the selected answers
`onSelectAnswer`	`(answerIndex: number) => void`	(Required) Callback fired when user selects an answer
`isValid`	`bool \| null`	(Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid
`foldable`	`boolean`	(Optional) Should the MCQField be foldable (useful when there are a lot of possible answers)
`openFoldableLabel`	`string`	(Optional) Opening button label for foldable MCQ
`closeFoldableLabel`	`string`	(Optional) Closing button label for foldable MCQ
`activeAnswerIcon`	`React.ReactNode`	(Optional) Icon to display next to the answer when it is selected
`inactiveAnswerIcon`	`React.ReactNode`	(Optional) Icon to display next to the answer when it is not selected
`activeOpenFoldableIcon`	`React.ReactNode`	(Optional) Icon to display in the open button for foldable MCQ when it is closed
`inactiveOpenFoldableIcon`	`React.ReactNode`	(Optional) Icon to display in the open button for foldable MCQ when it is opened
`activeCloseFoldableIcon`	`React.ReactNode`	(Optional) Icon to display in the close button for foldable MCQ when it is closed
`inactiveCloseFoldableIcon`	`React.ReactNode`	(Optional) Icon to display in the close button for foldable MCQ when it is opened
`shouldAnimateOpenFoldableIcon`	`boolean`	(Optional) Should the openFoldableIcon be animated (90° rotation) on opening
`answerContainerStyle`	`ViewStyle`	(Optional) Answer container style
`answerTextStyle`	`TextStyle`	(Optional) Answer text style
`openFoldableBoxStyle`	`ViewStyle`	(Optional) Open foldable button style
`openFoldableLabelStyle`	`TextStyle`	(Optional) Open foldable button label style
`closeFoldableBoxStyle`	`ViewStyle`	(Optional) Close foldable button style
`closeFoldableLabelStyle`	`TextStyle`	(Optional) Close foldable button label style

`PickerField`

Property	Type	Description
`label`	`string`	(Required) Label to display and animate
`value`	`string`	(Required) Value to display in the input. Can be empty
`openPicker`	`() => void`	(Required) Callback fired when user presses the field to open the picker
`isValid`	`bool \| null`	(Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid
`leftIcon`	`React.ReactNode`	(Optional) Icon to display on the left part of the field
`rightIcon`	`React.ReactNode`	(Optional) Icon to display on the right part of the field
`inputContainerStyle`	`ViewStyle`	(Optional) input container style
`inputStyle`	`TextStyle`	(Optional) Style to pass down to the `TextInput`

`PhotoField`

Property	Type	Description
`label`	`string`	(Required) Label to display and animate
`pictureUris`	`string[]`	(Required) List of picture uris to display
`openCameraButton`	`React.ReactNode`	(Required) Open Camera button to be pressed by the user to open the camera
`isValid`	`bool \| null`	(Optional) If undefined or null, validation will not be rendered. If boolean validation will be rendered either as valid or invalid
`onPressPicture`	`(index: number) => void`	(Optional) Callback fired when user presses a picture
`imagesContainerStyle`	`ViewStyle`	(Optional) Style for the view containing the images
`imageContainerStyle`	`ViewStyle`	(Optional) Style for the Touchable containing each individual image
`imageStyle`	`ImageStyle`	(Optional) Style for the images

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 start

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

Built and maintained by Mobeye.

Name		Name	Last commit message	Last commit date
Latest commit History 141 Commits
example		example
src		src
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

@mobeye/react-native-form-fields

Table of contents

Getting started

General Usage

Field common props

`Description`

`FormUrl`

`ImageViewerProps`

Styles

Colors

Fields

`SingleLineTextField`

`MultiLineTextField`

`MCQField`

`PickerField`

`PhotoField`

Example

About

Releases

Packages

Languages

License

AlexUzan/react-native-form

Folders and files

Latest commit

History

Repository files navigation

@mobeye/react-native-form-fields

Table of contents

Getting started

General Usage

Field common props

Description

FormUrl

ImageViewerProps

Styles

Colors

Fields

SingleLineTextField

MultiLineTextField

MCQField

PickerField

PhotoField

Example

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

`Description`

`FormUrl`

`ImageViewerProps`

`SingleLineTextField`

`MultiLineTextField`

`MCQField`

`PickerField`

`PhotoField`

Packages