@0610studio/zs-ui 0.7.0 → 0.7.2

package/build/overlay/BottomSheetOverlay/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';
 import { useBottomSheet } from '../../model/useOverlay';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
@@ -6,53 +6,82 @@ import ModalBackground from '../ui/ModalBackground';
 import { useTheme } from '../../model';
 import { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';
 import { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';
+const IS_IOS = Platform.OS === 'ios';
+const keyboardEvents = ({
+    showEvent: IS_IOS ? 'keyboardWillShow' : 'keyboardDidShow',
+    hideEvent: IS_IOS ? 'keyboardWillHide' : 'keyboardDidHide',
+});
+const ANIMATION_CONFIG = {
+    keyboard: {
+        show: { duration: IS_IOS ? 250 : 300 },
+        hide: { duration: IS_IOS ? 150 : 200 },
+    },
+    spring: {
+        damping: 50,
+        stiffness: 300,
+        mass: 0.7,
+        velocity: 100,
+        restDisplacementThreshold: 0.2,
+    },
+    close: { duration: 150 },
+    scale: { duration: 200 },
+    scaleRestore: {
+        damping: 15,
+        stiffness: 300,
+    },
+};
+const GESTURE_CONSTANTS = {
+    scaleAmount: 0.985,
+    horizontalDamping: 18,
+    verticalUpDamping: 18,
+    verticalDownDamping: 1.5,
+    closeVelocityThreshold: 0.5,
+    closeDistanceRatio: 1 / 3,
+    hideDelay: 200,
+};
 function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
     const { isBackgroundTouchClose = true, marginHorizontal = 10, marginBottom = 10, padding = 14, } = options;
     const { palette, dimensions: { width: windowWidth, height: windowHeight } } = useTheme();
     const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();
-    // 화면의 크기보다 높이가 높으면 화면의 크기로 제한
-    const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);
-    const translateY = useSharedValue(maxHeight);
-    const translateX = useSharedValue(0);
-    const scale = useSharedValue(1);
     const { bottom } = useSafeAreaInsets();
+    // 화면의 크기보다 높이가 높으면 화면의 크기로 제한 
+    const maxHeight = useMemo(() => Math.min(windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0), height), [windowHeight, height]);
+    const translateY = useRef(useSharedValue(0)).current;
+    const translateX = useRef(useSharedValue(0)).current;
+    const scale = useRef(useSharedValue(1)).current;
     const startX = useRef(0);
     const startY = useRef(0);
     const [localVisible, setLocalVisible] = useState(false);
-    // ** 소프트 키보드 핸들링
+    const handleKeyboardShow = useCallback((event) => {
+        const targetY = IS_IOS ? (-event.endCoordinates.height + bottom) : 0;
+        translateY.value = withTiming(targetY, ANIMATION_CONFIG.keyboard.show);
+    }, [translateY, bottom]);
+    const handleKeyboardHide = useCallback(() => {
+        translateY.value = withTiming(0, ANIMATION_CONFIG.keyboard.hide);
+    }, [translateY]);
+    // 소프트 키보드 핸들링
     useEffect(() => {
-        const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-        const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-        const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {
-            translateY.value = withTiming(Platform.OS === 'ios' ? (-event.endCoordinates.height + bottom) : 0, { duration: 300 });
-        });
-        const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
-            translateY.value = withTiming(0, { duration: 200 });
-        });
+        const keyboardShowSubscription = Keyboard.addListener(keyboardEvents.showEvent, handleKeyboardShow);
+        const keyboardHideSubscription = Keyboard.addListener(keyboardEvents.hideEvent, handleKeyboardHide);
         return () => {
             keyboardShowSubscription.remove();
             keyboardHideSubscription.remove();
         };
-    }, []);
+    }, [keyboardEvents.showEvent, keyboardEvents.hideEvent, handleKeyboardShow, handleKeyboardHide]);
+    // BottomSheet 표시/숨김 애니메이션 처리
     useEffect(() => {
         if (bottomSheetVisible) {
             Keyboard.dismiss();
             setLocalVisible(true);
-            translateY.value = withSpring(0, {
-                damping: 50,
-                stiffness: 300,
-                mass: 0.7,
-                velocity: 100,
-                restDisplacementThreshold: 0.2,
-            });
+            translateY.value = withSpring(0, ANIMATION_CONFIG.spring);
         }
         else {
-            translateY.value = withTiming(maxHeight + 100, { duration: 150 });
+            translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);
             setTimeout(() => {
                 setLocalVisible(false);
-            }, 200);
+            }, GESTURE_CONSTANTS.hideDelay);
         }
