Gathering detailed insights and metrics for @ubaids/react-native-material-textfield
Gathering detailed insights and metrics for @ubaids/react-native-material-textfield
Installations
npm install @ubaids/react-native-material-textfieldReleases
Unable to fetch releases
Developer
ubaidjs
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
12.9.1
NPM Version
6.14.7
Statistics
6 Stars
337 Commits
9 Forks
2 Watching
1 Branches
1 Contributors
Updated on 08 Sept 2023
Languages
JavaScript (85.02%)
Objective-C (6.14%)
Ruby (4.08%)
Java (3.86%)
Starlark (0.89%)
Total Downloads
Cumulative downloads
Total Downloads
113,599
Last day
-14.8%
23
Compared to previous day
Last week
-74.6%
87
Compared to previous week
Last month
115.8%
917
Compared to previous month
Last year
-67.1%
9,794
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Versions
react-native-material-textfield
Material texfield with consistent behaviour on iOS and Android
Features
- Material design guidelines compliance
- Consistent look and feel on iOS and Android
- Animated state transitions (normal, focused and errored)
- Customizable font size, colors and animation duration
- Disabled state (with dotted underline)
- Outlined and filled fields
- Masked input support
- Multiline text input
- Character counter
- Prefix and suffix
- Accessory views
- Helper text
- RTL support
- Pure javascript implementation
Installation
1npm install --save @ubaids/react-native-material-textfield
Usage
1import React, { Component } from 'react'; 2import { 3 TextField, 4 FilledTextField, 5 OutlinedTextField, 6} from '@ubaids/react-native-material-textfield'; 7 8class Example extends Component { 9 fieldRef = React.createRef(); 10 11 onSubmit = () => { 12 let { current: field } = this.fieldRef; 13 14 console.log(field.value()); 15 }; 16 17 formatText = (text) => { 18 return text.replace(/[^+\d]/g, ''); 19 }; 20 21 render() { 22 return ( 23 <OutlinedTextField 24 label='Phone number' 25 keyboardType='phone-pad' 26 formatText={this.formatText} 27 onSubmitEditing={this.onSubmit} 28 ref={this.fieldRef} 29 /> 30 ); 31 } 32}
Properties
| name | description | type | default |
|---|---|---|---|
| textColor | Text input color | String | rgba(0, 0, 0, .87) |
| fontSize | Text input font size | Number | 16 |
| labelFontSize | Text field label font size | Number | 12 |
| lineWidth | Text field underline width | Number | 0.5 |
| activeLineWidth | Text field active underline width | Number | 2 |
| disabledLineWidth | Text field disabled underline width | Number | 1 |
| tintColor | Text field accent color | String | rgb(0, 145, 234) |
| baseColor | Text field base color | String | rgba(0, 0, 0, .38) |
| label | Text field label text | String | - |
| title | Text field helper text | String | - |
| prefix | Text field prefix text | String | - |
| suffix | Text field suffix text | String | - |
| error | Text field error text | String | - |
| errorColor | Text field color for errored state | String | rgb(213, 0, 0) |
| lineType | Text field line type | String | solid |
| disabledLineType | Text field line type in disabled state | String | dotted |
| animationDuration | Text field animation duration in ms | Number | 225 |
| characterRestriction | Text field soft limit for character counter | Number | - |
| disabled | Text field availability | Boolean | false |
| editable | Text field text can be edited | Boolean | true |
| multiline | Text filed multiline input | Boolean | false |
| contentInset | Layout configuration object | Object | {...} |
| labelOffset | Label position adjustment | Object | {...} |
| inputContainerStyle | Style for input container view | Object | - |
| containerStyle | Style for container view | Object | - |
| labelTextStyle | Style for label inner Text component | Object | - |
| titleTextStyle | Style for title inner Text component | Object | - |
| affixTextStyle | Style for affix inner Text component | Object | - |
| formatText | Input mask callback | Function | - |
| renderLeftAccessory | Render left input accessory view | Function | - |
| renderRightAccessory | Render right input accessory view | Function | - |
| onChangeText | Change text callback | Function | - |
| onFocus | Focus callback | Function | - |
| onBlur | Blur callback | Function | - |
Other TextInput properties will also work.
Content Inset
| name | description | Normal | Filled | Outlined |
|---|---|---|---|---|
| top | Inset on the top side | 16 | 8 | 0 |
| left | Inset on the left side | 0 | 12 | 12 |
| right | Inset on the right side | 0 | 12 | 12 |
| label | Space between label and TextInput | 4 | 4 | 4 |
| input | Space between line and TextInput | 8 | 8 | 16 |
Label Offset
| name | description | Normal | Filled | Outlined |
|---|---|---|---|---|
| x0 | Horizontal offset for inactive state | 0 | 0 | 0 |
| y0 | Vertical offset for inactive state | 0 | -10 | 0 |
| x1 | Horizontal offset for active state | 0 | 0 | 0 |
| y1 | Vertical offset for active state | 0 | -2 | -10 |
Methods
| name | description | returns |
|---|---|---|
| focus() | Acquire focus | - |
| blur() | Release focus | - |
| clear() | Clear text field | - |
| value() | Get current value | String |
| isFocused() | Get current focus state | Boolean |
| isErrored() | Get current error state | Boolean |
| isRestricted() | Get current restriction state | Boolean |
| isDefaultVisible() | Get default value visibility | Boolean |
| isPlaceholderVisible() | Get placeholder visibility | Boolean |
| setValue() | Set current value | - |
Example
1git clone https://github.com/ubaidjs/react-native-material-textfield.git 2cd react-native-material-textfield/example 3npm install 4npm run ios # or npm run android
Copyright and License
BSD License
Copyright 2017-2019 Alexander Nazarov. All rights reserved.
No vulnerabilities found.
Reason
binaries present in source code
Details
- Warn: binary detected: example/android/gradle/wrapper/gradle-wrapper.jar:1
Reason
license file detected
Details
- Info: project has a license file: license.txt:0
- Warn: project license file does not contain an FSF or OSI license.
Reason
Found 1/29 approved changesets -- score normalized to 0
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
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
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 2 are checked with a SAST tool
Reason
53 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23
- Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6
- Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm
- Warn: Project is vulnerable to: GHSA-327c-qx3v-h673
- Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp
- Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw
- Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-v8v8-6859-qxm4
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv
- 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-gff7-g5r8-mg8m
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.6
/10
Last Scanned on 2024-11-18
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