@momo-kits/foundation 0.162.2-beta.1 → 0.162.2-beta.15

package/Application/BottomSheet.tsx

@@ -37,7 +37,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
-  const keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+  const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+  const keyboardOffset = heightHeader - bottomInset;
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -311,7 +312,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
           {useBottomInset && (
             <View
               style={{
-                height: Math.min(insets.bottom, 21),
+                height: bottomInset,
                 backgroundColor: backgroundColor,
               }}
             />

package/Application/BottomTab/index.tsx

@@ -296,7 +296,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
           activeTintColor={theme.colors.primary}
           style={[
             {
-              height: 64 + Math.min(insets.bottom, 21),
+              height: 64 + (Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom),
             },
           ]}
         />

package/Application/Components/HeaderLeft.tsx

@@ -86,7 +86,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: 8,
+    marginLeft: 12,
   },
 });
 

package/Input/Input.tsx

@@ -77,7 +77,8 @@ const Input = forwardRef(
     const scaledFontSize = useScaleSize(14);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const [focused, setFocused] = useState(false);
-    const haveValue = !!value || !!defaultValue;
+    const [internalText, setInternalText] = useState(defaultValue || '');
+    const haveValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'Input';
 
@@ -95,6 +96,9 @@ const Input = forwardRef(
     };
 
     const _onChangeText = (text: string) => {
+      if (value === undefined) {
+        setInternalText(text);
+      }
       onChangeText?.(text);
     };
 
@@ -109,6 +113,13 @@ const Input = forwardRef(
     };
 
     const _setText = (text: string) => {
+      if (__DEV__ && value !== undefined) {
+        console.error(
+          `${componentName}: calling ref.setText() on a controlled input (\`value\` is provided) is an anti-pattern. ` +
+            'It creates two sources of truth: setText will be overridden by React on the next render. ' +
+            'Update the state behind `value` instead.',
+        );
+      }
       inputRef?.current?.setNativeProps({ text });
       _onChangeText(text);
     };

package/Input/InputPhoneNumber.tsx

@@ -69,7 +69,8 @@ const InputPhoneNumber = forwardRef(
     const context = useContext<any>(MiniAppContext);
     const scaleHeight = useScaleSize(size === 'small' ? 48 : 56);
     const [focused, setFocused] = useState(false);
-    const haveValue = !!value || !!defaultValue;
+    const [internalText, setInternalText] = useState(defaultValue || '');
+    const haveValue = value !== undefined ? !!value : !!internalText;
     const inputRef = useRef<TextInput | null>(null);
     const componentName = 'InputPhoneNumber';
 
@@ -86,6 +87,9 @@ const InputPhoneNumber = forwardRef(
     };
 
     const _onChangeText = (text: string) => {
+      if (value === undefined) {
+        setInternalText(text);
+      }
       onChangeText?.(text);
     };
 
@@ -100,6 +104,13 @@ const InputPhoneNumber = forwardRef(
     };
 
     const _setText = (text: string) => {
+      if (__DEV__ && value !== undefined) {
+        console.error(
+          `${componentName}: calling ref.setText() on a controlled input (\`value\` is provided) is an anti-pattern. ` +
+            'It creates two sources of truth: setText will be overridden by React on the next render. ' +
+            'Update the state behind `value` instead.',
+        );
+      }
       inputRef?.current?.setNativeProps({ text });
       _onChangeText(text);
     };

package/Layout/Screen.tsx

@@ -240,9 +240,10 @@ const Screen = forwardRef(
     let handleScroll;
     let Component: any = View;
 
-    let keyboardOffset = heightHeader - Math.min(insets.bottom, 21);
+    const bottomInset = Platform.OS === 'ios' ? Math.min(insets.bottom, 21) : insets.bottom;
+    let keyboardOffset = heightHeader - bottomInset;
     if (headerType === 'extended' || animatedHeader || inputSearchProps) {
-      keyboardOffset = -Math.min(insets.bottom, 21);
+      keyboardOffset = -bottomInset;
     }
 
     /**
@@ -662,7 +663,7 @@ const Screen = forwardRef(
                 {...floatingButtonProps}
                 animatedValue={sharedValue}
                 bottom={
-                  Footer || isTab ? 12 : Math.min(insets.bottom, 21) + Spacing.S
+                  Footer || isTab ? 12 : bottomInset + Spacing.S
                 }
               />
             </View>
@@ -673,7 +674,7 @@ const Screen = forwardRef(
               style={[
                 styles.shadow,
                 {
-                  paddingBottom: Math.min(insets.bottom, 21) + Spacing.S,
+                  paddingBottom: bottomInset + Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
               ]}

package/package.json

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