-    }, [bottomSheetVisible]);
+    }, [bottomSheetVisible, translateY, maxHeight]);
     const animatedStyles = useAnimatedStyle(() => {
         return {
             transform: [
@@ -61,75 +90,91 @@ function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
                 { scale: scale.value }
             ],
         };
-    });
-    const panResponder = useRef(PanResponder.create({
+    }, []);
+    const handlePanResponderGrant = useCallback(() => {
+        Keyboard.dismiss();
+        startX.current = translateX.value;
+        startY.current = translateY.value;
+        scale.value = withTiming(GESTURE_CONSTANTS.scaleAmount, ANIMATION_CONFIG.scale);
+    }, [translateX, translateY, scale]);
+    const handlePanResponderMove = useCallback((_, gestureState) => {
+        const newTranslateX = (startX.current + gestureState.dx) / GESTURE_CONSTANTS.horizontalDamping;
+        translateX.value = newTranslateX;
+        const newTranslateY = startY.current + gestureState.dy;
+        if (newTranslateY < 0) {
+            translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalUpDamping;
+        }
+        else {
+            translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalDownDamping;
+        }
+    }, [translateX, translateY]);
+    const handlePanResponderRelease = useCallback((_, gestureState) => {
+        translateX.value = withTiming(0, { duration: 100 });
+        // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기
+        const shouldClose = gestureState.vy > GESTURE_CONSTANTS.closeVelocityThreshold ||
+            translateY.value > maxHeight * GESTURE_CONSTANTS.closeDistanceRatio;
+        if (shouldClose) {
+            translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);
+            setBottomSheetVisible(false);
+        }
+        else {
+            translateY.value = withTiming(0, ANIMATION_CONFIG.close);
+        }
+        // 사이즈 원래대로 복귀
+        scale.value = withSpring(1, ANIMATION_CONFIG.scaleRestore);
+    }, [translateX, translateY, scale, maxHeight, setBottomSheetVisible]);
+    const panResponder = useMemo(() => PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => {
-            Keyboard.dismiss();
-            startX.current = translateX.value;
-            startY.current = translateY.value;
-            scale.value = withTiming(0.985, { duration: 200 });
+        onPanResponderGrant: handlePanResponderGrant,
+        onPanResponderMove: handlePanResponderMove,
+        onPanResponderRelease: handlePanResponderRelease,
+    }), [handlePanResponderGrant, handlePanResponderMove, handlePanResponderRelease]);
+    // 배경 터치 핸들러
+    const handleBackgroundPress = useCallback(() => {
+        if (isBackgroundTouchClose)
+            setBottomSheetVisible(false);
+    }, [isBackgroundTouchClose, setBottomSheetVisible]);
+    const containerStyle = useMemo(() => [
+        styles.container,
+        {
+            width: windowWidth - marginHorizontal * 2,
+            height: maxHeight,
+            marginHorizontal,
+            bottom: marginBottom + bottom,
+            backgroundColor: palette.background.base,
         },
-        onPanResponderMove: (_, gestureState) => {
-            const newTranslateX = (startX.current + gestureState.dx) / 18;
-            translateX.value = newTranslateX;
-            const newTranslateY = startY.current + gestureState.dy;
-            if (newTranslateY < 0) {
-                translateY.value = newTranslateY / 18;
-            }
-            else {
-                translateY.value = newTranslateY / 1.5;
-            }
-        },
-        onPanResponderRelease: (_, gestureState) => {
-            translateX.value = withTiming(0, { duration: 100 });
-            // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기
-            if (gestureState.vy > 0.5 || translateY.value > maxHeight / 3) {
-                translateY.value = withTiming(maxHeight + 100, { duration: 150 });
-                setBottomSheetVisible(false);
-            }
-            else {
-                translateY.value = withTiming(0, { duration: 150 });
-            }
-            // 사이즈 원래대로 복귀
-            scale.value = withSpring(1, {
-                damping: 15,
-                stiffness: 300
-            });
-        },
-    })).current;
-    return (!localVisible ? null :
-        <ModalBackground zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1} key={localVisible ? 'visiblebs' : 'hiddenbs'} modalBgColor={palette.modalBgColor} onPress={() => {
-                if (isBackgroundTouchClose)
-                    setBottomSheetVisible(false);
-            }}>
-        <Animated.View style={[
-                styles.container,
-                {
-                    width: windowWidth - marginHorizontal * 2,
-                    height: maxHeight,
-                    marginHorizontal,
-                    bottom: marginBottom + bottom,
-                    backgroundColor: palette.background.base,
-                },
-                animatedStyles,
-            ]}>
-          <View style={[
-                styles.pressableView,
-                { paddingHorizontal: padding, paddingBottom: padding },
-            ]}>
-            <View {...panResponder.panHandlers}>
-              <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>
-                <View style={[styles.gestureBar, { backgroundColor: palette.divider }]}/>
-              </View>
-              {headerComponent}
+        animatedStyles,
+    ], [windowWidth, marginHorizontal, maxHeight, marginBottom, bottom, palette.background.base, animatedStyles]);
+    const pressableViewStyle = useMemo(() => [
+        styles.pressableView,
+        { paddingHorizontal: padding, paddingBottom: padding },
+    ], [padding]);
+    const gestureBarContainerStyle = useMemo(() => [
+        styles.gestureBarContainer,
+        { paddingBottom: padding }
+    ], [padding]);
+    const gestureBarStyle = useMemo(() => [
+        styles.gestureBar,
+        { backgroundColor: palette.divider }
+    ], [palette.divider]);
+    if (!localVisible) {
+        return null;
+    }
+    return (<ModalBackground zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1} key={localVisible ? 'visiblebs' : 'hiddenbs'} modalBgColor={palette.modalBgColor} onPress={handleBackgroundPress}>
+      <Animated.View style={containerStyle}>
+        <View style={pressableViewStyle}>
+          <View {...panResponder.panHandlers}>
+            <View style={gestureBarContainerStyle}>
+              <View style={gestureBarStyle}/>
             </View>
