Gathering detailed insights and metrics for react-native-form-component
Gathering detailed insights and metrics for react-native-form-component
A customizable form component for react-native. It handles basic validation of input, and also alerts the user of failed validations.
Installations
npm install react-native-form-componentDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Releases
44
Languages
2
TypeScript
JavaScript
TypeScript (73.37%)
JavaScript (26.63%)
Developer
klazbaba
Download Statistics
Total Downloads
38,255
Last Day
18
Last Week
152
Last Month
642
Last Year
6,899
GitHub Statistics
MIT License
60 Stars
512 Commits
5 Forks
1 Watchers
1 Branches
1 Contributors
Updated on Oct 01, 2024
Maintainers
1
Package Meta Information
Latest Version
2.6.14
Package Id
react-native-form-component@2.6.14
Unpacked Size
258.81 kB
Size
55.36 kB
File Count
98
Published on
Jan 19, 2024
Total Downloads
Cumulative downloads
Total Downloads
38,255
Last Day
5.9%
18
Compared to previous day
Last Week
-14.1%
152
Compared to previous week
Last Month
64.2%
642
Compared to previous month
Last Year
-41.2%
6,899
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Dev Dependencies
20
@commitlint/config-conventional@react-native-community/eslint-config@release-it/conventional-changelog@testing-library/react-native@types/jest@types/react@types/react-nativeeslinteslint-config-prettiereslint-plugin-prettierhuskyjestmetro-react-native-babel-presetprettierreactreact-nativereact-native-builder-bobreact-test-rendererrelease-ittypescript
react-native-form-component
A customizable form component for react-native.
It handles basic validation of inputs, and also alerts you of failed validations.
Installation
1yarn add react-native-form-component
Functions
| Name | Description |
|---|---|
| submitForm | Does the same thing as onButtonPress() in Form component. It does validation first, then carries out the defined action |
Components
Form
Wrapper component for form items. It is advised to use this component to wrap every other component contained in this library. The Form component comes with a button that does validation of FormItems when clicked. The default validation for each FormItem is based on the value of its keyboardType prop.
1import { Form, FormItem } from 'react-native-form-component'; 2//... 3 4return ( 5 <Form onButtonPress={() => console.warn('do something')}> 6 <FormItem /> 7 </Form> 8);
Props
| Prop | Function | Type | Default | Platform |
|---|---|---|---|---|
| keyboardVerticalOffset | Distance between the top of the user screen and the Form component, may be non-zero in some use cases. | number | 50 | iOS |
| buttonText | Text to be displayed by submit button | string | Submit | All |
| buttonStyle | Style of submit button | object | object[] | - | All |
| buttonTextStyle | Style of submit button text | object | object[] | - | All |
| onButtonPress | Action to be performed when submit button is pressed | () => void | - | All |
| style | Style Form wrapper | ViewStyle | {} | All |
| hideSubmitButton | To not render the submit button | boolean | false | All |
FormItem
1import React, { useRef } from 'react'; 2import { FormItem } from 'react-native-form-component'; 3//... 4 5const emailInput = useRef(); 6 7return ( 8 //... 9 <FormItem 10 label="Email" 11 isRequired 12 value={email} 13 onChangeText={(email) => setEmail(email)} 14 asterik 15 ref={emailInput} 16 /> 17);
Props
Inherits TextInput Props
| Prop | Function | Type | Required |
|---|---|---|---|
| ref | ref for item | React.Ref | yes |
| value | Value to show for the FormItem | string | yes |
| label | Label for FormItem | string | no |
| labelStyle | Style of label | object | object[] | no |
| textInputStyle | Style of TextInput portion of FormItem | object | object[] | no |
| isRequired | Indicates whethter this item is required or not | boolean | no |
| underneathText | Text just below the FormItem | string | no |
| underneathTextStyle | Style of underneathText | object | object[] | no |
| customValidation | A function used to add custom validation to a FormItem. The function returns an object of the shape {status: boolean, message: string}. status is true when the validation passes and false when it fails. message is the underneath text to be shown when validation fails. | () => {status: boolean, message: string} | no |
| asterik | Whether or not to add an asterik to label | boolean | no |
| children | A ReactElement to render on the left part of the TextInput. Usually an icon | ReactElement | no |
| floatingLabel | Whether or not the label should float | boolean | no |
| textArea | Whether or not the input should be a textArea | boolean | no |
| showErrorIcon | Whether or not to show an icon when an error occurs | boolean | no |
| errorBorderColor | Set the color of the border when an error occurs | string | no |
| showIcon | Icon to be rendered when secureTextEntry is true and you want password to be visible | JSX.Element | no |
| hideIcon | Icon to be rendered when secureTextEntry is true and you want password to be hidden | JSX.Element | no |
Label
1import { Label } from 'react-native-form-component'; 2//... 3 4return ( 5 //... 6 <Label text="repository name" isRequired /> 7);
Props
| Prop | Type | Required |
|---|---|---|
| text | string | yes |
| asterik | boolean | no |
| textStyle | TextStyle | no |
| style | ViewStyle | no |
| asterikStyle | object | object[] | no |
Modal
1import { Modal } from 'react-native-form-component'; 2 3return ( 4 <Modal show isRequired> 5 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 6 <Text>I am inside a modal!</Text> 7 </View> 8 </Modal> 9);
Props
Inherits Modal Props
| Prop | Type | Required |
|---|---|---|
| show | boolean | yes |
| backgroundColor | string | no |
| children | ReactNode | no |
Picker
1import React, { useState } from 'react'; 2import { Picker } from 'react-native-form-component'; 3 4const [number, setNumber] = useState(1); 5 6return ( 7 <Picker 8 items={[ 9 { label: 'One', value: 1 }, 10 { label: 'Two', value: 2 }, 11 { label: 'Three', value: 3 }, 12 ]} 13 label="Pick a number" 14 selectedValue={number} 15 onSelection={(item) => setNumber(item.value)} 16 /> 17);
Props
| Prop | Type | Required |
|---|---|---|
| items | Array<{label: string; value: string | number}> | yes |
| onSelection | (item) => void | yes |
| selectedValue | string | number | yes |
| pickerIcon | ReactNode | no |
| iconWrapperStyle | ViewStyle | no |
| asterik | boolean | no |
| asterikStyle | TextStyle | no |
| label | string | no |
| labelStyle | TextStyle | no |
| labelWrapperStyle | ViewStyle | no |
| placeholder | string | no |
| selectedValueStyle | TextStyle | no |
| buttonStyle | ViewStyle | no |
| itemLabelStyle | TextStyle | no |
| type | "modal" | "dropdown" | no |
PinInput
1import React, { useState } from 'react'; 2import { PinInput } from 'react-native-form-component'; 3 4const [pin, setPin] = useState(''); 5 6return <PinInput numOfInput={4} onChangeText={(text) => setPin(text)} />;
Props
| Prop | Type | Required |
|---|---|---|
| numOfInput | number | yes |
| onChangeText | (text: string) => void | yes |
| textInputStyle | TextStyle | no |
| style | StyleProp | no |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/20 approved changesets -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/ci.yaml:1
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yaml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/klazbaba/react-native-form-component/ci.yaml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/klazbaba/react-native-form-component/ci.yaml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 19 are checked with a SAST tool
Reason
90 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-3q56-9cc2-46j4
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
- Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-x565-32qp-m3vf
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-7jxr-cg7f-gpgv
- Warn: Project is vulnerable to: GHSA-xj72-wvfv-8985
- Warn: Project is vulnerable to: GHSA-ch3r-j5x3-6q2m
- Warn: Project is vulnerable to: GHSA-p5gc-c584-jj6v
- Warn: Project is vulnerable to: GHSA-whpj-8f3w-67p5
- Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5
- Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Score
2.8
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More