├── .editorconfig ├── .gitattributes ├── .gitignore ├── LICENSE ├── README.md ├── assets ├── close-button.png ├── cross.png ├── delete.png └── fingerprint.png ├── index.js ├── package.json ├── screenshots ├── blue.png └── second.png └── static └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # OSX 3 | # 4 | .DS_Store 5 | 6 | # node.js 7 | # 8 | node_modules/ 9 | npm-debug.log 10 | yarn-error.log 11 | 12 | 13 | # Xcode 14 | # 15 | build/ 16 | *.pbxuser 17 | !default.pbxuser 18 | *.mode1v3 19 | !default.mode1v3 20 | *.mode2v3 21 | !default.mode2v3 22 | *.perspectivev3 23 | !default.perspectivev3 24 | xcuserdata 25 | *.xccheckout 26 | *.moved-aside 27 | DerivedData 28 | *.hmap 29 | *.ipa 30 | *.xcuserstate 31 | project.xcworkspace 32 | 33 | 34 | # Android/IntelliJ 35 | # 36 | build/ 37 | .idea 38 | .gradle 39 | local.properties 40 | *.iml 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Danagul Otel 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # react-native-code-verification 3 | An UI module for user-side pincode verification. 4 | 5 | ## Getting started 6 | 7 | `$ npm i react-native-code-verification --s` 8 | 9 | ### Props 10 | | Name | Type | Description | Default | 11 | | ---- | :---: | --- | --- | 12 | | ```descriptionText``` | String | A description text | Please enter pincode for entry 13 | | ```spaceColor``` | Color | Color of line under digit | #FF0000 14 | | ```closeButtonColor``` | Color | Color of X - close button | #FF0000 15 | | ```onEnteredPincode``` | Function | A function that returns entered code | - 16 | | ```onCloseView``` | Function | On press close button, will be useful to close view | - 17 | | ```onPressTouchId``` | Function | Touch Id is not available, but you can make it by yourself | - 18 | | ```withTouchId``` | Boolean | If you do not neet touch id, you can set it to false | TRUE 19 | 20 | ## Screenshots 21 | 22 | 23 | ## Usage 24 | ```javascript 25 | import Pincode from 'react-native-code-verification'; 26 | 27 | // TODO: What to do with the module? 28 | class Example extends Component { 29 | public render() { 30 | return ( 31 | 32 | this.onDetectPin(pin)} /> 33 | 34 | ); 35 | } 36 | private onDetectPin = pin => { 37 | console.log('pinCode>>>', pin); 38 | }; 39 | } 40 | ``` 41 | 42 | ## Credentials 43 | [MIT](http://opensource.org/licenses/mit-license.html), [Otel Danagul](https://github.com/danchokobo) 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /assets/close-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danchokobo/react-native-code-verification/17746b355d04a10d35d1c5535692b85550045e25/assets/close-button.png -------------------------------------------------------------------------------- /assets/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danchokobo/react-native-code-verification/17746b355d04a10d35d1c5535692b85550045e25/assets/cross.png -------------------------------------------------------------------------------- /assets/delete.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danchokobo/react-native-code-verification/17746b355d04a10d35d1c5535692b85550045e25/assets/delete.png -------------------------------------------------------------------------------- /assets/fingerprint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danchokobo/react-native-code-verification/17746b355d04a10d35d1c5535692b85550045e25/assets/fingerprint.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { 3 | StyleSheet, 4 | View, 5 | FlatList, 6 | Text, 7 | TouchableOpacity, 8 | Image 9 | } from 'react-native'; 10 | import { fingerprintIcon, deleteIcon, closeIcon } from './static'; 11 | 12 | const arrayOfNumbers = [ 13 | { key: 1 }, 14 | { key: 2 }, 15 | { 16 | key: 3 17 | }, 18 | { key: 4 }, 19 | { key: 5 }, 20 | { key: 6 }, 21 | { key: 7 }, 22 | { key: 8 }, 23 | { key: 9 }, 24 | { key: 10 }, 25 | { key: 0 }, 26 | { key: 12 } 27 | ]; 28 | 29 | const empties = [ 30 | { key: 1, value: ' ' }, 31 | { key: 2, value: ' ' }, 32 | { key: 3, value: ' ' }, 33 | { key: 4, value: ' ' } 34 | ]; 35 | 36 | let counter = 0; 37 | 38 | export default class App extends Component { 39 | state = { 40 | code: '', 41 | digitDisabled: false, 42 | clearDisabled: false 43 | }; 44 | 45 | onEnterDigit = (num, index) => { 46 | const { code } = this.state; 47 | if (counter + 1 <= 4) { 48 | counter++; 49 | empties[counter - 1].value = num; 50 | this.setState({ 51 | clearDisabled: false 52 | }); 53 | } 54 | if (counter === 4) { 55 | this.props.onEnteredPincode(this.joinElements()); 56 | this.setState({ 57 | digitDisabled: true 58 | }); 59 | } 60 | }; 61 | 62 | joinElements = () => { 63 | let pincode = ''; 64 | empties.forEach(item => { 65 | pincode += `${item.value}`; 66 | }); 67 | return pincode; 68 | }; 69 | onRemoveDigit = () => { 70 | if (counter - 1 >= 0) { 71 | --counter; 72 | empties[counter].value = ' '; 73 | this.setState({ 74 | digitDisabled: false 75 | }); 76 | } else { 77 | this.setState({ 78 | allowClear: true 79 | }); 80 | } 81 | }; 82 | 83 | renderItemCell = ({ item, index }) => { 84 | const { withTouchId = true } = this.props; 85 | if (index === 9) { 86 | if(withTouchId) { 87 | return ( 88 | this.props.onPressTouchId()} > 89 | 90 | 91 | ); 92 | }else{ 93 | return ; 94 | } 95 | 96 | } else if (index === 11) { 97 | return ( 98 | 103 | 104 | 105 | ); 106 | } else { 107 | return ( 108 | this.onEnterDigit(item.key)} 111 | disabled={this.state.digitDisabled} 112 | > 113 | {item.key} 114 | 115 | ); 116 | } 117 | }; 118 | render() { 119 | const { spaceColor, closeButtonColor } = this.props; 120 | return ( 121 | 122 | this.props.onCloseView()} > 123 | 124 | 125 | 126 | {empties.map(item => ( 127 | 128 | {item.value} 129 | 130 | 131 | ))} 132 | 133 | 134 | 135 | {this.props.descriptionText || 'Please enter pincode for entry'} 136 | 137 | 138 | 139 | 145 | 146 | 147 | ); 148 | } 149 | } 150 | 151 | const styles = StyleSheet.create({ 152 | container: { 153 | flex: 1 154 | }, 155 | centerAlignment: { 156 | justifyContent: 'center', 157 | alignItems: 'center' 158 | }, 159 | enterView: { 160 | alignSelf: 'center', 161 | marginBottom: 15, 162 | flexDirection: 'row', 163 | flex: 2, 164 | justifyContent: 'flex-end', 165 | alignItems: 'center' 166 | }, 167 | flatcontainer: { 168 | flex: 6 169 | }, 170 | flatlist: { 171 | alignSelf: 'center' 172 | }, 173 | icon: { 174 | height: 24, 175 | width: 24 176 | }, 177 | round: { 178 | width: 60, 179 | height: 60, 180 | backgroundColor: '#E8E8E8', 181 | borderRadius: 30, 182 | margin: 10 183 | }, 184 | instruction: { 185 | marginHorizontal: 30, 186 | textAlign: 'center', 187 | color: 'gray', 188 | fontSize: 14 189 | }, 190 | close: { 191 | marginTop: 30, 192 | marginLeft: 15 193 | }, 194 | digit: { 195 | fontSize: 24 196 | }, 197 | digitView: { 198 | flexDirection: 'column', 199 | alignItems: 'center' 200 | }, 201 | redSpace: { 202 | height: 2, 203 | width: 40, 204 | marginHorizontal: 5 205 | }, 206 | textView: { 207 | flex: 0.5, 208 | marginBottom: 10 209 | }, 210 | deleteIcon: { 211 | height: 20, 212 | width: 20 213 | } 214 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "name": "react-native-code-verification", 4 | "version": "1.0.7", 5 | "description": "Nice view for pincode checker with num keypad", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [ 11 | "react-native" 12 | ], 13 | "author": "Danagul Otel", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react-native": "^0.41.2", 17 | "react-native-windows": "0.41.0-rc.1" 18 | 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /screenshots/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danchokobo/react-native-code-verification/17746b355d04a10d35d1c5535692b85550045e25/screenshots/blue.png -------------------------------------------------------------------------------- /screenshots/second.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/danchokobo/react-native-code-verification/17746b355d04a10d35d1c5535692b85550045e25/screenshots/second.png -------------------------------------------------------------------------------- /static/index.js: -------------------------------------------------------------------------------- 1 | export const fingerprintIcon = { src: require('../assets/fingerprint.png') }; 2 | export const deleteIcon = { src: require('../assets/delete.png') }; 3 | export const closeIcon = { src: require('../assets/cross.png') }; 4 | --------------------------------------------------------------------------------