react-native-form-fields

Form Fields for React Native

Installation

Install package using

npm install mog-react-native-form-fields or yarn add mog-react-native-form-fields

Components

• Text Input
• Button
• Radio Button
• Switch

More components coming soon

Usage

Text Input

import {TextInput} from 'm-react-native-form-fields'

Props

label
The label to display.
Type: string
Default: 'label'

withLabel
Hide/show the label
Type: boolean
Default: true

variant
The variant to use.
Type: "standard" | "outlined"
Default: "outlined"

leading
Element placed before the text input.
Type: React.ReactNode | function
Optional: Yes
Example: leading = {<Icon name="check" color={'red'} size={18} />} or leading={props => {return <Icon name="eye" {...props} />}}

trailing
Element placed before the text input.
Type: React.ReactNode | function
Optional: Yes
Example: trailing = {<Icon name="check" color={'red'} size={18} />} or trailing={props => {return <Icon name="eye" {...props} />}}

labelStyles
Style to give the label.
Type: StyleProp<TextStyles>
optional: Yes
default = {}\

containerStyles
Style to give the container of the input.
Type: StyleProp<ViewStyles>
optional: Yes
default = {}\

textStyles
Style to give the text of the input.
Type: StyleProp<TextStyles>
optional: Yes
default = {}\

errorState
Flag in case of error input.
Type: boolean
optional: Yes
default = {false}\

errorText
Text to show in case of error.
Type: string
optional: Yes
default = 'error'\

...TextInputProps

Button

import {Button} from 'm-react-native-form-fields'

Props

label
The label on the button.
Type: string
Default: Button

variant
The variant to use.
Type: "outlined" | "filled"
default: "filled"

size
The size to use.
Type: "small" | "full"
default: "full"

withLoader
has loader or not.
Type: boolean
Default: false

isLoading
Show/Hide loading icon.
Type:boolean
Default: false

loaderSize
The position of the loader, leading=before label, trailing=after label.
Type: "leading" | "trailing"
Default: "leading"

loaderPosition
The size of the loader.
Type: "small" | "large"
Default: "small"

loaderColor
The color of the loader.
Type: "String"
Default: "white" for filled variant | "black" for outlined variant\

leading
Element placed before the text input.
Type: React.ReactNode | function
Optional: Yes
Example: leading = {<Icon name="check" color={'red'} size={18} />} or leading={props => {return <Icon name="eye" {...props} />}}

trailing
Element placed before the text input.
Type: React.ReactNode | function
Optional: Yes
Example: trailing = {<Icon name="check" color={'red'} size={18} />} or trailing={props => {return <Icon name="eye" {...props} />}}

buttonStyle
Style to give conatiner of button.
Type: StyleProp<ViewStyle>
optional: Yes
Default: {}

textStyles
Style to give the label of the button.
Type: StyleProp<TextStyles>
optional: Yes
Default: {}

isLabelUppercase
To convert label to uppercase.
Type: boolean
Default: false

theme
Changes the background color and color of the label.
Type: 'dark-red' | 'light-red' | 'black-white' Default: 'dark-red'
In case you want to give custom colors, edit buttonStyle and textStyles.

...TouchableOpacityProps

Radio Button

import {Radio} from 'm-react-native-form-fields'

Props

label
The label of the radio button.
Type: string
Default: Label

labelPosition
The positon of the label.
Type: 'top' | 'right' | 'bottom' | 'left'
default: "left"

isChecked
Value of the radio button.
Type: boolean
Default: false

checkedColor
The color of the checked radio button.
Type: string
default: '#56AFF0'

uncheckedColor
The color of the unchecked radio button.
Type: string
default: '#E9E9E9'

radioButtonShape
The shape of the radio button.
Type: 'circle' | 'square'
default: 'square'

radioButtonType
The type of radio button.
icon = shows check icon when isChecked={true}
color = shows filled color when isChecked={true}
Type: 'icon' | 'color'
Default: 'color'

containerStyles
The styles of the radio button container.
Type: StyleProp<ViewStyle>
Default: {}

Switch

import {Switch} from 'm-react-native-form-fields'

label
The label of the radio button.
Type: string
Default: Switch

labelPosition
The positon of the label.
Type: 'leading' | 'trailing'
default: "leading"

containerStyles
The styles of the switch container.
Type: StyleProp<ViewStyle>
Default: {}

...SwitchProps