-
-            {component}
+            {headerComponent}
           </View>
-        </Animated.View>
-      </ModalBackground>);
+
+          {component}
+        </View>
+      </Animated.View>
+    </ModalBackground>);
 }
 const styles = StyleSheet.create({
     container: {
@@ -155,5 +200,13 @@ const styles = StyleSheet.create({
         borderRadius: 2,
     },
 });
-export default BottomSheetOverlay;
+const arePropsEqual = (prevProps, nextProps) => {
+    return (prevProps.headerComponent === nextProps.headerComponent &&
+        prevProps.component === nextProps.component &&
+        prevProps.options?.isBackgroundTouchClose === nextProps.options?.isBackgroundTouchClose &&
+        prevProps.options?.marginHorizontal === nextProps.options?.marginHorizontal &&
+        prevProps.options?.marginBottom === nextProps.options?.marginBottom &&
+        prevProps.options?.padding === nextProps.options?.padding);
+};
+export default React.memo(BottomSheetOverlay, arePropsEqual);
 //# sourceMappingURL=index.js.map

package/build/overlay/BottomSheetOverlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport { StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\n\nfunction BottomSheetOverlay({\n  headerComponent,\n  component,\n  options = {},\n}: ShowBottomSheetProps) {\n  const {\n    isBackgroundTouchClose = true,\n    marginHorizontal = 10,\n    marginBottom = 10,\n    padding = 14,\n  } = options;\n  const { palette, dimensions: { width: windowWidth, height: windowHeight } } = useTheme();\n  const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n  // 화면의 크기보다 높이가 높으면 화면의 크기로 제한\n  const maxHeight = Math.min((windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0)), height);\n  const translateY = useSharedValue(maxHeight);\n  const translateX = useSharedValue(0);\n  const scale = useSharedValue(1);\n  const { bottom } = useSafeAreaInsets();\n  const startX = useRef(0);\n  const startY = useRef(0);\n  const [localVisible, setLocalVisible] = useState(false);\n\n  // ** 소프트 키보드 핸들링\n  useEffect(() => {\n    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n    const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n      translateY.value = withTiming(Platform.OS === 'ios' ? (-event.endCoordinates.height + bottom) : 0, { duration: 300 });\n    });\n\n    const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n      translateY.value = withTiming(0, { duration: 200 });\n    });\n\n    return () => {\n      keyboardShowSubscription.remove();\n      keyboardHideSubscription.remove();\n    };\n  }, []);\n\n  useEffect(() => {\n    if (bottomSheetVisible) {\n      Keyboard.dismiss();\n      setLocalVisible(true);\n      translateY.value = withSpring(0, {\n        damping: 50,\n        stiffness: 300,\n        mass: 0.7,\n        velocity: 100,\n        restDisplacementThreshold: 0.2,\n      });\n    } else {\n      translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n      setTimeout(() => {\n        setLocalVisible(false);\n      }, 200);\n    }\n  }, [bottomSheetVisible]);\n\n  const animatedStyles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateY: translateY.value },\n        { translateX: translateX.value },\n        { scale: scale.value }\n      ],\n    };\n  });\n\n  const panResponder = useRef(\n    PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderGrant: () => {\n        Keyboard.dismiss();\n        startX.current = translateX.value;\n        startY.current = translateY.value;\n        scale.value = withTiming(0.985, { duration: 200 });\n\n      },\n      onPanResponderMove: (_, gestureState) => {\n        const newTranslateX = (startX.current + gestureState.dx) / 18;\n        translateX.value = newTranslateX;\n\n        const newTranslateY = startY.current + gestureState.dy;\n        if (newTranslateY < 0) {\n          translateY.value = newTranslateY / 18;\n        } else {\n          translateY.value = newTranslateY / 1.5;\n        }\n      },\n      onPanResponderRelease: (_, gestureState) => {\n        translateX.value = withTiming(0, { duration: 100 });\n\n        // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n        if (gestureState.vy > 0.5 || translateY.value > maxHeight / 3) {\n          translateY.value = withTiming(maxHeight + 100, { duration: 150 });\n          setBottomSheetVisible(false);\n        } else {\n          translateY.value = withTiming(0, { duration: 150 });\n        }\n\n        // 사이즈 원래대로 복귀\n        scale.value = withSpring(1, {\n          damping: 15,\n          stiffness: 300\n        });\n      },\n    })\n  ).current;\n\n  return (\n    !localVisible ? null :\n      <ModalBackground\n        zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n        key={localVisible ? 'visiblebs' : 'hiddenbs'}\n        modalBgColor={palette.modalBgColor}\n        onPress={() => {\n          if (isBackgroundTouchClose) setBottomSheetVisible(false);\n        }}\n      >\n        <Animated.View\n          style={[\n            styles.container,\n            {\n              width: windowWidth - marginHorizontal * 2,\n              height: maxHeight,\n              marginHorizontal,\n              bottom: marginBottom + bottom,\n              backgroundColor: palette.background.base,\n            },\n            animatedStyles,\n          ]}\n        >\n          <View\n            style={[\n              styles.pressableView,\n              { paddingHorizontal: padding, paddingBottom: padding },\n            ]}\n          >\n            <View {...panResponder.panHandlers}>\n              <View style={[styles.gestureBarContainer, { paddingBottom: padding }]}>\n                <View style={[styles.gestureBar, { backgroundColor: palette.divider }]} />\n              </View>\n              {headerComponent}\n            </View>\n\n            {component}\n          </View>\n        </Animated.View>\n      </ModalBackground>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    borderRadius: 26,\n    overflow: 'hidden',\n    zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n    maxWidth: MAX_OVERLAY_WIDTH,\n  },\n  pressableView: {\n    width: '100%',\n    height: '100%',\n  },\n  gestureBarContainer: {\n    width: '100%',\n    paddingTop: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  gestureBar: {\n    width: 45,\n    height: 3,\n    borderRadius: 2,\n  },\n});\n\nexport default BottomSheetOverlay;"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';\nimport { StyleSheet, View, PanResponder, Keyboard, Platform } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../model';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { MAX_OVERLAY_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\n\nconst IS_IOS = Platform.OS === 'ios';\n\nconst keyboardEvents = ({\n  showEvent: IS_IOS ? 'keyboardWillShow' as const : 'keyboardDidShow' as const,\n  hideEvent: IS_IOS ? 'keyboardWillHide' as const : 'keyboardDidHide' as const,\n});\n\nconst ANIMATION_CONFIG = {\n  keyboard: {\n    show: { duration: IS_IOS ? 250 : 300 },\n    hide: { duration: IS_IOS ? 150 : 200 },\n  },\n  spring: {\n    damping: 50,\n    stiffness: 300,\n    mass: 0.7,\n    velocity: 100,\n    restDisplacementThreshold: 0.2,\n  },\n  close: { duration: 150 },\n  scale: { duration: 200 },\n  scaleRestore: {\n    damping: 15,\n    stiffness: 300,\n  },\n} as const;\n\nconst GESTURE_CONSTANTS = {\n  scaleAmount: 0.985,\n  horizontalDamping: 18,\n  verticalUpDamping: 18,\n  verticalDownDamping: 1.5,\n  closeVelocityThreshold: 0.5,\n  closeDistanceRatio: 1 / 3,\n  hideDelay: 200,\n} as const;\n\nfunction BottomSheetOverlay({\n  headerComponent,\n  component,\n  options = {},\n}: ShowBottomSheetProps) {\n  const {\n    isBackgroundTouchClose = true,\n    marginHorizontal = 10,\n    marginBottom = 10,\n    padding = 14,\n  } = options;\n  const { palette, dimensions: { width: windowWidth, height: windowHeight } } = useTheme();\n  const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n  const { bottom } = useSafeAreaInsets();\n  \n  // 화면의 크기보다 높이가 높으면 화면의 크기로 제한 \n  const maxHeight = useMemo(() => \n    Math.min(\n      windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0),\n      height\n    ),\n    [windowHeight, height]\n  );\n  \n  const translateY = useRef(useSharedValue(0)).current;\n  const translateX = useRef(useSharedValue(0)).current;\n  const scale = useRef(useSharedValue(1)).current;\n  \n  const startX = useRef(0);\n  const startY = useRef(0);\n  const [localVisible, setLocalVisible] = useState(false);\n\n  const handleKeyboardShow = useCallback((event: any) => {\n    const targetY = IS_IOS ? (-event.endCoordinates.height + bottom) : 0;\n    translateY.value = withTiming(targetY, ANIMATION_CONFIG.keyboard.show);\n  }, [translateY, bottom]);\n\n  const handleKeyboardHide = useCallback(() => {\n    translateY.value = withTiming(0, ANIMATION_CONFIG.keyboard.hide);\n  }, [translateY]);\n\n  // 소프트 키보드 핸들링\n  useEffect(() => {\n    const keyboardShowSubscription = Keyboard.addListener(keyboardEvents.showEvent, handleKeyboardShow);\n    const keyboardHideSubscription = Keyboard.addListener(keyboardEvents.hideEvent, handleKeyboardHide);\n\n    return () => {\n      keyboardShowSubscription.remove();\n      keyboardHideSubscription.remove();\n    };\n  }, [keyboardEvents.showEvent, keyboardEvents.hideEvent, handleKeyboardShow, handleKeyboardHide]);\n\n  // BottomSheet 표시/숨김 애니메이션 처리\n  useEffect(() => {\n    if (bottomSheetVisible) {\n      Keyboard.dismiss();\n      setLocalVisible(true);\n      translateY.value = withSpring(0, ANIMATION_CONFIG.spring);\n    } else {\n      translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n      setTimeout(() => {\n        setLocalVisible(false);\n      }, GESTURE_CONSTANTS.hideDelay);\n    }\n  }, [bottomSheetVisible, translateY, maxHeight]);\n\n  const animatedStyles = useAnimatedStyle(() => {\n    return {\n      transform: [\n        { translateY: translateY.value },\n        { translateX: translateX.value },\n        { scale: scale.value }\n      ],\n    };\n  }, []);\n\n  const handlePanResponderGrant = useCallback(() => {\n    Keyboard.dismiss();\n    startX.current = translateX.value;\n    startY.current = translateY.value;\n    scale.value = withTiming(GESTURE_CONSTANTS.scaleAmount, ANIMATION_CONFIG.scale);\n  }, [translateX, translateY, scale]);\n\n  const handlePanResponderMove = useCallback((_, gestureState) => {\n    const newTranslateX = (startX.current + gestureState.dx) / GESTURE_CONSTANTS.horizontalDamping;\n    translateX.value = newTranslateX;\n\n    const newTranslateY = startY.current + gestureState.dy;\n    if (newTranslateY < 0) {\n      translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalUpDamping;\n    } else {\n      translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalDownDamping;\n    }\n  }, [translateX, translateY]);\n\n  const handlePanResponderRelease = useCallback((_, gestureState) => {\n    translateX.value = withTiming(0, { duration: 100 });\n\n    // 빠른 플리킹 제스처를 했을 때, 혹은 화면의 1/3 이상 내렸을 때, 닫기\n    const shouldClose = gestureState.vy > GESTURE_CONSTANTS.closeVelocityThreshold || \n                      translateY.value > maxHeight * GESTURE_CONSTANTS.closeDistanceRatio;\n    \n    if (shouldClose) {\n      translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n      setBottomSheetVisible(false);\n    } else {\n      translateY.value = withTiming(0, ANIMATION_CONFIG.close);\n    }\n\n    // 사이즈 원래대로 복귀\n    scale.value = withSpring(1, ANIMATION_CONFIG.scaleRestore);\n  }, [translateX, translateY, scale, maxHeight, setBottomSheetVisible]);\n\n  const panResponder = useMemo(\n    () => PanResponder.create({\n      onStartShouldSetPanResponder: () => true,\n      onMoveShouldSetPanResponder: () => true,\n      onPanResponderGrant: handlePanResponderGrant,\n      onPanResponderMove: handlePanResponderMove,\n      onPanResponderRelease: handlePanResponderRelease,\n    }),\n    [handlePanResponderGrant, handlePanResponderMove, handlePanResponderRelease]\n  );\n\n  // 배경 터치 핸들러\n  const handleBackgroundPress = useCallback(() => {\n    if (isBackgroundTouchClose) setBottomSheetVisible(false);\n  }, [isBackgroundTouchClose, setBottomSheetVisible]);\n\n  const containerStyle = useMemo(() => [\n    styles.container,\n    {\n      width: windowWidth - marginHorizontal * 2,\n      height: maxHeight,\n      marginHorizontal,\n      bottom: marginBottom + bottom,\n      backgroundColor: palette.background.base,\n    },\n    animatedStyles,\n  ], [windowWidth, marginHorizontal, maxHeight, marginBottom, bottom, palette.background.base, animatedStyles]);\n\n  const pressableViewStyle = useMemo(() => [\n    styles.pressableView,\n    { paddingHorizontal: padding, paddingBottom: padding },\n  ], [padding]);\n\n  const gestureBarContainerStyle = useMemo(() => [\n    styles.gestureBarContainer,\n    { paddingBottom: padding }\n  ], [padding]);\n\n  const gestureBarStyle = useMemo(() => [\n    styles.gestureBar,\n    { backgroundColor: palette.divider }\n  ], [palette.divider]);\n\n  if (!localVisible) {\n    return null;\n  }\n\n  return (\n    <ModalBackground\n      zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n      key={localVisible ? 'visiblebs' : 'hiddenbs'}\n      modalBgColor={palette.modalBgColor}\n      onPress={handleBackgroundPress}\n    >\n      <Animated.View style={containerStyle}>\n        <View style={pressableViewStyle}>\n          <View {...panResponder.panHandlers}>\n            <View style={gestureBarContainerStyle}>\n              <View style={gestureBarStyle} />\n            </View>\n            {headerComponent}\n          </View>\n\n          {component}\n        </View>\n      </Animated.View>\n    </ModalBackground>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    borderRadius: 26,\n    overflow: 'hidden',\n    zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n    maxWidth: MAX_OVERLAY_WIDTH,\n  },\n  pressableView: {\n    width: '100%',\n    height: '100%',\n  },\n  gestureBarContainer: {\n    width: '100%',\n    paddingTop: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  gestureBar: {\n    width: 45,\n    height: 3,\n    borderRadius: 2,\n  },\n});\n\nconst arePropsEqual = (\n  prevProps: ShowBottomSheetProps, \n  nextProps: ShowBottomSheetProps\n): boolean => {\n  return (\n    prevProps.headerComponent === nextProps.headerComponent &&\n    prevProps.component === nextProps.component &&\n    prevProps.options?.isBackgroundTouchClose === nextProps.options?.isBackgroundTouchClose &&\n    prevProps.options?.marginHorizontal === nextProps.options?.marginHorizontal &&\n    prevProps.options?.marginBottom === nextProps.options?.marginBottom &&\n    prevProps.options?.padding === nextProps.options?.padding\n  );\n};\n\nexport default React.memo(BottomSheetOverlay, arePropsEqual);"]}

package/build/ui/ZSAboveKeyboard/index.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    render: () => React.ReactNode;
+    offset?: number;
+}
+declare function ZSAboveKeyboard({ render, offset, }: Props): import("react").JSX.Element;
+export default ZSAboveKeyboard;
+//# sourceMappingURL=index.d.ts.map

package/build/ui/ZSAboveKeyboard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,MAAM,EACN,MAAU,GACX,EAAE,KAAK,+BA4CP;AAED,eAAe,eAAe,CAAC"}

package/build/ui/ZSAboveKeyboard/index.js

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, Platform, StyleSheet, Dimensions } from 'react-native';
+import Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';
+import { getActualTopInset } from '../../model/utils';
+function ZSAboveKeyboard({ render, offset = 0, }) {
+    const [topValue, setTopValue] = useState(0);
+    const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+    const [componentHeight, setComponentHeight] = useState(0);
+    const screenHeight = Dimensions.get('window').height;
+    const actualTop = getActualTopInset();
+    useEffect(() => {
+        const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+        const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+        const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {
+            // 키보드 바로 위에 위치하도록 계산: 화면 높이 - 키보드 높이 - 컴포넌트 높이 - offset
+            const topValue = screenHeight - event.endCoordinates.height - componentHeight - offset + actualTop;
+            setTopValue(topValue);
+            setIsKeyboardVisible(true);
+        });
+        const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
+            setTopValue(0);
+            setIsKeyboardVisible(false);
+        });
+        return () => {
+            keyboardShowSubscription.remove();
+            keyboardHideSubscription.remove();
+        };
+    }, [screenHeight, offset, componentHeight, actualTop]);
+    const handleLayout = (event) => {
+        const { height } = event.nativeEvent.layout;
+        setComponentHeight(height + (Platform.OS === 'ios' ? 100 : 80));
+    };
+    return (<Animated.View entering={FadeInDown} exiting={FadeOutDown} style={[styles.container, isKeyboardVisible ? { top: topValue } : { bottom: 0 }]} onLayout={handleLayout}>
+      {render()}
+    </Animated.View>);
+}
+export default ZSAboveKeyboard;
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 8400,
+        width: '100%',
+    },
+});
+//# sourceMappingURL=index.js.map

