Skip to content

Commit c6d4ecd

Browse files
ttdung11t2ttdung11t2
committed
init modules
0 parents  commit c6d4ecd

56 files changed

Lines changed: 8138 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (http://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
39+
# Typescript v1 declaration files
40+
typings/
41+
42+
# Optional npm cache directory
43+
.npm
44+
45+
# Optional eslint cache
46+
.eslintcache
47+
48+
# Optional REPL history
49+
.node_repl_history
50+
51+
# Output of 'npm pack'
52+
*.tgz
53+
54+
# Yarn Integrity file
55+
.yarn-integrity
56+
57+
# dotenv environment variables file
58+
.env
59+
60+
# IDEA
61+
.idea
62+
63+
# IML
64+
*.iml
65+
66+
# OSX
67+
.DS_Store
68+

‎.npmignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.idea
2+
.npmignore
3+
example

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2017 Dung Tran
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# react-native-confirmation-code-input
2+
A react-native confirmation code input for both IOS and Android
3+
4+
## Features
5+
- A user-friendly component for inputting confirmation code
6+
- Extended from [<TextInput/>](https://facebook.github.io/react-native/docs/textinput.html) component, so you can use its props
7+
- Built-in type of code input: underline, box, circle
8+
- Set position: center, left, right, fill width
9+
- Set size and active color, inactive color
10+
- Easy to customize style, use base style from TextInput component
11+
- Check code on finish or return code for async checking
12+
- Clear code on fail
13+
- Use React Native ES6
14+
## Screenshots
15+
16+
![underline-28082017](https://thumbs.gfycat.com/InfiniteUnequaledGreendarnerdragonfly-size_restricted.gif)
17+
![box-28082017](https://thumbs.gfycat.com/CourageousFrayedBronco-size_restricted.gif)
18+
![circle-28082017](https://thumbs.gfycat.com/ClearcutAssuredHake-size_restricted.gif)
19+
![full-28082017](https://thumbs.gfycat.com/WeeklyAltruisticBlackbear-size_restricted.gif)
20+
21+
## Installation
22+
23+
```sh
24+
npm install react-native-confirmation-code-input --save
25+
```
26+
27+
## Usage
28+
### Basic
29+
Import this module:
30+
```javascript
31+
import CodeInput from 'react-native-confirmation-code-input';
32+
```
33+
Use as a component and style it:
34+
```javascript
35+
36+
render() {
37+
return (
38+
<CodeInput
39+
ref="codeInputRef1"
40+
secureTextEntry
41+
className={'border-b'}
42+
space={5}
43+
size={30}
44+
inputPosition='left'
45+
onFulfill={(code) => this._onFulfill(code)}
46+
/>
47+
48+
<CodeInput
49+
ref="codeInputRef2"
50+
secureTextEntry
51+
compareWithCode='AsDW2'
52+
activeColor='rgba(49, 180, 4, 1)'
53+
inactiveColor='rgba(49, 180, 4, 1.3)'
54+
autoFocus={false}
55+
ignoreCase={true}
56+
inputPosition='center'
57+
size={50}
58+
onFulfill={(isValid) => this._onFinishCheckingCode1(isValid)}
59+
containerStyle={{ marginTop: 30 }}
60+
codeInputStyle={{ borderWidth: 1.5 }}
61+
/>
62+
63+
<CodeInput
64+
ref="codeInputRef2"
65+
keyboardType="numeric"
66+
codeLength={5}
67+
className='border-circle'
68+
compareWithCode='12345'
69+
autoFocus={false}
70+
codeInputStyle={{ fontWeight: '800' }}
71+
onFulfill={(isValid, code) => this._onFinishCheckingCode2(isValid, code)}
72+
/>
73+
)
74+
}
75+
```
76+
77+
### Customization
78+
79+
### Properties
80+
This component uses the same props as [<TextInput/>](https://facebook.github.io/react-native/docs/textinput.html). Below are additional props for this component:
81+
82+
Prop | Type | Default | Description
83+
---------- | ------- | ---------- | -----------------------
84+
`codeLength` | number | 5 | length of confirmation code -> number of cells
85+
`compareWithCode` | string | | code to compare. if null, onFulfill callback return inputted code to check later
86+
`inputPosition` | string | `center` | position of code input in its container
87+
`size` | number | 40 | size of input cells
88+
`space` | number | 8 | space between 2 cells
89+
`className` | string | `border-box` | Some built-in classname: `border-box`, `border-circle`, `border-b`, `border-b-t`, `border-l-r`
90+
`cellBorderWidth` | number | 1.0 | width of cell borders
91+
`activeColor` | string | `rgba(255, 255, 255, 1)` | color of cells when active
92+
`inactiveColor` | string | `rgba(255, 255, 255, 0.2)` | color of cells when inactive
93+
`ignoreCase` | boolean | `false` | ignore case when checking code
94+
`autoFocus` | boolean | `true` | auto focus on code input
95+
`codeInputStyle` | style object | | custom style for code input
96+
`containerStyle` | style object | | custom style for code input container
97+
`onFulfill` | function | | callback function called when fulfilling code. If `compareWithCode` is null -> return `(code)` in callback, else return `(isValid, code)`. **Required**
98+
99+
## Example
100+
See [EXAMPLE](example)
101+
102+
## License
103+
104+
react-native-confirmation-code-input is released under the MIT license. See [LICENSE](LICENSE) for details.
105+
106+
Any question or support will welcome.

0 commit comments

Comments
 (0)