diff --git a/Example/App.tsx b/Example/App.tsx
index 1448260..481596a 100755
--- a/Example/App.tsx
+++ b/Example/App.tsx
@@ -35,14 +35,14 @@ export default class App extends Component<{}, { isFourDigit: boolean }> {
{this.state.isFourDigit ? (
) : (
-
+
)}
);
diff --git a/Example/package.json b/Example/package.json
index 5a3b0c6..bbcc08a 100755
--- a/Example/package.json
+++ b/Example/package.json
@@ -11,7 +11,7 @@
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.5",
- "react-native-keyevent": "0.2.2"
+ "react-native-keyevent": "0.2.6"
},
"devDependencies": {
"@babel/core": "^7.5.0",
diff --git a/Example/yarn.lock b/Example/yarn.lock
index cb59c46..08a28a1 100644
--- a/Example/yarn.lock
+++ b/Example/yarn.lock
@@ -4938,10 +4938,10 @@ react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
-react-native-keyevent@0.2.2:
- version "0.2.2"
- resolved "https://registry.yarnpkg.com/react-native-keyevent/-/react-native-keyevent-0.2.2.tgz#9bc8a910b5a680a707a9c1db0782857fae145517"
- integrity sha512-uKeZTsiGnEyvX95AbQx8Nupxn3oFjk2Pj0R8S5yfycAhrYgBfssDdXEN544nX9z161Qgm70GFJmIij8Xl4PHsQ==
+react-native-keyevent@0.2.6:
+ version "0.2.6"
+ resolved "https://registry.yarnpkg.com/react-native-keyevent/-/react-native-keyevent-0.2.6.tgz#8e88c98e16bd1dde5db3954e6c104cf3c9a98e35"
+ integrity sha512-kW3BMgFGPX1HHVYSebw2bTNb11Z+yclLKN84CO5pzFG99Qx9Do+28LXVQ3uJKK7J5amoNo/pKiySROXA3q9O3A==
react-native@0.60.5:
version "0.60.5"
diff --git a/docs/API.md b/docs/API.md
index 14adeab..13587fb 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -1,23 +1,23 @@
# API
-| Method | Type | Required | Default | Description |
-| --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------- |
-| autoCapitalize | string | false | 'none' | |
-| 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) |
+| Method | Type | Required | Default | Description |
+| --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| autoCapitalize | string | false | 'none' | |
+| 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](#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) |
# Methods
diff --git a/package.json b/package.json
index d547a91..fa314c0 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
"@react-native-community/bob": "0.7.0",
"@types/jest": "24.0.23",
"@types/react": "16.9.15",
- "@types/react-native": "0.60.23",
+ "@types/react-native": "0.60.24",
"@types/react-test-renderer": "16.9.1",
"babel-jest": "24.9.0",
"codecov": "3.6.1",
diff --git a/src/index.tsx b/src/index.tsx
index d867a20..5e165ea 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -27,6 +27,18 @@ import { ActionTypes, OtpInputsRef, ReducerState, Actions, KeyEventType } from '
import { fillOtpCode } from './helpers';
type Props = TextInputProps & {
+ keyboardType:
+ | 'default'
+ | 'email-address'
+ | 'phone-pad'
+ | 'visible-password'
+ | 'ascii-capable'
+ | 'numbers-and-punctuation'
+ | 'url'
+ | 'name-phone-pad'
+ | 'twitter'
+ | 'web-search'
+ | undefined;
style?: StyleProp;
focusStyles?: StyleProp;
defaultValue?: string;
@@ -83,20 +95,36 @@ const reducer = (state: ReducerState, action: Actions) => {
const OtpInputs = forwardRef(
(
{
- autoCapitalize,
- clearTextOnFocus,
+ autoCapitalize = 'none',
+ clearTextOnFocus = false,
defaultValue,
- focusStyles,
- handleChange,
- inputContainerStyles,
- inputStyles,
- isRTL,
- keyboardType,
- numberOfInputs,
- placeholder,
- secureTextEntry,
- selectTextOnFocus,
- style,
+ focusStyles = {
+ borderColor: '#00f',
+ },
+ handleChange = console.log,
+ inputContainerStyles = {
+ borderBottomWidth: 1,
+ height: 53,
+ margin: 10,
+ },
+ inputStyles = {
+ fontSize: 24,
+ paddingTop: 10,
+ textAlign: 'center',
+ width: 40,
+ },
+ isRTL = false,
+ keyboardType = 'phone-pad',
+ numberOfInputs = 4,
+ placeholder = '',
+ secureTextEntry = false,
+ selectTextOnFocus = true,
+ style = {
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
testIDPrefix = 'otpInput',
...restProps
},
@@ -290,37 +318,3 @@ const OtpInputs = forwardRef(
export { OtpInputsRef };
export default OtpInputs;
-
-// @ts-ignore
-OtpInputs.defaultProps = {
- autoCapitalize: 'none',
- clearTextOnFocus: false,
- handleChange: console.log,
- keyboardType: 'phone-pad',
- numberOfInputs: 4,
- secureTextEntry: false,
- selectTextOnFocus: true,
- testIDPrefix: 'otpInput',
- isRTL: false,
- placeholder: '',
- style: {
- flex: 1,
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: 'space-between',
- },
- focusStyles: {
- borderColor: '#00f',
- },
- inputStyles: {
- fontSize: 24,
- paddingTop: 10,
- textAlign: 'center',
- width: 40,
- },
- inputContainerStyles: {
- borderBottomWidth: 1,
- height: 53,
- margin: 10,
- },
-};
diff --git a/yarn.lock b/yarn.lock
index 7aa3457..2050b00 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1198,10 +1198,10 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
-"@types/react-native@0.60.23":
- version "0.60.23"
- resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.23.tgz#9270f91bbff822a1571feece56cd260f0a1b2831"
- integrity sha512-hLRCWKNni/e6KEXSNtexXCg0u7CnHla6G6yeZYTMOlyG/bLE41GeLxP4dXJw1hyDsXJYN00Wc3Apr2XQ2TW1LA==
+"@types/react-native@0.60.24":
+ version "0.60.24"
+ resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.24.tgz#0648aff3a910f29b8a892cecd0ec3199697bd31f"
+ integrity sha512-wI4C39mrEWpnx2JHCGsDKKcB22CNCKUWjLO6Mwt2yzgKD7crawuTjeHpBej/OiD/3df2X8rluuSmJ1xRcOZNAg==
dependencies:
"@types/prop-types" "*"
"@types/react" "*"