mog-react-native-form-fields v1.0.8

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