fix: android glitch which closed keyboard on focus

r5n-labs · Feb 28, 2020 · 911bb13 · 911bb13
1 parent 8ced9ce
commit 911bb13
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 39 deletions.
diff --git a/docs/API.md b/docs/API.md
@@ -14,10 +14,10 @@
 | 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)         | Applied to whole container.                                              |
-| focusStyles           | style (object) | false       | [default](./src/index.tsx)         | Applied to the input on focus.                                           |
-| inputStyles           | style(object)  | false       | [default](./src/index.tsx)         | Applied to single input.                                                 |
-| inputContainerStyles  | style (object) | false       | [default](./src/index.tsx)         | Applied to each input container.                                         |
+| style                 | style (object) | false       |                                         | Applied to whole container.                                              |
+| focusStyles           | style (object) | false       |                                         | Applied to the input on focus.                                           |
+| inputStyles           | style(object)  | false       |                                         | Applied to single input.                                                 |
+| inputContainerStyles  | style (object) | false       |                                         | 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
 
 ```tsx
-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();

diff --git a/package.json b/package.json
@@ -60,7 +60,9 @@
   },
   "jest": {
     "preset": "react-native",
-    "setupFiles": ["<rootDir>/jest/setup.ts"],
+    "setupFiles": [
+      "<rootDir>/jest/setup.ts"
+    ],
     "modulePathIgnorePatterns": [
       "<rootDir>/Example/node_modules",
       "<rootDir>/lib/"
@@ -80,7 +82,6 @@
   "prettier": {
     "bracketSpacing": true,
     "jsxBracketSameLine": false,
-    "parser": "typescript",
     "printWidth": 80,
     "semi": true,
     "singleQuote": true,

diff --git a/src/OtpInput.tsx b/src/OtpInput.tsx
@@ -75,4 +75,4 @@ const OtpInput = forwardRef<TextInput, Props>(
   },
 );
 
-export default OtpInput;
+export default React.memo<Props>(OtpInput);
diff --git a/src/index.tsx b/src/index.tsx
@@ -10,15 +10,15 @@ import React, {
 import {
   Clipboard,
   Keyboard,
-  StyleProp,
+  NativeSyntheticEvent,
+  Platform,
+  StyleSheet,
   TextInput,
+  TextInputKeyPressEventData,
   TextInputProps,
   TextStyle,
   View,
   ViewStyle,
-  Platform,
-  TextInputKeyPressEventData,
-  NativeSyntheticEvent,
 } from 'react-native';
 
 import OtpInput from './OtpInput';
@@ -38,12 +38,12 @@ type Props = TextInputProps & {
     | 'twitter'
     | 'web-search'
     | undefined;
-  style?: StyleProp<ViewStyle>;
-  focusStyles?: StyleProp<ViewStyle>;
+  style?: ViewStyle;
+  focusStyles?: ViewStyle;
   defaultValue?: string;
   handleChange: (otpCode: string) => void;
-  inputContainerStyles?: StyleProp<ViewStyle>;
-  inputStyles?: StyleProp<TextStyle>;
+  inputContainerStyles?: ViewStyle;
+  inputStyles?: TextStyle;
   isRTL?: boolean;
   numberOfInputs: number;
   testIDPrefix?: string;
@@ -103,39 +103,32 @@ const reducer = (state: ReducerState, { type, payload }: Actions) => {
   }
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+});
+
 const OtpInputs = forwardRef<OtpInputsRef, Props>(
   (
     {
       autoCapitalize = 'none',
       clearTextOnFocus = false,
       defaultValue,
-      focusStyles = {
-        borderColor: '#00f',
-      },
+      focusStyles,
       handleChange = console.log,
-      inputContainerStyles = {
-        borderBottomWidth: 1,
-        height: 53,
-        margin: 10,
-      },
-      inputStyles = {
-        fontSize: 24,
-        paddingTop: 10,
-        textAlign: 'center',
-        width: 40,
-      },
+      inputContainerStyles,
+      inputStyles,
       isRTL = false,
       keyboardType = 'phone-pad',
       numberOfInputs = 4,
       placeholder = '',
       secureTextEntry = false,
       selectTextOnFocus = true,
-      style = {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-      },
+      style,
       testIDPrefix = 'otpInput',
       ...restProps
     },
@@ -321,6 +314,7 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
             })}
             numberOfInputs={numberOfInputs}
             placeholder={placeholder}
+            // @ts-ignore
             ref={inputs.current[inputIndex]}
             secureTextEntry={secureTextEntry}
             selectTextOnFocus={selectTextOnFocus}
@@ -331,7 +325,7 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
       });
     };
 
-    return <View style={style}>{renderInputs()}</View>;
+    return <View style={style || styles.container}>{renderInputs()}</View>;
   },
 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,4 +75,4 @@ const OtpInput = forwardRef<TextInput, Props>( @@
       },
     );
-    export default OtpInput;
+    export default React.memo<Props>(OtpInput);