diff --git a/README.md b/README.md index c90e053..88c93b9 100644 --- a/README.md +++ b/README.md @@ -21,48 +21,21 @@ | 0.57.0 - 0.58.6 | yarn add react-native-otp-inputs@3.2.2 | | +0.59.0 | yarn add react-native-otp-inputs | -### Android additional steps - -Android setup requires [react-native-keyevent](https://github.com/kevinejohn/react-native-keyevent) package to work properly. - -1. If you are using react-native < 0.60.0 then [follow these steps](https://github.com/kevinejohn/react-native-keyevent#linking-android) -1. If you are using react-native >= 0.60.0 then add this to your dependencies in `react-native.config.js` - -```javascript -// react-native.config.js -module.exports = { - dependencies: { - 'react-native-keyevent': { - platforms: { - ios: null, - }, - }, - }, -}; -``` - -3. Add `react-native-keyevent` to your dependencies with - -```bash -yarn add react-native-keyevent -``` - -4. Then follow configuration for Android [here](https://github.com/kevinejohn/react-native-keyevent#configuration) (If you have problems, check [Example App](./Example/android/app/src/main/java/com/example/MainActivity.java) configuration) - -### [Migration to v4](./docs/Migration.md) - ## Basic usage ```js -import React, { Component } from 'react'; -import { View } from 'react-native'; -import OtpInputs from 'react-native-otp-inputs'; +import React, { Component } from "react"; +import { View } from "react-native"; +import OtpInputs from "react-native-otp-inputs"; export default class App extends Component { render() { return ( - console.log(code)} numberOfInputs={6} /> + console.log(code)} + numberOfInputs={6} + /> ); } diff --git a/docs/API.md b/docs/API.md index d93d741..167f443 100644 --- a/docs/API.md +++ b/docs/API.md @@ -1,24 +1,24 @@ # API -| Method | Type | Required | Default | Description | -| --------------------- | -------------- | ----------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| autoCapitalize | string | false | 'none' | | -| autofillFromClipboard | boolean | false | true | You can set it to `false` if want to switch off autofill from clipboard. | -| clearTextOnFocus | boolean | false | false | | -| defaultValue | string | false | | Sets default value for otp inputs | -| handleChange | function | true | console.log | Returns otp code. | -| keyboardType | string | true | 'phone-pad' | Do not use `numeric` `number-pad` or `decimal-pad` for android as it [won't work on android correctly](https://github.com/dsznajder/react-native-otp-inputs/issues/213) | -| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. | -| secureTextEntry | boolean | false | false | | -| selectTextOnFocus | boolean | false | true [iOS Only](./src/OtpInput.tsx#L56) | | -| testIDPrefix | string | false | otpInput-\${inputIndex} | Prefix for testID. | -| isRTL | boolean | false | false | Preferably I18nManager.isRTL. | -| placeholder | string | false | | Placeholder for the input boxes. | -| style | style (object) | false | [default](./src/index.tsx#L275) | Applied to whole container. | -| focusStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to the input on focus. | -| inputStyles | style(object) | false | [default](./src/index.tsx#L275) | Applied to single input. | -| inputContainerStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to each input container. | -| ...restTextInputProps | | | | [TextInput](https://facebook.github.io/react-native/docs/textinput) | +| Method | Type | Required | Default | Description | +| --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------------ | +| autoCapitalize | string | false | 'none' | | +| autofillFromClipboard | boolean | false | true | You can set it to `false` if want to switch off autofill from clipboard. | +| clearTextOnFocus | boolean | false | false | | +| defaultValue | string | false | | Sets default value for otp inputs | +| handleChange | function | true | console.log | Returns otp code. | +| keyboardType | string | true | 'phone-pad' | | +| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. | +| secureTextEntry | boolean | false | false | | +| selectTextOnFocus | boolean | false | true [iOS Only](./src/OtpInput.tsx#L56) | | +| testIDPrefix | string | false | otpInput-\${inputIndex} | Prefix for testID. | +| isRTL | boolean | false | false | Preferably I18nManager.isRTL. | +| placeholder | string | false | | Placeholder for the input boxes. | +| style | style (object) | false | [default](./src/index.tsx#L275) | Applied to whole container. | +| focusStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to the input on focus. | +| inputStyles | style(object) | false | [default](./src/index.tsx#L275) | Applied to single input. | +| inputContainerStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to each input container. | +| ...restTextInputProps | | | | [TextInput](https://facebook.github.io/react-native/docs/textinput) | # Methods @@ -32,9 +32,9 @@ Those can be called on ref: ## Example ```js -import React, { Component } from 'react'; -import { Button, View } from 'react-native'; -import OtpInputs from 'react-native-otp-inputs'; +import React, { Component } from "react"; +import { Button, View } from "react-native"; +import OtpInputs from "react-native-otp-inputs"; export default class App extends Component { otpRef = React.createRef(); @@ -52,7 +52,11 @@ export default class App extends Component {