mog-react-native-form-fields v1.0.5
react-native-form-fields
Form Fields for React Native
Installation
Install package using
npm install m-react-native-form-fields
or yarn add m-react-native-form-fields
Components
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