Skip to content

Commit 5d64348

Browse files
author
Damian Sznajder
committed
🐛 Restrict keyboardTypes
1 parent 1540426 commit 5d64348

File tree

7 files changed

+71
-77
lines changed

7 files changed

+71
-77
lines changed

‎Example/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@ export default class App extends Component<{}, { isFourDigit: boolean }> {
3535
{this.state.isFourDigit ? (
3636
<OtpInputs
3737
ref={this.otpRef}
38-
keyboardType="number-pad"
38+
keyboardType="phone-pad"
3939
numberOfInputs={4}
4040
selectTextOnFocus={false}
4141
clearTextOnFocus
4242
defaultValue="1234"
4343
/>
4444
) : (
45-
<OtpInputs keyboardType="number-pad" ref={this.otpRef} numberOfInputs={6} />
45+
<OtpInputs keyboardType="phone-pad" ref={this.otpRef} numberOfInputs={6} />
4646
)}
4747
</SafeAreaView>
4848
);

‎Example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"dependencies": {
1212
"react": "16.8.6",
1313
"react-native": "0.60.5",
14-
"react-native-keyevent": "0.2.2"
14+
"react-native-keyevent": "0.2.6"
1515
},
1616
"devDependencies": {
1717
"@babel/core": "^7.5.0",

‎Example/yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4938,10 +4938,10 @@ react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
49384938
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
49394939
integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
49404940

4941-
react-native-keyevent@0.2.2:
4942-
version "0.2.2"
4943-
resolved "https://registry.yarnpkg.com/react-native-keyevent/-/react-native-keyevent-0.2.2.tgz#9bc8a910b5a680a707a9c1db0782857fae145517"
4944-
integrity sha512-uKeZTsiGnEyvX95AbQx8Nupxn3oFjk2Pj0R8S5yfycAhrYgBfssDdXEN544nX9z161Qgm70GFJmIij8Xl4PHsQ==
4941+
react-native-keyevent@0.2.6:
4942+
version "0.2.6"
4943+
resolved "https://registry.yarnpkg.com/react-native-keyevent/-/react-native-keyevent-0.2.6.tgz#8e88c98e16bd1dde5db3954e6c104cf3c9a98e35"
4944+
integrity sha512-kW3BMgFGPX1HHVYSebw2bTNb11Z+yclLKN84CO5pzFG99Qx9Do+28LXVQ3uJKK7J5amoNo/pKiySROXA3q9O3A==
49454945

49464946
react-native@0.60.5:
49474947
version "0.60.5"

‎docs/API.md

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
# API
22

3-
| Method | Type | Required | Default | Description |
4-
| --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------- |
5-
| autoCapitalize | string | false | 'none' | |
6-
| clearTextOnFocus | boolean | false | false | |
7-
| defaultValue | string | false | | Sets default value for otp inputs |
8-
| handleChange | function | true | console.log | Returns otp code. |
9-
| keyboardType | string | true | 'phone-pad' | |
10-
| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. |
11-
| secureTextEntry | boolean | false | false | |
12-
| selectTextOnFocus | boolean | false | true [iOS Only](./src/OtpInput.tsx#L56) | |
13-
| testIDPrefix | string | false | otpInput-\${inputIndex} | Prefix for testID. |
14-
| isRTL | boolean | false | false | Preferably I18nManager.isRTL. |
15-
| placeholder | string | false | | Placeholder for the input boxes. |
16-
| style | style (object) | false | [default](./src/index.tsx#L275) | Applied to whole container. |
17-
| focusStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to the input on focus. |
18-
| inputStyles | style(object) | false | [default](./src/index.tsx#L275) | Applied to single input. |
19-
| inputContainerStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to each input container. |
20-
| ...restTextInputProps | | | | [TextInput](https://facebook.github.io/react-native/docs/textinput) |
3+
| Method | Type | Required | Default | Description |
4+
| --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
5+
| autoCapitalize | string | false | 'none' | |
6+
| clearTextOnFocus | boolean | false | false | |
7+
| defaultValue | string | false | | Sets default value for otp inputs |
8+
| handleChange | function | true | console.log | Returns otp code. |
9+
| 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) |
10+
| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. |
11+
| secureTextEntry | boolean | false | false | |
12+
| selectTextOnFocus | boolean | false | true [iOS Only](./src/OtpInput.tsx#L56) | |
13+
| testIDPrefix | string | false | otpInput-\${inputIndex} | Prefix for testID. |
14+
| isRTL | boolean | false | false | Preferably I18nManager.isRTL. |
15+
| placeholder | string | false | | Placeholder for the input boxes. |
16+
| style | style (object) | false | [default](./src/index.tsx#L275) | Applied to whole container. |
17+
| focusStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to the input on focus. |
18+
| inputStyles | style(object) | false | [default](./src/index.tsx#L275) | Applied to single input. |
19+
| inputContainerStyles | style (object) | false | [default](./src/index.tsx#L275) | Applied to each input container. |
20+
| ...restTextInputProps | | | | [TextInput](https://facebook.github.io/react-native/docs/textinput) |
2121

2222
# Methods
2323

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"@react-native-community/bob": "0.7.0",
5555
"@types/jest": "24.0.23",
5656
"@types/react": "16.9.15",
57-
"@types/react-native": "0.60.23",
57+
"@types/react-native": "0.60.24",
5858
"@types/react-test-renderer": "16.9.1",
5959
"babel-jest": "24.9.0",
6060
"codecov": "3.6.1",

‎src/index.tsx

Lines changed: 41 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,18 @@ import { ActionTypes, OtpInputsRef, ReducerState, Actions, KeyEventType } from '
2727
import { fillOtpCode } from './helpers';
2828

2929
type Props = TextInputProps & {
30+
keyboardType:
31+
| 'default'
32+
| 'email-address'
33+
| 'phone-pad'
34+
| 'visible-password'
35+
| 'ascii-capable'
36+
| 'numbers-and-punctuation'
37+
| 'url'
38+
| 'name-phone-pad'
39+
| 'twitter'
40+
| 'web-search'
41+
| undefined;
3042
style?: StyleProp<ViewStyle>;
3143
focusStyles?: StyleProp<ViewStyle>;
3244
defaultValue?: string;
@@ -83,20 +95,36 @@ const reducer = (state: ReducerState, action: Actions) => {
8395
const OtpInputs = forwardRef<OtpInputsRef, Props>(
8496
(
8597
{
86-
autoCapitalize,
87-
clearTextOnFocus,
98+
autoCapitalize = 'none',
99+
clearTextOnFocus = false,
88100
defaultValue,
89-
focusStyles,
90-
handleChange,
91-
inputContainerStyles,
92-
inputStyles,
93-
isRTL,
94-
keyboardType,
95-
numberOfInputs,
96-
placeholder,
97-
secureTextEntry,
98-
selectTextOnFocus,
99-
style,
101+
focusStyles = {
102+
borderColor: '#00f',
103+
},
104+
handleChange = console.log,
105+
inputContainerStyles = {
106+
borderBottomWidth: 1,
107+
height: 53,
108+
margin: 10,
109+
},
110+
inputStyles = {
111+
fontSize: 24,
112+
paddingTop: 10,
113+
textAlign: 'center',
114+
width: 40,
115+
},
116+
isRTL = false,
117+
keyboardType = 'phone-pad',
118+
numberOfInputs = 4,
119+
placeholder = '',
120+
secureTextEntry = false,
121+
selectTextOnFocus = true,
122+
style = {
123+
flex: 1,
124+
flexDirection: 'row',
125+
alignItems: 'center',
126+
justifyContent: 'space-between',
127+
},
100128
testIDPrefix = 'otpInput',
101129
...restProps
102130
},
@@ -290,37 +318,3 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
290318

291319
export { OtpInputsRef };
292320
export default OtpInputs;
293-
294-
// @ts-ignore
295-
OtpInputs.defaultProps = {
296-
autoCapitalize: 'none',
297-
clearTextOnFocus: false,
298-
handleChange: console.log,
299-
keyboardType: 'phone-pad',
300-
numberOfInputs: 4,
301-
secureTextEntry: false,
302-
selectTextOnFocus: true,
303-
testIDPrefix: 'otpInput',
304-
isRTL: false,
305-
placeholder: '',
306-
style: {
307-
flex: 1,
308-
flexDirection: 'row',
309-
alignItems: 'center',
310-
justifyContent: 'space-between',
311-
},
312-
focusStyles: {
313-
borderColor: '#00f',
314-
},
315-
inputStyles: {
316-
fontSize: 24,
317-
paddingTop: 10,
318-
textAlign: 'center',
319-
width: 40,
320-
},
321-
inputContainerStyles: {
322-
borderBottomWidth: 1,
323-
height: 53,
324-
margin: 10,
325-
},
326-
};

‎yarn.lock

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1198,10 +1198,10 @@
11981198
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
11991199
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
12001200

1201-
"@types/react-native@0.60.23":
1202-
version "0.60.23"
1203-
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.23.tgz#9270f91bbff822a1571feece56cd260f0a1b2831"
1204-
integrity sha512-hLRCWKNni/e6KEXSNtexXCg0u7CnHla6G6yeZYTMOlyG/bLE41GeLxP4dXJw1hyDsXJYN00Wc3Apr2XQ2TW1LA==
1201+
"@types/react-native@0.60.24":
1202+
version "0.60.24"
1203+
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.24.tgz#0648aff3a910f29b8a892cecd0ec3199697bd31f"
1204+
integrity sha512-wI4C39mrEWpnx2JHCGsDKKcB22CNCKUWjLO6Mwt2yzgKD7crawuTjeHpBej/OiD/3df2X8rluuSmJ1xRcOZNAg==
12051205
dependencies:
12061206
"@types/prop-types" "*"
12071207
"@types/react" "*"

0 commit comments

Comments
 (0)