{"_id":"@agartha/react-native-confirmation-code-input","_rev":"4-72ca42f6d1248841bb82d0c2839ff947","name":"@agartha/react-native-confirmation-code-input","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@agartha/react-native-confirmation-code-input","version":"0.1.0","description":"A react-native component to input confirmation code for both Android and IOS","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","react-component","react-native","react-native-component","android","ios","code-input","confirmation-code","pin-code","confirmation-code-input","pin-code-input"],"dependencies":{"lodash":"^4.17.4","prop-types":"^15.5.10"},"homepage":"https://github.com/ttdung11t2/react-native-confirmation-code-input.git","bugs":{"url":"https://github.com/ttdung11t2/react-native-confirmation-code-input.git/issues","email":"ttdung001@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/ttdung11t2/react-native-confirmation-code-input.git"},"author":{"name":"Dung Tran","email":"ttdung001@gmail.com"},"contributors":[{"name":"Kim Brandwijk","email":"kim.brandwijk@gmail.com"}],"license":"MIT","gitHead":"46b820384d0221a0cd2c2d7aa65b9dcd674c5832","_id":"@agartha/react-native-confirmation-code-input@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"9.0.0","_npmUser":{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"},"dist":{"integrity":"sha512-I2BTF9RbGpbHiQpNdHsmoe2bCJQtWkjGl1+Kpfvcm8i9iur/ZJ21ApR0GQ8AY3CZE9vH12R03LYnGd/+KxwtLw==","shasum":"62797b6d9cbc617b44dcf37f6c39ccb5e4bf02c4","tarball":"https://registry.npmjs.org/@agartha/react-native-confirmation-code-input/-/react-native-confirmation-code-input-0.1.0.tgz","fileCount":6,"unpackedSize":15978,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTPwKvk4zt7x0tm7oEf8+R8vvfjW/hE2a36Wg9eAov1AiEAvtaye+U2ADJoj4xcPMIGZfB8KfD6034YfuJ/79cPAs4="}]},"maintainers":[{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-confirmation-code-input_0.1.0_1519602818811_0.5868994831102192"},"_hasShrinkwrap":false},"0.1.1":{"name":"@agartha/react-native-confirmation-code-input","version":"0.1.1","description":"A react-native component to input confirmation code for both Android and IOS","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","react-component","react-native","react-native-component","android","ios","code-input","confirmation-code","pin-code","confirmation-code-input","pin-code-input"],"dependencies":{"lodash":"^4.17.4","prop-types":"^15.5.10"},"homepage":"https://github.com/ttdung11t2/react-native-confirmation-code-input.git","bugs":{"url":"https://github.com/ttdung11t2/react-native-confirmation-code-input.git/issues","email":"ttdung001@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/ttdung11t2/react-native-confirmation-code-input.git"},"author":{"name":"Dung Tran","email":"ttdung001@gmail.com"},"contributors":[{"name":"Kim Brandwijk","email":"kim.brandwijk@gmail.com"}],"license":"MIT","gitHead":"46b820384d0221a0cd2c2d7aa65b9dcd674c5832","_id":"@agartha/react-native-confirmation-code-input@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"9.0.0","_npmUser":{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"},"dist":{"integrity":"sha512-g+u5GwkcJxgHykAsfraTZAtESJqxMkItXfBNb/4uw8cmgUAaKjbyvYZk4LJrFa0/8OVouaNbNwWXn3xp2laa4g==","shasum":"aeecb8a5201811a8c0d5a94d65886b7f96eb84a1","tarball":"https://registry.npmjs.org/@agartha/react-native-confirmation-code-input/-/react-native-confirmation-code-input-0.1.1.tgz","fileCount":6,"unpackedSize":16259,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIELOG5kLjlw+4slxuuXIHETQJbeefTOVAWeZDVrE7S/dAiEA+ZxV84s5gK0UyzQbO1FM4ScWCpXzkuIGU5KWFhikbTk="}]},"maintainers":[{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-confirmation-code-input_0.1.1_1519605588086_0.33419405855651596"},"_hasShrinkwrap":false},"0.1.2":{"name":"@agartha/react-native-confirmation-code-input","version":"0.1.2","description":"A react-native component to input confirmation code for both Android and IOS","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["react","react-component","react-native","react-native-component","android","ios","code-input","confirmation-code","pin-code","confirmation-code-input","pin-code-input"],"dependencies":{"lodash":"^4.17.4","prop-types":"^15.5.10"},"homepage":"https://github.com/ttdung11t2/react-native-confirmation-code-input.git","bugs":{"url":"https://github.com/ttdung11t2/react-native-confirmation-code-input.git/issues","email":"ttdung001@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/ttdung11t2/react-native-confirmation-code-input.git"},"author":{"name":"Dung Tran","email":"ttdung001@gmail.com"},"contributors":[{"name":"Kim Brandwijk","email":"kim.brandwijk@gmail.com"}],"license":"MIT","gitHead":"46b820384d0221a0cd2c2d7aa65b9dcd674c5832","_id":"@agartha/react-native-confirmation-code-input@0.1.2","_npmVersion":"5.6.0","_nodeVersion":"9.0.0","_npmUser":{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"},"dist":{"integrity":"sha512-x6WujzreuaBCLFS/M/E3z6caMbf0sCn8HbqZEcdLGu5sbb2KhLXwF2g/jUw5XaYKtYed5MpfLixg5UVvfTAvMw==","shasum":"e0118c9efeac4b132b67de6c9d313267a2cf5456","tarball":"https://registry.npmjs.org/@agartha/react-native-confirmation-code-input/-/react-native-confirmation-code-input-0.1.2.tgz","fileCount":6,"unpackedSize":16154,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1uYEUFdUGHXtYuXQ4jKU/LFajAfBMe3BIzkZn0jvCSQIgS7X8OZLtN/Je+0VV9nrH6jWKN2tMDOxzMvcIMd6pGKE="}]},"maintainers":[{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-confirmation-code-input_0.1.2_1519605732904_0.9385520742511473"},"_hasShrinkwrap":false}},"time":{"created":"2018-02-25T23:53:38.755Z","0.1.0":"2018-02-25T23:53:38.858Z","modified":"2022-04-04T11:53:56.399Z","0.1.1":"2018-02-26T00:39:48.149Z","0.1.2":"2018-02-26T00:42:13.016Z"},"maintainers":[{"name":"kbrandwijk","email":"kim.brandwijk@gmail.com"}],"description":"A react-native component to input confirmation code for both Android and IOS","homepage":"https://github.com/ttdung11t2/react-native-confirmation-code-input.git","keywords":["react","react-component","react-native","react-native-component","android","ios","code-input","confirmation-code","pin-code","confirmation-code-input","pin-code-input"],"repository":{"type":"git","url":"git+https://github.com/ttdung11t2/react-native-confirmation-code-input.git"},"contributors":[{"name":"Kim Brandwijk","email":"kim.brandwijk@gmail.com"}],"author":{"name":"Dung Tran","email":"ttdung001@gmail.com"},"bugs":{"url":"https://github.com/ttdung11t2/react-native-confirmation-code-input.git/issues","email":"ttdung001@gmail.com"},"license":"MIT","readme":"# react-native-confirmation-code-input\r\nA react-native confirmation code input for both IOS and Android\r\n\r\n## Features\r\n- A user-friendly component for inputting confirmation code\r\n- Extended from [<TextInput/>](https://facebook.github.io/react-native/docs/textinput.html) component, so you can use its props\r\n- Built-in type of code input: underline, box, circle\r\n- Set position: center, left, right, full width\r\n- Set size and active color, inactive color\r\n- Easy to customize style, use base style from TextInput component\r\n- Check code on finish or return code for async checking\r\n- Clear code on fail\r\n- Use React Native ES6\r\n## Screenshots\r\n\r\n![underline-28082017](https://thumbs.gfycat.com/InfiniteUnequaledGreendarnerdragonfly-size_restricted.gif)\r\n![box-28082017](https://thumbs.gfycat.com/CourageousFrayedBronco-size_restricted.gif)\r\n![circle-28082017](https://thumbs.gfycat.com/ClearcutAssuredHake-size_restricted.gif)\r\n![full-28082017](https://thumbs.gfycat.com/WeeklyAltruisticBlackbear-size_restricted.gif)\r\n\r\n## Installation\r\n\r\n```sh\r\nnpm install react-native-confirmation-code-input --save\r\n```\r\n\r\n## Usage\r\n### Basic\r\nImport this module:  \r\n```javascript\r\nimport CodeInput from 'react-native-confirmation-code-input';\r\n```\r\nUse as a component and style it:  \r\n```javascript\r\n\r\nrender() {\r\n  return (\r\n    <CodeInput\r\n      ref=\"codeInputRef1\"\r\n      secureTextEntry\r\n      className={'border-b'}\r\n      space={5}\r\n      size={30}\r\n      inputPosition='left'\r\n      onFulfill={(code) => this._onFulfill(code)}\r\n    />\r\n    \r\n    <CodeInput\r\n      ref=\"codeInputRef2\"\r\n      secureTextEntry\r\n      compareWithCode='AsDW2'\r\n      activeColor='rgba(49, 180, 4, 1)'\r\n      inactiveColor='rgba(49, 180, 4, 1.3)'\r\n      autoFocus={false}\r\n      ignoreCase={true}\r\n      inputPosition='center'\r\n      size={50}\r\n      onFulfill={(isValid) => this._onFinishCheckingCode1(isValid)}\r\n      containerStyle={{ marginTop: 30 }}\r\n      codeInputStyle={{ borderWidth: 1.5 }}\r\n    />\r\n    \r\n    <CodeInput\r\n      ref=\"codeInputRef2\"\r\n      keyboardType=\"numeric\"\r\n      codeLength={5}\r\n      className='border-circle'\r\n      compareWithCode='12345'\r\n      autoFocus={false}\r\n      codeInputStyle={{ fontWeight: '800' }}\r\n      onFulfill={(isValid, code) => this._onFinishCheckingCode2(isValid, code)}\r\n    />\r\n  )\r\n}\r\n```\r\n\r\n### props\r\nThis component uses the same props as [<TextInput/>](https://facebook.github.io/react-native/docs/textinput.html). Below are additional props for this component:  \r\n\r\nProp       | Type    | Default    | Description\r\n---------- | ------- | ---------- | -----------------------\r\n`codeLength`        | number   | 5            | length of confirmation code -> number of cells\r\n`compareWithCode`   | string   |              | code to compare. if null, onFulfill callback return inputted code to check later\r\n`inputPosition`     | string   | `center`     | position of code input in its container: `left`, `right`, `center`, `full-width`\r\n`size`              | number   | 40           | size of input cells\r\n`space`             | number   | 8            | space between 2 cells\r\n`className`         | string   | `border-box` | Some built-in classname: `border-box`, `border-circle`, `border-b`, `border-b-t`, `border-l-r`\r\n`cellBorderWidth`   | number   | 1.0          | width of cell borders\r\n`activeColor`       | string   | `rgba(255, 255, 255, 1)`   | color of cells when active\r\n`inactiveColor`     | string   | `rgba(255, 255, 255, 0.2)` | color of cells when inactive\r\n`ignoreCase`        | boolean  | `false`      | ignore case when checking code\r\n`autoFocus`         | boolean  | `true`       | auto focus on code input\r\n`codeInputStyle`    | style object   |        | custom style for code input\r\n`containerStyle`    | style object   |        | custom style for code input container\r\n`onFulfill`         | function |              | callback function called when fulfilling code. If `compareWithCode` is null -> return `(code)` in callback, else return `(isValid, code)`. **Required**\r\n\r\n## functions\r\nclear input:\r\n```javascript\r\nthis.refs.refName.clear();\r\n...\r\n<CodeInput \r\n    ...\r\n    ref=\"refName\"\r\n/>\r\n```\r\n## Example\r\nSee [EXAMPLE](example)\r\n```sh\r\ngit clone https://github.com/ttdung11t2/react-native-confirmation-code-input.git\r\ncd react-native-confirmation-code-input/example\r\nnpm install\r\nreact-native run-ios / react-native run-android\r\n```\r\n## License\r\n\r\nreact-native-confirmation-code-input is released under the MIT license. See [LICENSE](LICENSE) for details.  \r\n  \r\nAny question or support will welcome.","readmeFilename":"README.md"}