Skip to content

Commit

Permalink
Remove keyevent form peerDependencies
Browse files Browse the repository at this point in the history
  • Loading branch information
kantorm authored and Damian Sznajder committed Jan 28, 2020
1 parent 6b820cb commit 8de9325
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 67 deletions.
41 changes: 7 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,48 +21,21 @@
| 0.57.0 - 0.58.6 | yarn add [email protected] |
| +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 (
<View style={styles.container}>
<OtpInputs handleChange={code => console.log(code)} numberOfInputs={6} />
<OtpInputs
handleChange={code => console.log(code)}
numberOfInputs={6}
/>
</View>
);
}
Expand Down
50 changes: 27 additions & 23 deletions docs/API.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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();
Expand All @@ -52,7 +52,11 @@ export default class App extends Component {
<View style={styles.container}>
<Button title="Reset" onPress={this.resetOTP} />
<Button title="Focus" onPress={this.focusOTP} />
<OtpInputs ref={this.otpRef} handleChange={code => console.log(code)} numberOfInputs={6} />
<OtpInputs
ref={this.otpRef}
handleChange={code => console.log(code)}
numberOfInputs={6}
/>
</View>
);
}
Expand Down
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,7 @@
],
"peerDependencies": {
"react": "*",
"react-native": ">= 0.57.0 < 1",
"react-native-keyevent": "0.2.7"
"react-native": ">= 0.57.0 < 1"
},
"jest": {
"testEnvironment": "node",
Expand Down
8 changes: 0 additions & 8 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6892,7 +6892,6 @@ npm@^6.13.4:
cmd-shim "^3.0.3"
columnify "~1.5.4"
config-chain "^1.1.12"
debuglog "*"
detect-indent "~5.0.0"
detect-newline "^2.1.0"
dezalgo "~1.0.3"
Expand All @@ -6907,7 +6906,6 @@ npm@^6.13.4:
has-unicode "~2.0.1"
hosted-git-info "^2.8.5"
iferr "^1.0.2"
imurmurhash "*"
infer-owner "^1.0.4"
inflight "~1.0.6"
inherits "^2.0.4"
Expand All @@ -6926,14 +6924,8 @@ npm@^6.13.4:
libnpx "^10.2.0"
lock-verify "^2.1.0"
lockfile "^1.0.4"
lodash._baseindexof "*"
lodash._baseuniq "~4.6.0"
lodash._bindcallback "*"
lodash._cacheindexof "*"
lodash._createcache "*"
lodash._getnative "*"
lodash.clonedeep "~4.5.0"
lodash.restparam "*"
lodash.union "~4.6.0"
lodash.uniq "~4.5.0"
lodash.without "~4.4.0"
Expand Down

0 comments on commit 8de9325

Please sign in to comment.