package/build/ui/ZSAboveKeyboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { Keyboard, Platform, StyleSheet, Dimensions } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { getActualTopInset } from '../../model/utils';\n\ninterface Props {\n  render: () => React.ReactNode;\n  offset?: number;\n}\n\nfunction ZSAboveKeyboard({\n  render,\n  offset = 0,\n}: Props) {\n  const [topValue, setTopValue] = useState(0);\n  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);\n  const [componentHeight, setComponentHeight] = useState(0);\n  const screenHeight = Dimensions.get('window').height;\n  const actualTop = getActualTopInset();\n\n  useEffect(() => {\n    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';\n    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';\n\n    const keyboardShowSubscription = Keyboard.addListener(showEvent, (event) => {\n      // 키보드 바로 위에 위치하도록 계산: 화면 높이 - 키보드 높이 - 컴포넌트 높이 - offset\n      const topValue = screenHeight - event.endCoordinates.height - componentHeight - offset + actualTop;\n      setTopValue(topValue);\n      setIsKeyboardVisible(true);\n    });\n\n    const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {\n      setTopValue(0);\n      setIsKeyboardVisible(false);\n    });\n\n    return () => {\n      keyboardShowSubscription.remove();\n      keyboardHideSubscription.remove();\n    };\n  }, [screenHeight, offset, componentHeight, actualTop]);\n\n  const handleLayout = (event: any) => {\n    const { height } = event.nativeEvent.layout;\n    setComponentHeight(height + (Platform.OS === 'ios' ? 100 : 80));\n  };\n\n  return (\n    <Animated.View\n      entering={FadeInDown}\n      exiting={FadeOutDown}\n      style={[styles.container, isKeyboardVisible ? { top: topValue } : { bottom: 0 }]}\n      onLayout={handleLayout}\n    >\n      {render()}\n    </Animated.View>\n  );\n}\n\nexport default ZSAboveKeyboard;\n\nconst styles = StyleSheet.create({\n  container: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n    zIndex: 8400,\n    width: '100%',\n  },\n});\n"]}

package/build/ui/ZSContainer/index.d.ts

@@ -14,9 +14,21 @@ export type ZSContainerProps = ViewProps & {
     translucent?: boolean;
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     scrollEventThrottle?: number;
+    scrollToFocusedInput?: boolean;
 };
 export type ZSContainerRef = ScrollView;
-declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
+export declare const styles: {
+    flex1: {
+        flex: number;
+        width: "100%";
+    };
+    scrollContainerStyle: {
+        flexGrow: number;
+        alignItems: "center";
+        width: "100%";
+    };
+};
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ViewProps & {
     backgroundColor?: string;
     statusBarColor?: string;
     barStyle?: "light-content" | "dark-content";
@@ -30,17 +42,7 @@ declare const ZSContainer: React.ForwardRefExoticComponent<ViewProps & {
     translucent?: boolean;
     onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     scrollEventThrottle?: number;
-} & React.RefAttributes<ScrollView>>;
-export declare const styles: {
-    flex1: {
-        flex: number;
-        width: "100%";
-    };
-    scrollContainerStyle: {
-        flexGrow: number;
-        alignItems: "center";
-        width: "100%";
-    };
-};
-export default ZSContainer;
+    scrollToFocusedInput?: boolean;
+} & React.RefAttributes<ScrollView>>>;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build/ui/ZSContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAgE,MAAM,OAAO,CAAC;AACvG,OAAO,EAAE,SAAS,EAAyB,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAA4B,MAAM,cAAc,CAAC;AAI/I,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,QAAA,MAAM,WAAW;sBAjBG,MAAM;qBACP,MAAM;eACZ,eAAe,GAAG,cAAc;YACnC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;yBAC7B,OAAO;mBACb,SAAS;sBACN,SAAS;qBACV,SAAS;mCACK,OAAO;gCACV,MAAM;kBACpB,OAAO;eACV,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI;0BAC7C,MAAM;oCAuH5B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;CAGjB,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAsF,MAAM,OAAO,CAAC;AAC7H,OAAO,EAAE,SAAS,EAAyB,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAA4B,MAAM,cAAc,CAAC;AAW/I,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAiJxC,eAAO,MAAM,MAAM;;;;;;;;;;CAGjB,CAAC;;sBApKiB,MAAM;qBACP,MAAM;eACZ,eAAe,GAAG,cAAc;YACnC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;yBAC7B,OAAO;mBACb,SAAS;sBACN,SAAS;qBACV,SAAS;mCACK,OAAO;gCACV,MAAM;kBACpB,OAAO;eACV,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI;0BAC7C,MAAM;2BACL,OAAO;;AAkLhC,wBAAsD"}

package/build/ui/ZSContainer/index.js

@@ -1,73 +1,113 @@
-import React, { useEffect, useImperativeHandle, forwardRef, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, forwardRef, useRef, useState, useCallback, useMemo } from 'react';
 import { StatusBar, StyleSheet, ScrollView, Keyboard, View, Platform } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTheme } from '../../model/useThemeProvider';
-const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, statusBarColor, barStyle, edges = ['top', 'bottom'], scrollViewDisabled = false, topComponent, bottomComponent, rightComponent, showsVerticalScrollIndicator = true, keyboardScrollExtraOffset = 30, translucent, scrollEventThrottle = 16, ...props }, forwardedRef) {
+const IS_IOS = Platform.OS === 'ios';
+const KEYBOARD_ANIMATION_DELAY = 50;
+const keyboardEvents = {
+    showEvent: IS_IOS ? 'keyboardWillShow' : 'keyboardDidShow',
+    hideEvent: IS_IOS ? 'keyboardWillHide' : 'keyboardDidHide',
+};
+const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, statusBarColor, barStyle, edges = ['top', 'bottom'], scrollViewDisabled = false, topComponent, bottomComponent, rightComponent, showsVerticalScrollIndicator = true, keyboardScrollExtraOffset = 30, translucent, scrollEventThrottle = 16, scrollToFocusedInput = true, ...props }, forwardedRef) {
     const { palette, dimensions: { height: windowHeight } } = useTheme();
     const positionRef = useRef(0);
     const scrollViewRef = useRef(null);
     const lastTouchY = useRef(0);
     const [keyboardHeight, setKeyboardHeight] = useState(0);
     useImperativeHandle(forwardedRef, () => scrollViewRef.current, []);
+    const handleKeyboardShow = useCallback((e) => {
+        setKeyboardHeight(e.endCoordinates.height);
+        if (scrollViewRef.current && scrollToFocusedInput) {
+            const keyboardHeight = e.endCoordinates.height;
+            const safeAreaBottom = 0;
+            const availableScreenHeight = windowHeight - keyboardHeight - safeAreaBottom;
+            const currentScrollPosition = positionRef.current || 0;
+            const touchPosition = lastTouchY.current || 0;
+            // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산
+            const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;
+            setTimeout(() => {
+                scrollViewRef.current?.scrollTo({
+                    y: currentScrollPosition + scrollOffset,
+                    animated: true,
+                });
+            }, KEYBOARD_ANIMATION_DELAY);
+        }
+    }, [windowHeight, keyboardScrollExtraOffset, scrollToFocusedInput]);
+    // 키보드 숨김 핸들러를 메모이제이션하여 성능 최적화
+    const handleKeyboardHide = useCallback(() => {
+        setKeyboardHeight(0);
+    }, []);
     useEffect(() => {
-        const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-        const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-        const keyboardShowSubscription = Keyboard.addListener(showEvent, (e) => {
-            setKeyboardHeight(e.endCoordinates.height);
-            if (scrollViewRef.current) {
-                const screenHeight = windowHeight;
-                const keyboardHeight = e.endCoordinates.height;
-                const safeAreaBottom = 0;
-                const availableScreenHeight = screenHeight - keyboardHeight - safeAreaBottom;
-                const currentScrollPosition = positionRef.current || 0;
-                const touchPosition = lastTouchY.current || 0;
-                // touchPosition이 키보드 높이보다 아래인 경우
-                // const isTouchPositionBelowKeyboard = touchPosition > availableScreenHeight;
-                // 현재 터치 위치와 스크롤 위치를 기반으로 새로운 스크롤 위치 계산
-                const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;
-                setTimeout(() => {
-                    scrollViewRef.current?.scrollTo({
-                        y: currentScrollPosition + scrollOffset,
-                        animated: true,
-                    });
-                }, 100);
-            }
-        });
-        const keyboardHideSubscription = Keyboard.addListener(hideEvent, () => {
-            setKeyboardHeight(0);
-        });
+        const keyboardShowSubscription = Keyboard.addListener(keyboardEvents.showEvent, handleKeyboardShow);
+        const keyboardHideSubscription = Keyboard.addListener(keyboardEvents.hideEvent, handleKeyboardHide);
         return () => {
             positionRef.current = null;
             lastTouchY.current = null;
             keyboardShowSubscription.remove();
             keyboardHideSubscription.remove();
         };
-    }, [keyboardScrollExtraOffset]);
-    const handleScroll = (event) => {
+    }, [keyboardEvents.showEvent, keyboardEvents.hideEvent, handleKeyboardShow, handleKeyboardHide]);
+    const handleScroll = useCallback((event) => {
         if (props.onScroll)
             props.onScroll(event);
         positionRef.current = event.nativeEvent.contentOffset.y;
-    };
-    const handleTouch = (evt) => {
+    }, [props.onScroll]);
+    const handleTouch = useCallback((evt) => {
         lastTouchY.current = evt.nativeEvent.pageY;
-    };
-    return (<SafeAreaView style={[{ backgroundColor: backgroundColor || palette.background.base }, styles.flex1]} edges={edges}>
+    }, []);
+    const safeAreaStyle = useMemo(() => [
+        { backgroundColor: backgroundColor || palette.background.base },
+        styles.flex1
+    ], [backgroundColor, palette.background.base]);
+    const scrollContentStyle = useMemo(() => [
+        styles.scrollContainerStyle,
+        {
+            paddingBottom: keyboardHeight ? (IS_IOS ? keyboardHeight : keyboardScrollExtraOffset) : 0
+        }
+    ], [keyboardHeight, keyboardScrollExtraOffset]);
+    const containerStyle = useMemo(() => [
+        styles.flex1,
+        props.style
+    ], [props.style]);
+    const shouldShowStatusBar = useMemo(() => Boolean(barStyle || statusBarColor || translucent), [barStyle, statusBarColor, translucent]);
+    return (<SafeAreaView style={safeAreaStyle} edges={edges}>
       <View style={styles.flex1}>
-        {topComponent && topComponent}
-        <ScrollView ref={scrollViewRef} style={styles.flex1} contentContainerStyle={[styles.scrollContainerStyle, { paddingBottom: Platform.OS === 'ios' ? keyboardHeight || 0 : 0 }]} bounces={false} overScrollMode="never" showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={false} onScroll={handleScroll} onTouchStart={handleTouch} scrollEventThrottle={scrollEventThrottle}>
-          <View style={[styles.flex1, props.style]}>
-            {props.children}
-          </View>
-        </ScrollView>
-        {bottomComponent && bottomComponent}
+        {topComponent}
+        {scrollViewDisabled ? (<View style={styles.flex1}>
+              {props.children}
+            </View>) : (<ScrollView ref={scrollViewRef} style={styles.flex1} contentContainerStyle={scrollContentStyle} bounces={false} overScrollMode="never" showsVerticalScrollIndicator={showsVerticalScrollIndicator} keyboardShouldPersistTaps="handled" automaticallyAdjustKeyboardInsets={false} onScroll={handleScroll} onTouchStart={handleTouch} scrollEventThrottle={scrollEventThrottle}>
+              <View style={containerStyle}>
+                {props.children}
+              </View>
+            </ScrollView>)}
+        {bottomComponent}
       </View>
 
-      {(barStyle || statusBarColor || translucent) && (<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} translucent={translucent}/>)}
+      {shouldShowStatusBar && (<StatusBar barStyle={barStyle} backgroundColor={statusBarColor || palette.background.base} translucent={translucent}/>)}
     </SafeAreaView>);
 });
 export const styles = StyleSheet.create({
     flex1: { flex: 1, width: '100%' },
     scrollContainerStyle: { flexGrow: 1, alignItems: 'center', width: '100%' },
 });
