@momo-kits/foundation 0.78.1 → 0.78.2

package/Application/ModalScreen.tsx

@@ -1,6 +1,12 @@
-import React, {useContext, useEffect, useRef} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
-  Dimensions,
   KeyboardAvoidingView,
   Platform,
   Pressable,
@@ -85,11 +91,10 @@ const Modal: React.FC<ModalParams> = props => {
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const {theme, navigator} = useContext(ApplicationContext);
-  const {height} = Dimensions.get('window');
   const {
     screen,
     options,
-    snapPoints = [height * 0.5, height * 0.9],
+    useSnap = true,
   }: BottomSheetParams = props.route.params;
   const Component = useRef(screen).current;
   const navigation = new Navigation(props.navigation, theme);
@@ -100,9 +105,31 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   delete params.screen;
 
+  const [contentHeight, setContentHeight] = useState(undefined);
+  const snapPoints = useMemo(() => {
+    if (useSnap) {
+      return ['50%', '90%'];
+    }
+    return [contentHeight ?? '50%'];
+  }, [contentHeight]);
+
   const bottomSheetRef = useRef<any>(null);
   const mountedRef = useRef(true);
 
+  let handleOnLayout;
+  if (useSnap) {
+    handleOnLayout = useCallback(
+      ({
+        nativeEvent: {
+          layout: {height},
+        },
+      }) => {
+        setContentHeight(height);
+      },
+      [],
+    );
+  }
+
   let backgroundColor = theme.colors.background.default;
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
@@ -127,7 +154,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     <SafeAreaView style={Styles.flex}>
       <BottomSheetModal
         ref={bottomSheetRef}
-        snapPoints={snapPoints?.map(item => item + 68)}
+        snapPoints={snapPoints}
         onDismiss={() => {
           if (mountedRef.current) {
             navigator?.pop();
@@ -135,7 +162,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         }}
         handleComponent={null}
         backdropComponent={backdropComponent}>
-        <View accessibilityLabel={'BottomSheet'}>
+        <View onLayout={handleOnLayout} accessibilityLabel={'BottomSheet'}>
           <View style={[styles.sheetContainer, {backgroundColor}]}>
             <View style={styles.indicatorContainer}>
               <View

package/Application/types.ts

@@ -83,7 +83,7 @@ export type NavigationContainerProps = {
   options?: NavigationOptions;
   theme: Theme;
   maxApi?: any;
-  localization: LocalizationObject;
+  localization?: LocalizationObject;
 };
 
 export type NavigationScreenProps = {
@@ -107,7 +107,7 @@ export interface ModalParams extends ScreenParams {
 export interface BottomSheetParams extends ScreenParams {
   [key: string]: any;
   onDismiss?: () => void;
-  snapPoints?: ReadonlyArray<number>;
+  useSnap?: boolean;
 }
 
 export type NavigationButtonProps = {

package/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
+import React, {forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -14,7 +14,7 @@ import {Icon} from '../Icon';
 import {checkTyping} from './utils';
 import {Loader} from '../Loader';
 
-const Input: FC<InputProps> = forwardRef(
+const Input = forwardRef(
   (
     {
       value,
@@ -34,7 +34,7 @@ const Input: FC<InputProps> = forwardRef(
       errorSpacing,
       loading,
       ...props
-    },
+    }: InputProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);

package/Input/InputMoney.tsx

@@ -1,4 +1,4 @@
-import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
+import React, {forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -13,7 +13,7 @@ import {InputMoneyProps} from './index';
 import {Icon} from '../Icon';
 import {formatMoneyToNumber, formatNumberToMoney} from './utils';
 
-const InputMoney: FC<InputMoneyProps> = forwardRef(
+const InputMoney = forwardRef(
   (
     {
       onChangeText,
@@ -30,7 +30,7 @@ const InputMoney: FC<InputMoneyProps> = forwardRef(
       required,
       errorSpacing,
       ...props
-    },
+    }: InputMoneyProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);

package/Input/InputSearch.tsx

@@ -1,4 +1,4 @@
-import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
+import React, {forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -13,7 +13,7 @@ import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {checkTyping} from './utils';
 
-const InputSearch: FC<InputSearchProps> = forwardRef(
+const InputSearch = forwardRef(
   (
     {
       placeholder,
@@ -30,7 +30,7 @@ const InputSearch: FC<InputSearchProps> = forwardRef(
       defaultValue,
       onPressButtonText,
       ...props
-    },
+    }: InputSearchProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);

package/Input/InputTextArea.tsx

@@ -1,4 +1,4 @@
-import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
+import React, {forwardRef, useContext, useRef, useState} from 'react';
 import {
   NativeSyntheticEvent,
   TextInput,
@@ -19,7 +19,7 @@ import {InputTextAreaProps} from './index';
 import {Icon} from '../Icon';
 import {ApplicationContext} from '../Application';
 
-const InputTextArea: FC<InputTextAreaProps> = forwardRef(
+const InputTextArea = forwardRef(
   (
     {
       errorMessage,
@@ -38,7 +38,7 @@ const InputTextArea: FC<InputTextAreaProps> = forwardRef(
       required,
       errorSpacing,
       ...props
-    },
+    }: InputTextAreaProps,
     ref,
   ) => {
     const {theme} = useContext(ApplicationContext);

package/package.json

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