@momo-kits/foundation 0.103.5 → 0.103.6

package/Input/InputOTP.tsx

@@ -12,7 +12,6 @@ import {
   NativeSyntheticEvent,
   TextInput,
   TextInputFocusEventData,
-  TouchableOpacity,
   View,
 } from 'react-native';
 import {ApplicationContext, ComponentContext} from '../Application';
@@ -94,17 +93,14 @@ const InputOTP = forwardRef(
       onChangeText: (text: string) => {
         _onChangeText(text);
       },
-      focus: () => {
-        setFocused(true);
-        inputRef.current?.focus()
-      },
+      focus: () => inputRef.current?.focus(),
       blur: () => inputRef.current?.blur(),
       setText: (text: string) => _onChangeText(text),
     }));
 
-    const onFocusInput = () => {
+    const onFocusInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
       setFocused(true);
-      inputRef.current?.focus();
+      onFocus?.(e);
     };
 
     const onBlurInput = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
@@ -211,7 +207,7 @@ const InputOTP = forwardRef(
           <View style={styles.otpInputsView}>
             {length ? renderInputs(length) : renderUnidentifiedInputs()}
           </View>
-          <View style={styles.inputView}>
+          <View style={styles.otpRealInputWrapper}>
             <TextInput
               {...props}
               accessibilityLabel={accessibilityLabel}
@@ -219,9 +215,9 @@ const InputOTP = forwardRef(
               value={value}
               onChangeText={_onChangeText}
               keyboardType={dataType === 'number' ? 'number-pad' : 'default'}
-              onFocus={onFocus}
+              onFocus={onFocusInput}
               onBlur={onBlurInput}
-              style={{opacity: 0}}
+              style={styles.otpRealInput}
               selectionColor={theme.colors.primary}
               placeholderTextColor={theme.colors.text.hint}
             />
@@ -239,17 +235,14 @@ const InputOTP = forwardRef(
           state: 'enabled',
           componentId: accessibilityLabel,
         }}>
-        <TouchableOpacity
-          activeOpacity={1}
-          onPress={onFocusInput}
-          style={[style, styles.otpWrapper]}>
+        <View style={[style, styles.otpWrapper]}>
           {renderInputView()}
           <ErrorView
             errorMessage={errorMessage}
             errorSpacing={errorSpacing}
             hintText={hintText}
           />
-        </TouchableOpacity>
+        </View>
       </ComponentContext.Provider>
     );
   }

package/Input/styles.ts

@@ -164,6 +164,22 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  otpRealInputWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    opacity: 0.01,
+    backgroundColor: 'transparent',
+  },
+  otpRealInput: {
+    opacity: 0.01,
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+  },
 
   //DropDown
   inputDropDownWrapper: {

package/Layout/Screen.tsx

@@ -143,9 +143,10 @@ const Screen = forwardRef(
 
     let handleScroll;
     let Component: any = View;
-    let keyboardOffset = heightHeader - 20;
+
+    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -20;
+      keyboardOffset = -Math.min(insets.bottom, 21);
     }
 
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.103.5",
+    "version": "0.103.6",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},