-export default ZSContainer;
+const arePropsEqual = (prevProps, nextProps) => {
+    return (prevProps.backgroundColor === nextProps.backgroundColor &&
+        prevProps.statusBarColor === nextProps.statusBarColor &&
+        prevProps.barStyle === nextProps.barStyle &&
+        prevProps.scrollViewDisabled === nextProps.scrollViewDisabled &&
+        prevProps.showsVerticalScrollIndicator === nextProps.showsVerticalScrollIndicator &&
+        prevProps.keyboardScrollExtraOffset === nextProps.keyboardScrollExtraOffset &&
+        prevProps.translucent === nextProps.translucent &&
+        prevProps.scrollEventThrottle === nextProps.scrollEventThrottle &&
+        prevProps.scrollToFocusedInput === nextProps.scrollToFocusedInput &&
+        prevProps.onScroll === nextProps.onScroll &&
+        prevProps.style === nextProps.style &&
+        prevProps.children === nextProps.children &&
+        prevProps.topComponent === nextProps.topComponent &&
+        prevProps.bottomComponent === nextProps.bottomComponent &&
+        prevProps.rightComponent === nextProps.rightComponent &&
+        // edges 배열 비교
+        JSON.stringify(prevProps.edges) === JSON.stringify(nextProps.edges));
+};
+export default React.memo(ZSContainer, arePropsEqual);
 //# sourceMappingURL=index.js.map