@sendbird/uikit-react-native-foundation 3.12.7 → 3.12.8

package/lib/commonjs/components/Modal/ModalSafeArea.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _uikitUtils = require("@sendbird/uikit-utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ModalSafeArea = ({
+  children
+}) => {
+  const safeArea = (0, _uikitUtils.useSafeAreaPadding)(['top', 'bottom', 'left', 'right']);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children(safeArea));
+};
+var _default = exports.default = ModalSafeArea;
+//# sourceMappingURL=ModalSafeArea.js.map

package/lib/commonjs/components/Modal/ModalSafeArea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_uikitUtils","e","__esModule","default","ModalSafeArea","children","safeArea","useSafeAreaPadding","createElement","Fragment","_default","exports"],"sources":["ModalSafeArea.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { useSafeAreaPadding } from '@sendbird/uikit-utils';\n\ntype SafeAreaPadding = {\n  paddingTop: number;\n  paddingBottom: number;\n  paddingStart: number;\n  paddingEnd: number;\n};\n\ntype Props = {\n  children: (safeArea: SafeAreaPadding) => ReactNode;\n};\n\nconst ModalSafeArea = ({ children }: Props) => {\n  const safeArea = useSafeAreaPadding(['top', 'bottom', 'left', 'right']);\n  return <>{children(safeArea)}</>;\n};\n\nexport default ModalSafeArea;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,WAAA,GAAAD,OAAA;AAA2D,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAa3D,MAAMG,aAAa,GAAGA,CAAC;EAAEC;AAAgB,CAAC,KAAK;EAC7C,MAAMC,QAAQ,GAAG,IAAAC,8BAAkB,EAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;EACvE,oBAAOV,MAAA,CAAAM,OAAA,CAAAK,aAAA,CAAAX,MAAA,CAAAM,OAAA,CAAAM,QAAA,QAAGJ,QAAQ,CAACC,QAAQ,CAAI,CAAC;AAClC,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAR,OAAA,GAEaC,aAAa","ignoreList":[]}

package/lib/commonjs/components/Modal/index.js

@@ -6,12 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
 var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
 var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const isEdgeToEdgeWindow = () => {
+  if (_reactNative.Platform.OS !== 'android') return false;
+  const metrics = _reactNativeSafeAreaContext.initialWindowMetrics;
+  if (!metrics) return false;
+  return metrics.frame.y + metrics.frame.height >= _reactNative.Dimensions.get('screen').height;
+};
 /**
  * Modal Open: Triggered by Modal.props.visible state changed to true
  * - visible true -> modalVisible true -> animation start
@@ -51,12 +58,14 @@ const Modal = ({
     width,
     height
   } = (0, _reactNative.useWindowDimensions)();
+  const edgeToEdgeWindow = isEdgeToEdgeWindow();
   (0, _react.useEffect)(() => {
     if (visible) showAction();else hideAction();
   }, [visible]);
   useOnDismiss(modalVisible, onDismiss);
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.Modal, _extends({
     statusBarTranslucent: statusBarTranslucent,
+    navigationBarTranslucent: Boolean(statusBarTranslucent) && edgeToEdgeWindow,
     transparent: true,
     hardwareAccelerated: true,
     visible: modalVisible,
@@ -65,7 +74,10 @@ const Modal = ({
     onDismiss: onDismiss,
     supportedOrientations: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'],
     animationType: 'none'
-  }, props), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
+  }, props), /*#__PURE__*/_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaProvider, {
+    initialMetrics: _reactNativeSafeAreaContext.initialWindowMetrics,
+    style: styles.background
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
     onPress: disableBackgroundClose ? undefined : onClose
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
     style: [_reactNative.StyleSheet.absoluteFill, {
@@ -96,7 +108,7 @@ const Modal = ({
   }, panResponder.panHandlers), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable
   // NOTE: https://github.com/facebook/react-native/issues/14295
   //  Due to 'Pressable', the width of the children must be explicitly specified as a number.
-  , null, children)))));
+  , null, children))))));
 };
 const isHideGesture = (distanceY, velocityY) => {
   return distanceY > 125 || distanceY > 0 && velocityY > 0.1;

package/lib/commonjs/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_createStyleSheet","_interopRequireDefault","_useHeaderStyle","_useUIKitTheme","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","Modal","children","onClose","backgroundStyle","onDismiss","type","visible","disableBackgroundClose","enableKeyboardAvoid","statusBarTranslucent","props","palette","useUIKitTheme","content","backdrop","showTransition","hideTransition","useModalAnimation","panResponder","useModalPanResponder","translateY","topInset","useHeaderStyle","modalVisible","setModalVisible","useState","showAction","hideAction","width","height","useWindowDimensions","useEffect","useOnDismiss","createElement","View","transparent","hardwareAccelerated","onRequestClose","onShow","supportedOrientations","animationType","TouchableWithoutFeedback","onPress","undefined","Animated","style","StyleSheet","absoluteFill","opacity","backgroundColor","onBackgroundLight03","KeyboardAvoidingView","key","Platform","OS","enabled","styles","background","behavior","select","ios","pointerEvents","keyboardVerticalOffset","transform","panHandlers","Pressable","isHideGesture","distanceY","velocityY","show","hide","React","useRef","PanResponder","create","onMoveShouldSetPanResponderCapture","_","dy","onPanResponderGrant","setOffset","__getValue","onPanResponderMove","setValue","onPanResponderRelease","vy","current","initialY","Dimensions","baseAnimBackground","Value","baseAnimContent","interpolate","inputRange","outputRange","createTransition","toValue","config","duration","useNativeDriver","parallel","timing","start","prevVisible","usePrevProp","prop","prev","curr","createStyleSheet","flex","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  Dimensions,\n  KeyboardAvoidingView,\n  ModalProps,\n  PanResponder,\n  Platform,\n  Pressable,\n  Modal as RNModal,\n  StyleProp,\n  StyleSheet,\n  TouchableWithoutFeedback,\n  View,\n  ViewStyle,\n  useWindowDimensions,\n} from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';\ntype Props = {\n  type?: ModalAnimationType;\n  onClose: () => void;\n  backgroundStyle?: StyleProp<ViewStyle>;\n  disableBackgroundClose?: boolean;\n  enableKeyboardAvoid?: boolean;\n} & Omit<ModalProps, 'animationType' | 'onRequestClose'>;\n\n/**\n * Modal Open: Triggered by Modal.props.visible state changed to true\n * - visible true -> modalVisible true -> animation start\n *\n * Modal Close: Triggered by Modal.props.onClose() call\n * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false\n * */\nconst Modal = ({\n  children,\n  onClose,\n  backgroundStyle,\n  onDismiss,\n  type = 'fade',\n  visible = false,\n  disableBackgroundClose = false,\n  enableKeyboardAvoid = false,\n  statusBarTranslucent,\n  ...props\n}: Props) => {\n  const { palette } = useUIKitTheme();\n  const { content, backdrop, showTransition, hideTransition } = useModalAnimation(type);\n  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);\n  const { topInset } = useHeaderStyle();\n\n  const [modalVisible, setModalVisible] = useState(false);\n  const showAction = () => setModalVisible(true);\n  const hideAction = () => hideTransition(() => setModalVisible(false));\n\n  const { width, height } = useWindowDimensions();\n\n  useEffect(() => {\n    if (visible) showAction();\n    else hideAction();\n  }, [visible]);\n\n  useOnDismiss(modalVisible, onDismiss);\n\n  return (\n    <View>\n      <RNModal\n        statusBarTranslucent={statusBarTranslucent}\n        transparent\n        hardwareAccelerated\n        visible={modalVisible}\n        onRequestClose={onClose}\n        onShow={() => showTransition()}\n        onDismiss={onDismiss}\n        supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}\n        animationType={'none'}\n        {...props}\n      >\n        <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>\n          <Animated.View\n            style={[\n              StyleSheet.absoluteFill,\n              {\n                opacity: backdrop.opacity,\n                backgroundColor: palette.onBackgroundLight03,\n              },\n            ]}\n          />\n        </TouchableWithoutFeedback>\n        <KeyboardAvoidingView\n          // NOTE: This is trick for Android.\n          //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.\n          key={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}\n          enabled={enableKeyboardAvoid}\n          style={styles.background}\n          behavior={Platform.select({ ios: 'padding', default: 'height' })}\n          pointerEvents={'box-none'}\n          keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}\n        >\n          <Animated.View\n            style={[\n              styles.background,\n              backgroundStyle,\n              { opacity: content.opacity, transform: [{ translateY: content.translateY }] },\n            ]}\n            pointerEvents={'box-none'}\n            {...panResponder.panHandlers}\n          >\n            <Pressable\n            // NOTE: https://github.com/facebook/react-native/issues/14295\n            //  Due to 'Pressable', the width of the children must be explicitly specified as a number.\n            >\n              {children}\n            </Pressable>\n          </Animated.View>\n        </KeyboardAvoidingView>\n      </RNModal>\n    </View>\n  );\n};\n\nconst isHideGesture = (distanceY: number, velocityY: number) => {\n  return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);\n};\nconst useModalPanResponder = (\n  type: ModalAnimationType,\n  translateY: Animated.Value,\n  show: () => void,\n  hide: () => void,\n) => {\n  if (type === 'fade' || type === 'slide-no-gesture') return { panHandlers: {} };\n  return React.useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,\n      // @ts-ignore\n      onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),\n      onPanResponderMove: (_, { dy }) => dy >= 0 && translateY.setValue(dy), // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),\n      onPanResponderRelease: (_, { dy, vy }) => {\n        if (isHideGesture(dy, vy)) hide();\n        else show();\n      },\n    }),\n  ).current;\n};\n\nconst useModalAnimation = (type: ModalAnimationType) => {\n  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;\n  const baseAnimBackground = useRef(new Animated.Value(0)).current;\n  const baseAnimContent = useRef(new Animated.Value(initialY)).current;\n\n  const content = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [type === 'fade' ? 0 : 1, 1],\n    }),\n    translateY: baseAnimContent,\n  };\n  const backdrop = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [0, 1],\n    }),\n  };\n  const createTransition = (toValue: 0 | 1) => {\n    const config = { duration: 250, useNativeDriver: false };\n    return Animated.parallel([\n      Animated.timing(baseAnimBackground, { toValue, ...config }),\n      Animated.timing(baseAnimContent, { toValue: toValue === 0 ? initialY : 0, ...config }),\n    ]).start;\n  };\n  return {\n    content,\n    backdrop,\n    showTransition: createTransition(1),\n    hideTransition: createTransition(0),\n  };\n};\n\n// NOTE: onDismiss is supports iOS only\nconst useOnDismiss = (visible: boolean, onDismiss?: () => void) => {\n  const prevVisible = usePrevProp(visible);\n  useEffect(() => {\n    if (Platform.OS === 'ios') return;\n    if (prevVisible && !visible) onDismiss?.();\n  }, [prevVisible, visible]);\n};\n\nconst usePrevProp = <T,>(prop: T) => {\n  const prev = useRef(prop);\n  const curr = useRef(prop);\n  useEffect(() => {\n    prev.current = curr.current;\n    curr.current = prop;\n  });\n  return prev.current;\n};\n\nconst styles = createStyleSheet({\n  background: { flex: 1 },\n});\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSafeAreaContext","_createStyleSheet","_interopRequireDefault","_useHeaderStyle","_useUIKitTheme","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","isEdgeToEdgeWindow","Platform","OS","metrics","initialWindowMetrics","frame","y","height","Dimensions","Modal","children","onClose","backgroundStyle","onDismiss","type","visible","disableBackgroundClose","enableKeyboardAvoid","statusBarTranslucent","props","palette","useUIKitTheme","content","backdrop","showTransition","hideTransition","useModalAnimation","panResponder","useModalPanResponder","translateY","topInset","useHeaderStyle","modalVisible","setModalVisible","useState","showAction","hideAction","width","useWindowDimensions","edgeToEdgeWindow","useEffect","useOnDismiss","createElement","View","navigationBarTranslucent","Boolean","transparent","hardwareAccelerated","onRequestClose","onShow","supportedOrientations","animationType","SafeAreaProvider","initialMetrics","style","styles","background","TouchableWithoutFeedback","onPress","undefined","Animated","StyleSheet","absoluteFill","opacity","backgroundColor","onBackgroundLight03","KeyboardAvoidingView","key","enabled","behavior","select","ios","pointerEvents","keyboardVerticalOffset","transform","panHandlers","Pressable","isHideGesture","distanceY","velocityY","show","hide","React","useRef","PanResponder","create","onMoveShouldSetPanResponderCapture","_","dy","onPanResponderGrant","setOffset","__getValue","onPanResponderMove","setValue","onPanResponderRelease","vy","current","initialY","baseAnimBackground","Value","baseAnimContent","interpolate","inputRange","outputRange","createTransition","toValue","config","duration","useNativeDriver","parallel","timing","start","prevVisible","usePrevProp","prop","prev","curr","createStyleSheet","flex","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  Dimensions,\n  KeyboardAvoidingView,\n  ModalProps,\n  PanResponder,\n  Platform,\n  Pressable,\n  Modal as RNModal,\n  StyleProp,\n  StyleSheet,\n  TouchableWithoutFeedback,\n  View,\n  ViewStyle,\n  useWindowDimensions,\n} from 'react-native';\nimport { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst isEdgeToEdgeWindow = () => {\n  if (Platform.OS !== 'android') return false;\n  const metrics = initialWindowMetrics;\n  if (!metrics) return false;\n  return metrics.frame.y + metrics.frame.height >= Dimensions.get('screen').height;\n};\n\ntype ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';\ntype Props = {\n  type?: ModalAnimationType;\n  onClose: () => void;\n  backgroundStyle?: StyleProp<ViewStyle>;\n  disableBackgroundClose?: boolean;\n  enableKeyboardAvoid?: boolean;\n} & Omit<ModalProps, 'animationType' | 'onRequestClose'>;\n\n/**\n * Modal Open: Triggered by Modal.props.visible state changed to true\n * - visible true -> modalVisible true -> animation start\n *\n * Modal Close: Triggered by Modal.props.onClose() call\n * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false\n * */\nconst Modal = ({\n  children,\n  onClose,\n  backgroundStyle,\n  onDismiss,\n  type = 'fade',\n  visible = false,\n  disableBackgroundClose = false,\n  enableKeyboardAvoid = false,\n  statusBarTranslucent,\n  ...props\n}: Props) => {\n  const { palette } = useUIKitTheme();\n  const { content, backdrop, showTransition, hideTransition } = useModalAnimation(type);\n  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);\n  const { topInset } = useHeaderStyle();\n\n  const [modalVisible, setModalVisible] = useState(false);\n  const showAction = () => setModalVisible(true);\n  const hideAction = () => hideTransition(() => setModalVisible(false));\n\n  const { width, height } = useWindowDimensions();\n  const edgeToEdgeWindow = isEdgeToEdgeWindow();\n\n  useEffect(() => {\n    if (visible) showAction();\n    else hideAction();\n  }, [visible]);\n\n  useOnDismiss(modalVisible, onDismiss);\n\n  return (\n    <View>\n      <RNModal\n        statusBarTranslucent={statusBarTranslucent}\n        navigationBarTranslucent={Boolean(statusBarTranslucent) && edgeToEdgeWindow}\n        transparent\n        hardwareAccelerated\n        visible={modalVisible}\n        onRequestClose={onClose}\n        onShow={() => showTransition()}\n        onDismiss={onDismiss}\n        supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}\n        animationType={'none'}\n        {...props}\n      >\n        <SafeAreaProvider initialMetrics={initialWindowMetrics} style={styles.background}>\n          <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>\n            <Animated.View\n              style={[\n                StyleSheet.absoluteFill,\n                {\n                  opacity: backdrop.opacity,\n                  backgroundColor: palette.onBackgroundLight03,\n                },\n              ]}\n            />\n          </TouchableWithoutFeedback>\n          <KeyboardAvoidingView\n            // NOTE: This is trick for Android.\n            //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.\n            key={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}\n            enabled={enableKeyboardAvoid}\n            style={styles.background}\n            behavior={Platform.select({ ios: 'padding', default: 'height' })}\n            pointerEvents={'box-none'}\n            keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}\n          >\n            <Animated.View\n              style={[\n                styles.background,\n                backgroundStyle,\n                { opacity: content.opacity, transform: [{ translateY: content.translateY }] },\n              ]}\n              pointerEvents={'box-none'}\n              {...panResponder.panHandlers}\n            >\n              <Pressable\n              // NOTE: https://github.com/facebook/react-native/issues/14295\n              //  Due to 'Pressable', the width of the children must be explicitly specified as a number.\n              >\n                {children}\n              </Pressable>\n            </Animated.View>\n          </KeyboardAvoidingView>\n        </SafeAreaProvider>\n      </RNModal>\n    </View>\n  );\n};\n\nconst isHideGesture = (distanceY: number, velocityY: number) => {\n  return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);\n};\nconst useModalPanResponder = (\n  type: ModalAnimationType,\n  translateY: Animated.Value,\n  show: () => void,\n  hide: () => void,\n) => {\n  if (type === 'fade' || type === 'slide-no-gesture') return { panHandlers: {} };\n  return React.useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,\n      // @ts-ignore\n      onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),\n      onPanResponderMove: (_, { dy }) => dy >= 0 && translateY.setValue(dy), // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),\n      onPanResponderRelease: (_, { dy, vy }) => {\n        if (isHideGesture(dy, vy)) hide();\n        else show();\n      },\n    }),\n  ).current;\n};\n\nconst useModalAnimation = (type: ModalAnimationType) => {\n  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;\n  const baseAnimBackground = useRef(new Animated.Value(0)).current;\n  const baseAnimContent = useRef(new Animated.Value(initialY)).current;\n\n  const content = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [type === 'fade' ? 0 : 1, 1],\n    }),\n    translateY: baseAnimContent,\n  };\n  const backdrop = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [0, 1],\n    }),\n  };\n  const createTransition = (toValue: 0 | 1) => {\n    const config = { duration: 250, useNativeDriver: false };\n    return Animated.parallel([\n      Animated.timing(baseAnimBackground, { toValue, ...config }),\n      Animated.timing(baseAnimContent, { toValue: toValue === 0 ? initialY : 0, ...config }),\n    ]).start;\n  };\n  return {\n    content,\n    backdrop,\n    showTransition: createTransition(1),\n    hideTransition: createTransition(0),\n  };\n};\n\n// NOTE: onDismiss is supports iOS only\nconst useOnDismiss = (visible: boolean, onDismiss?: () => void) => {\n  const prevVisible = usePrevProp(visible);\n  useEffect(() => {\n    if (Platform.OS === 'ios') return;\n    if (prevVisible && !visible) onDismiss?.();\n  }, [prevVisible, visible]);\n};\n\nconst usePrevProp = <T,>(prop: T) => {\n  const prev = useRef(prop);\n  const curr = useRef(prop);\n  useEffect(() => {\n    prev.current = curr.current;\n    curr.current = prop;\n  });\n  return prev.current;\n};\n\nconst styles = createStyleSheet({\n  background: { flex: 1 },\n});\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/index.js

@@ -147,6 +147,12 @@ Object.defineProperty(exports, "Modal", {
     return _Modal.default;
   }
 });
+Object.defineProperty(exports, "ModalSafeArea", {
+  enumerable: true,
+  get: function () {
+    return _ModalSafeArea.default;
+  }
+});
 Object.defineProperty(exports, "OpenChannelMessage", {
   enumerable: true,
   get: function () {
@@ -346,6 +352,7 @@ var _Icon = _interopRequireDefault(require("./components/Icon"));
 var _Image = _interopRequireDefault(require("./components/Image"));
 var _ImageWithPlaceholder = _interopRequireDefault(require("./components/ImageWithPlaceholder"));
 var _Modal = _interopRequireDefault(require("./components/Modal"));
+var _ModalSafeArea = _interopRequireDefault(require("./components/Modal/ModalSafeArea"));
 var _PressBox = _interopRequireDefault(require("./components/PressBox"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));
 var _RegexText = _interopRequireDefault(require("./components/RegexText"));

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icon","_interopRequireDefault","require","_Box","_Divider","_Icon","_Image","_ImageWithPlaceholder","_Modal","_PressBox","_ProgressBar","_RegexText","_Switch","_Text","_TextInput","_VideoThumbnail","_ActionMenu","_Alert","_Avatar","_Badge","_BottomSheet","_Button","_ChannelFrozenBanner","_Dialog","_GroupChannelMessage","_GroupChannelPreview","_Header","_LoadingSpinner","_MenuBar","_OpenChannelMessage","_OpenChannelPreview","_OutlinedButton","_Placeholder","_ProfileCard","_Prompt","_Toast","_interopRequireWildcard","_TypingIndicatorBubble","_createSelectByColorScheme","_createScaleFactor","_createStyleSheet","_createTypography","_getDefaultHeaderHeight","_HeaderStyleContext","_useHeaderStyle","_createTheme","_DarkUIKitTheme","_LightUIKitTheme","_Palette","_UIKitThemeContext","_UIKitThemeProvider","_useUIKitTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as PressBox } from './components/PressBox';\nexport { default as ProgressBar } from './components/ProgressBar';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\nexport { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n  TypoName,\n  UIKitTheme,\n  UIKitTypography,\n  FontAttributes,\n  BaseHeaderProps,\n  UIKitColorScheme,\n  UIKitColors,\n  ComponentColorTree,\n  UIKitPalette,\n  HeaderElement,\n  HeaderPartProps,\n  ComponentColors,\n  Component,\n  GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_icon","_interopRequireDefault","require","_Box","_Divider","_Icon","_Image","_ImageWithPlaceholder","_Modal","_ModalSafeArea","_PressBox","_ProgressBar","_RegexText","_Switch","_Text","_TextInput","_VideoThumbnail","_ActionMenu","_Alert","_Avatar","_Badge","_BottomSheet","_Button","_ChannelFrozenBanner","_Dialog","_GroupChannelMessage","_GroupChannelPreview","_Header","_LoadingSpinner","_MenuBar","_OpenChannelMessage","_OpenChannelPreview","_OutlinedButton","_Placeholder","_ProfileCard","_Prompt","_Toast","_interopRequireWildcard","_TypingIndicatorBubble","_createSelectByColorScheme","_createScaleFactor","_createStyleSheet","_createTypography","_getDefaultHeaderHeight","_HeaderStyleContext","_useHeaderStyle","_createTheme","_DarkUIKitTheme","_LightUIKitTheme","_Palette","_UIKitThemeContext","_UIKitThemeProvider","_useUIKitTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as ModalSafeArea } from './components/Modal/ModalSafeArea';\nexport { default as PressBox } from './components/PressBox';\nexport { default as ProgressBar } from './components/ProgressBar';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\nexport { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n  TypoName,\n  UIKitTheme,\n  UIKitTypography,\n  FontAttributes,\n  BaseHeaderProps,\n  UIKitColorScheme,\n  UIKitColors,\n  ComponentColorTree,\n  UIKitPalette,\n  HeaderElement,\n  HeaderPartProps,\n  ComponentColors,\n  Component,\n  GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/BottomSheet/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
-var _uikitUtils = require("@sendbird/uikit-utils");
 var _Modal = _interopRequireDefault(require("../../components/Modal"));
+var _ModalSafeArea = _interopRequireDefault(require("../../components/Modal/ModalSafeArea"));
 var _useHeaderStyle = _interopRequireDefault(require("../../styles/useHeaderStyle"));
 var _DialogSheet = _interopRequireDefault(require("../Dialog/DialogSheet"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -24,7 +24,6 @@ const BottomSheet = ({
   const {
     width
   } = (0, _reactNative.useWindowDimensions)();
-  const safeArea = (0, _uikitUtils.useSafeAreaPadding)(['bottom', 'left', 'right']);
   return /*#__PURE__*/_react.default.createElement(_Modal.default, {
     type: 'slide',
     onClose: onHide,
@@ -35,7 +34,7 @@ const BottomSheet = ({
       alignItems: 'center',
       justifyContent: 'flex-end'
     }
-  }, /*#__PURE__*/_react.default.createElement(_DialogSheet.default, {
+  }, /*#__PURE__*/_react.default.createElement(_ModalSafeArea.default, null, safeArea => /*#__PURE__*/_react.default.createElement(_DialogSheet.default, {
     style: {
       width,
       paddingBottom: safeArea.paddingBottom
@@ -59,7 +58,7 @@ const BottomSheet = ({
         onPress();
       } catch {}
     }
-  }, /*#__PURE__*/_react.default.createElement(_DialogSheet.default.Item, props)))));
+  }, /*#__PURE__*/_react.default.createElement(_DialogSheet.default.Item, props))))));
 };
 var _default = exports.default = BottomSheet;
 //# sourceMappingURL=index.js.map

package/lib/commonjs/ui/BottomSheet/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitUtils","_Modal","_useHeaderStyle","_DialogSheet","e","__esModule","default","BottomSheet","onDismiss","onHide","visible","sheetItems","HeaderComponent","statusBarTranslucent","useHeaderStyle","width","useWindowDimensions","safeArea","useSafeAreaPadding","createElement","type","onClose","backgroundStyle","alignItems","justifyContent","style","paddingBottom","map","onPress","props","idx","TouchableOpacity","activeOpacity","key","title","paddingStart","paddingEnd","disabled","Item","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { TouchableOpacity, useWindowDimensions } from 'react-native';\n\nimport { useSafeAreaPadding } from '@sendbird/uikit-utils';\n\nimport type Icon from '../../components/Icon';\nimport Modal from '../../components/Modal';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport DialogSheet from '../Dialog/DialogSheet';\n\ntype HeaderProps = { onClose: () => Promise<void> };\nexport type BottomSheetItem = {\n  sheetItems: {\n    icon?: keyof typeof Icon.Assets;\n    iconColor?: string;\n    title: string;\n    titleColor?: string;\n    disabled?: boolean;\n    onPress: () => void;\n  }[];\n  HeaderComponent?: (props: HeaderProps) => ReactNode;\n};\ntype Props = {\n  visible: boolean;\n  onHide: () => Promise<void>;\n  onError?: (error: unknown) => void;\n  onDismiss?: () => void;\n} & BottomSheetItem;\nconst BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);\n  return (\n    <Modal\n      type={'slide'}\n      onClose={onHide}\n      onDismiss={onDismiss}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}\n    >\n      <DialogSheet style={{ width, paddingBottom: safeArea.paddingBottom }}>\n        {HeaderComponent && <HeaderComponent onClose={onHide} />}\n        {sheetItems.map(({ onPress, ...props }, idx) => (\n          <TouchableOpacity\n            activeOpacity={0.75}\n            key={props.title + idx}\n            style={{ paddingStart: safeArea.paddingStart, paddingEnd: safeArea.paddingEnd }}\n            disabled={props.disabled}\n            onPress={async () => {\n              await onHide();\n              try {\n                onPress();\n              } catch {}\n            }}\n          >\n            <DialogSheet.Item {...props} />\n          </TouchableOpacity>\n        ))}\n      </DialogSheet>\n    </Modal>\n  );\n};\n\nexport default BottomSheet;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AAGA,IAAAG,MAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,eAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,YAAA,GAAAN,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAoBhD,MAAMG,WAAW,GAAGA,CAAC;EAAEC,SAAS;EAAEC,MAAM;EAAEC,OAAO;EAAEC,UAAU;EAAEC;AAAuB,CAAC,KAAK;EAC1F,MAAM;IAAEC;EAAqB,CAAC,GAAG,IAAAC,uBAAc,EAAC,CAAC;EACjD,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EACvC,MAAMC,QAAQ,GAAG,IAAAC,8BAAkB,EAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;EAChE,oBACEtB,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAAClB,MAAA,CAAAK,OAAK;IACJc,IAAI,EAAE,OAAQ;IACdC,OAAO,EAAEZ,MAAO;IAChBD,SAAS,EAAEA,SAAU;IACrBK,oBAAoB,EAAEA,oBAAqB;IAC3CH,OAAO,EAAEA,OAAQ;IACjBY,eAAe,EAAE;MAAEC,UAAU,EAAE,QAAQ;MAAEC,cAAc,EAAE;IAAW;EAAE,gBAEtE5B,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAAChB,YAAA,CAAAG,OAAW;IAACmB,KAAK,EAAE;MAAEV,KAAK;MAAEW,aAAa,EAAET,QAAQ,CAACS;IAAc;EAAE,GAClEd,eAAe,iBAAIhB,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAACP,eAAe;IAACS,OAAO,EAAEZ;EAAO,CAAE,CAAC,EACvDE,UAAU,CAACgB,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC,EAAEC,GAAG,kBACzClC,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAACpB,YAAA,CAAAgC,gBAAgB;IACfC,aAAa,EAAE,IAAK;IACpBC,GAAG,EAAEJ,KAAK,CAACK,KAAK,GAAGJ,GAAI;IACvBL,KAAK,EAAE;MAAEU,YAAY,EAAElB,QAAQ,CAACkB,YAAY;MAAEC,UAAU,EAAEnB,QAAQ,CAACmB;IAAW,CAAE;IAChFC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBT,OAAO,EAAE,MAAAA,CAAA,KAAY;MACnB,MAAMnB,MAAM,CAAC,CAAC;MACd,IAAI;QACFmB,OAAO,CAAC,CAAC;MACX,CAAC,CAAC,MAAM,CAAC;IACX;EAAE,gBAEFhC,MAAA,CAAAU,OAAA,CAAAa,aAAA,CAAChB,YAAA,CAAAG,OAAW,CAACgC,IAAI,EAAKT,KAAQ,CACd,CACnB,CACU,CACR,CAAC;AAEZ,CAAC;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAEaC,WAAW","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Modal","_ModalSafeArea","_useHeaderStyle","_DialogSheet","e","__esModule","default","BottomSheet","onDismiss","onHide","visible","sheetItems","HeaderComponent","statusBarTranslucent","useHeaderStyle","width","useWindowDimensions","createElement","type","onClose","backgroundStyle","alignItems","justifyContent","safeArea","style","paddingBottom","map","onPress","props","idx","TouchableOpacity","activeOpacity","key","title","paddingStart","paddingEnd","disabled","Item","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { TouchableOpacity, useWindowDimensions } from 'react-native';\n\nimport type Icon from '../../components/Icon';\nimport Modal from '../../components/Modal';\nimport ModalSafeArea from '../../components/Modal/ModalSafeArea';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport DialogSheet from '../Dialog/DialogSheet';\n\ntype HeaderProps = { onClose: () => Promise<void> };\nexport type BottomSheetItem = {\n  sheetItems: {\n    icon?: keyof typeof Icon.Assets;\n    iconColor?: string;\n    title: string;\n    titleColor?: string;\n    disabled?: boolean;\n    onPress: () => void;\n  }[];\n  HeaderComponent?: (props: HeaderProps) => ReactNode;\n};\ntype Props = {\n  visible: boolean;\n  onHide: () => Promise<void>;\n  onError?: (error: unknown) => void;\n  onDismiss?: () => void;\n} & BottomSheetItem;\nconst BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { width } = useWindowDimensions();\n  return (\n    <Modal\n      type={'slide'}\n      onClose={onHide}\n      onDismiss={onDismiss}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}\n    >\n      <ModalSafeArea>\n        {(safeArea) => (\n          <DialogSheet style={{ width, paddingBottom: safeArea.paddingBottom }}>\n            {HeaderComponent && <HeaderComponent onClose={onHide} />}\n            {sheetItems.map(({ onPress, ...props }, idx) => (\n              <TouchableOpacity\n                activeOpacity={0.75}\n                key={props.title + idx}\n                style={{ paddingStart: safeArea.paddingStart, paddingEnd: safeArea.paddingEnd }}\n                disabled={props.disabled}\n                onPress={async () => {\n                  await onHide();\n                  try {\n                    onPress();\n                  } catch {}\n                }}\n              >\n                <DialogSheet.Item {...props} />\n              </TouchableOpacity>\n            ))}\n          </DialogSheet>\n        )}\n      </ModalSafeArea>\n    </Modal>\n  );\n};\n\nexport default BottomSheet;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAGA,IAAAE,MAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,cAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,eAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,YAAA,GAAAN,sBAAA,CAAAC,OAAA;AAAgD,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAoBhD,MAAMG,WAAW,GAAGA,CAAC;EAAEC,SAAS;EAAEC,MAAM;EAAEC,OAAO;EAAEC,UAAU;EAAEC;AAAuB,CAAC,KAAK;EAC1F,MAAM;IAAEC;EAAqB,CAAC,GAAG,IAAAC,uBAAc,EAAC,CAAC;EACjD,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EACvC,oBACEpB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACjB,MAAA,CAAAM,OAAK;IACJY,IAAI,EAAE,OAAQ;IACdC,OAAO,EAAEV,MAAO;IAChBD,SAAS,EAAEA,SAAU;IACrBK,oBAAoB,EAAEA,oBAAqB;IAC3CH,OAAO,EAAEA,OAAQ;IACjBU,eAAe,EAAE;MAAEC,UAAU,EAAE,QAAQ;MAAEC,cAAc,EAAE;IAAW;EAAE,gBAEtE1B,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAAChB,cAAA,CAAAK,OAAa,QACViB,QAAQ,iBACR3B,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACd,YAAA,CAAAG,OAAW;IAACkB,KAAK,EAAE;MAAET,KAAK;MAAEU,aAAa,EAAEF,QAAQ,CAACE;IAAc;EAAE,GAClEb,eAAe,iBAAIhB,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACL,eAAe;IAACO,OAAO,EAAEV;EAAO,CAAE,CAAC,EACvDE,UAAU,CAACe,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC,EAAEC,GAAG,kBACzCjC,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAAClB,YAAA,CAAA+B,gBAAgB;IACfC,aAAa,EAAE,IAAK;IACpBC,GAAG,EAAEJ,KAAK,CAACK,KAAK,GAAGJ,GAAI;IACvBL,KAAK,EAAE;MAAEU,YAAY,EAAEX,QAAQ,CAACW,YAAY;MAAEC,UAAU,EAAEZ,QAAQ,CAACY;IAAW,CAAE;IAChFC,QAAQ,EAAER,KAAK,CAACQ,QAAS;IACzBT,OAAO,EAAE,MAAAA,CAAA,KAAY;MACnB,MAAMlB,MAAM,CAAC,CAAC;MACd,IAAI;QACFkB,OAAO,CAAC,CAAC;MACX,CAAC,CAAC,MAAM,CAAC;IACX;EAAE,gBAEF/B,MAAA,CAAAU,OAAA,CAAAW,aAAA,CAACd,YAAA,CAAAG,OAAW,CAAC+B,IAAI,EAAKT,KAAQ,CACd,CACnB,CACU,CAEF,CACV,CAAC;AAEZ,CAAC;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAjC,OAAA,GAEaC,WAAW","ignoreList":[]}

package/lib/module/components/Modal/ModalSafeArea.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useSafeAreaPadding } from '@sendbird/uikit-utils';
+const ModalSafeArea = ({
+  children
+}) => {
+  const safeArea = useSafeAreaPadding(['top', 'bottom', 'left', 'right']);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children(safeArea));
+};
+export default ModalSafeArea;
+//# sourceMappingURL=ModalSafeArea.js.map

package/lib/module/components/Modal/ModalSafeArea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useSafeAreaPadding","ModalSafeArea","children","safeArea","createElement","Fragment"],"sources":["ModalSafeArea.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { useSafeAreaPadding } from '@sendbird/uikit-utils';\n\ntype SafeAreaPadding = {\n  paddingTop: number;\n  paddingBottom: number;\n  paddingStart: number;\n  paddingEnd: number;\n};\n\ntype Props = {\n  children: (safeArea: SafeAreaPadding) => ReactNode;\n};\n\nconst ModalSafeArea = ({ children }: Props) => {\n  const safeArea = useSafeAreaPadding(['top', 'bottom', 'left', 'right']);\n  return <>{children(safeArea)}</>;\n};\n\nexport default ModalSafeArea;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AAExC,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAgB,CAAC,KAAK;EAC7C,MAAMC,QAAQ,GAAGH,kBAAkB,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;EACvE,oBAAOD,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,QAAGH,QAAQ,CAACC,QAAQ,CAAI,CAAC;AAClC,CAAC;AAED,eAAeF,aAAa","ignoreList":[]}

package/lib/module/components/Modal/index.js

@@ -1,9 +1,16 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useEffect, useRef, useState } from 'react';
 import { Animated, Dimensions, KeyboardAvoidingView, PanResponder, Platform, Pressable, Modal as RNModal, StyleSheet, TouchableWithoutFeedback, View, useWindowDimensions } from 'react-native';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
+const isEdgeToEdgeWindow = () => {
+  if (Platform.OS !== 'android') return false;
+  const metrics = initialWindowMetrics;
+  if (!metrics) return false;
+  return metrics.frame.y + metrics.frame.height >= Dimensions.get('screen').height;
+};
 /**
  * Modal Open: Triggered by Modal.props.visible state changed to true
  * - visible true -> modalVisible true -> animation start
@@ -43,12 +50,14 @@ const Modal = ({
     width,
     height
   } = useWindowDimensions();
+  const edgeToEdgeWindow = isEdgeToEdgeWindow();
   useEffect(() => {
     if (visible) showAction();else hideAction();
   }, [visible]);
   useOnDismiss(modalVisible, onDismiss);
   return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(RNModal, _extends({
     statusBarTranslucent: statusBarTranslucent,
+    navigationBarTranslucent: Boolean(statusBarTranslucent) && edgeToEdgeWindow,
     transparent: true,
     hardwareAccelerated: true,
     visible: modalVisible,
@@ -57,7 +66,10 @@ const Modal = ({
     onDismiss: onDismiss,
     supportedOrientations: ['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'],
     animationType: 'none'
-  }, props), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+  }, props), /*#__PURE__*/React.createElement(SafeAreaProvider, {
+    initialMetrics: initialWindowMetrics,
+    style: styles.background
+  }, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
     onPress: disableBackgroundClose ? undefined : onClose
   }, /*#__PURE__*/React.createElement(Animated.View, {
     style: [StyleSheet.absoluteFill, {
@@ -88,7 +100,7 @@ const Modal = ({
   }, panResponder.panHandlers), /*#__PURE__*/React.createElement(Pressable
   // NOTE: https://github.com/facebook/react-native/issues/14295
   //  Due to 'Pressable', the width of the children must be explicitly specified as a number.
-  , null, children)))));
+  , null, children))))));
 };
 const isHideGesture = (distanceY, velocityY) => {
   return distanceY > 125 || distanceY > 0 && velocityY > 0.1;

package/lib/module/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Animated","Dimensions","KeyboardAvoidingView","PanResponder","Platform","Pressable","Modal","RNModal","StyleSheet","TouchableWithoutFeedback","View","useWindowDimensions","createStyleSheet","useHeaderStyle","useUIKitTheme","children","onClose","backgroundStyle","onDismiss","type","visible","disableBackgroundClose","enableKeyboardAvoid","statusBarTranslucent","props","palette","content","backdrop","showTransition","hideTransition","useModalAnimation","panResponder","useModalPanResponder","translateY","topInset","modalVisible","setModalVisible","showAction","hideAction","width","height","useOnDismiss","createElement","_extends","transparent","hardwareAccelerated","onRequestClose","onShow","supportedOrientations","animationType","onPress","undefined","style","absoluteFill","opacity","backgroundColor","onBackgroundLight03","key","OS","enabled","styles","background","behavior","select","ios","default","pointerEvents","keyboardVerticalOffset","transform","panHandlers","isHideGesture","distanceY","velocityY","show","hide","create","onMoveShouldSetPanResponderCapture","_","dy","onPanResponderGrant","setOffset","__getValue","onPanResponderMove","setValue","onPanResponderRelease","vy","current","initialY","get","baseAnimBackground","Value","baseAnimContent","interpolate","inputRange","outputRange","createTransition","toValue","config","duration","useNativeDriver","parallel","timing","start","prevVisible","usePrevProp","prop","prev","curr","flex"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  Dimensions,\n  KeyboardAvoidingView,\n  ModalProps,\n  PanResponder,\n  Platform,\n  Pressable,\n  Modal as RNModal,\n  StyleProp,\n  StyleSheet,\n  TouchableWithoutFeedback,\n  View,\n  ViewStyle,\n  useWindowDimensions,\n} from 'react-native';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';\ntype Props = {\n  type?: ModalAnimationType;\n  onClose: () => void;\n  backgroundStyle?: StyleProp<ViewStyle>;\n  disableBackgroundClose?: boolean;\n  enableKeyboardAvoid?: boolean;\n} & Omit<ModalProps, 'animationType' | 'onRequestClose'>;\n\n/**\n * Modal Open: Triggered by Modal.props.visible state changed to true\n * - visible true -> modalVisible true -> animation start\n *\n * Modal Close: Triggered by Modal.props.onClose() call\n * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false\n * */\nconst Modal = ({\n  children,\n  onClose,\n  backgroundStyle,\n  onDismiss,\n  type = 'fade',\n  visible = false,\n  disableBackgroundClose = false,\n  enableKeyboardAvoid = false,\n  statusBarTranslucent,\n  ...props\n}: Props) => {\n  const { palette } = useUIKitTheme();\n  const { content, backdrop, showTransition, hideTransition } = useModalAnimation(type);\n  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);\n  const { topInset } = useHeaderStyle();\n\n  const [modalVisible, setModalVisible] = useState(false);\n  const showAction = () => setModalVisible(true);\n  const hideAction = () => hideTransition(() => setModalVisible(false));\n\n  const { width, height } = useWindowDimensions();\n\n  useEffect(() => {\n    if (visible) showAction();\n    else hideAction();\n  }, [visible]);\n\n  useOnDismiss(modalVisible, onDismiss);\n\n  return (\n    <View>\n      <RNModal\n        statusBarTranslucent={statusBarTranslucent}\n        transparent\n        hardwareAccelerated\n        visible={modalVisible}\n        onRequestClose={onClose}\n        onShow={() => showTransition()}\n        onDismiss={onDismiss}\n        supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}\n        animationType={'none'}\n        {...props}\n      >\n        <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>\n          <Animated.View\n            style={[\n              StyleSheet.absoluteFill,\n              {\n                opacity: backdrop.opacity,\n                backgroundColor: palette.onBackgroundLight03,\n              },\n            ]}\n          />\n        </TouchableWithoutFeedback>\n        <KeyboardAvoidingView\n          // NOTE: This is trick for Android.\n          //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.\n          key={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}\n          enabled={enableKeyboardAvoid}\n          style={styles.background}\n          behavior={Platform.select({ ios: 'padding', default: 'height' })}\n          pointerEvents={'box-none'}\n          keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}\n        >\n          <Animated.View\n            style={[\n              styles.background,\n              backgroundStyle,\n              { opacity: content.opacity, transform: [{ translateY: content.translateY }] },\n            ]}\n            pointerEvents={'box-none'}\n            {...panResponder.panHandlers}\n          >\n            <Pressable\n            // NOTE: https://github.com/facebook/react-native/issues/14295\n            //  Due to 'Pressable', the width of the children must be explicitly specified as a number.\n            >\n              {children}\n            </Pressable>\n          </Animated.View>\n        </KeyboardAvoidingView>\n      </RNModal>\n    </View>\n  );\n};\n\nconst isHideGesture = (distanceY: number, velocityY: number) => {\n  return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);\n};\nconst useModalPanResponder = (\n  type: ModalAnimationType,\n  translateY: Animated.Value,\n  show: () => void,\n  hide: () => void,\n) => {\n  if (type === 'fade' || type === 'slide-no-gesture') return { panHandlers: {} };\n  return React.useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,\n      // @ts-ignore\n      onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),\n      onPanResponderMove: (_, { dy }) => dy >= 0 && translateY.setValue(dy), // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),\n      onPanResponderRelease: (_, { dy, vy }) => {\n        if (isHideGesture(dy, vy)) hide();\n        else show();\n      },\n    }),\n  ).current;\n};\n\nconst useModalAnimation = (type: ModalAnimationType) => {\n  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;\n  const baseAnimBackground = useRef(new Animated.Value(0)).current;\n  const baseAnimContent = useRef(new Animated.Value(initialY)).current;\n\n  const content = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [type === 'fade' ? 0 : 1, 1],\n    }),\n    translateY: baseAnimContent,\n  };\n  const backdrop = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [0, 1],\n    }),\n  };\n  const createTransition = (toValue: 0 | 1) => {\n    const config = { duration: 250, useNativeDriver: false };\n    return Animated.parallel([\n      Animated.timing(baseAnimBackground, { toValue, ...config }),\n      Animated.timing(baseAnimContent, { toValue: toValue === 0 ? initialY : 0, ...config }),\n    ]).start;\n  };\n  return {\n    content,\n    backdrop,\n    showTransition: createTransition(1),\n    hideTransition: createTransition(0),\n  };\n};\n\n// NOTE: onDismiss is supports iOS only\nconst useOnDismiss = (visible: boolean, onDismiss?: () => void) => {\n  const prevVisible = usePrevProp(visible);\n  useEffect(() => {\n    if (Platform.OS === 'ios') return;\n    if (prevVisible && !visible) onDismiss?.();\n  }, [prevVisible, visible]);\n};\n\nconst usePrevProp = <T,>(prop: T) => {\n  const prev = useRef(prop);\n  const curr = useRef(prop);\n  useEffect(() => {\n    prev.current = curr.current;\n    curr.current = prop;\n  });\n  return prev.current;\n};\n\nconst styles = createStyleSheet({\n  background: { flex: 1 },\n});\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","useState","Animated","Dimensions","KeyboardAvoidingView","PanResponder","Platform","Pressable","Modal","RNModal","StyleSheet","TouchableWithoutFeedback","View","useWindowDimensions","SafeAreaProvider","initialWindowMetrics","createStyleSheet","useHeaderStyle","useUIKitTheme","isEdgeToEdgeWindow","OS","metrics","frame","y","height","get","children","onClose","backgroundStyle","onDismiss","type","visible","disableBackgroundClose","enableKeyboardAvoid","statusBarTranslucent","props","palette","content","backdrop","showTransition","hideTransition","useModalAnimation","panResponder","useModalPanResponder","translateY","topInset","modalVisible","setModalVisible","showAction","hideAction","width","edgeToEdgeWindow","useOnDismiss","createElement","_extends","navigationBarTranslucent","Boolean","transparent","hardwareAccelerated","onRequestClose","onShow","supportedOrientations","animationType","initialMetrics","style","styles","background","onPress","undefined","absoluteFill","opacity","backgroundColor","onBackgroundLight03","key","enabled","behavior","select","ios","default","pointerEvents","keyboardVerticalOffset","transform","panHandlers","isHideGesture","distanceY","velocityY","show","hide","create","onMoveShouldSetPanResponderCapture","_","dy","onPanResponderGrant","setOffset","__getValue","onPanResponderMove","setValue","onPanResponderRelease","vy","current","initialY","baseAnimBackground","Value","baseAnimContent","interpolate","inputRange","outputRange","createTransition","toValue","config","duration","useNativeDriver","parallel","timing","start","prevVisible","usePrevProp","prop","prev","curr","flex"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  Dimensions,\n  KeyboardAvoidingView,\n  ModalProps,\n  PanResponder,\n  Platform,\n  Pressable,\n  Modal as RNModal,\n  StyleProp,\n  StyleSheet,\n  TouchableWithoutFeedback,\n  View,\n  ViewStyle,\n  useWindowDimensions,\n} from 'react-native';\nimport { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst isEdgeToEdgeWindow = () => {\n  if (Platform.OS !== 'android') return false;\n  const metrics = initialWindowMetrics;\n  if (!metrics) return false;\n  return metrics.frame.y + metrics.frame.height >= Dimensions.get('screen').height;\n};\n\ntype ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';\ntype Props = {\n  type?: ModalAnimationType;\n  onClose: () => void;\n  backgroundStyle?: StyleProp<ViewStyle>;\n  disableBackgroundClose?: boolean;\n  enableKeyboardAvoid?: boolean;\n} & Omit<ModalProps, 'animationType' | 'onRequestClose'>;\n\n/**\n * Modal Open: Triggered by Modal.props.visible state changed to true\n * - visible true -> modalVisible true -> animation start\n *\n * Modal Close: Triggered by Modal.props.onClose() call\n * - Modal.props.onClose() -> visible false -> animation start -> modalVisible false\n * */\nconst Modal = ({\n  children,\n  onClose,\n  backgroundStyle,\n  onDismiss,\n  type = 'fade',\n  visible = false,\n  disableBackgroundClose = false,\n  enableKeyboardAvoid = false,\n  statusBarTranslucent,\n  ...props\n}: Props) => {\n  const { palette } = useUIKitTheme();\n  const { content, backdrop, showTransition, hideTransition } = useModalAnimation(type);\n  const panResponder = useModalPanResponder(type, content.translateY, showTransition, onClose);\n  const { topInset } = useHeaderStyle();\n\n  const [modalVisible, setModalVisible] = useState(false);\n  const showAction = () => setModalVisible(true);\n  const hideAction = () => hideTransition(() => setModalVisible(false));\n\n  const { width, height } = useWindowDimensions();\n  const edgeToEdgeWindow = isEdgeToEdgeWindow();\n\n  useEffect(() => {\n    if (visible) showAction();\n    else hideAction();\n  }, [visible]);\n\n  useOnDismiss(modalVisible, onDismiss);\n\n  return (\n    <View>\n      <RNModal\n        statusBarTranslucent={statusBarTranslucent}\n        navigationBarTranslucent={Boolean(statusBarTranslucent) && edgeToEdgeWindow}\n        transparent\n        hardwareAccelerated\n        visible={modalVisible}\n        onRequestClose={onClose}\n        onShow={() => showTransition()}\n        onDismiss={onDismiss}\n        supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}\n        animationType={'none'}\n        {...props}\n      >\n        <SafeAreaProvider initialMetrics={initialWindowMetrics} style={styles.background}>\n          <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>\n            <Animated.View\n              style={[\n                StyleSheet.absoluteFill,\n                {\n                  opacity: backdrop.opacity,\n                  backgroundColor: palette.onBackgroundLight03,\n                },\n              ]}\n            />\n          </TouchableWithoutFeedback>\n          <KeyboardAvoidingView\n            // NOTE: This is trick for Android.\n            //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.\n            key={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}\n            enabled={enableKeyboardAvoid}\n            style={styles.background}\n            behavior={Platform.select({ ios: 'padding', default: 'height' })}\n            pointerEvents={'box-none'}\n            keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}\n          >\n            <Animated.View\n              style={[\n                styles.background,\n                backgroundStyle,\n                { opacity: content.opacity, transform: [{ translateY: content.translateY }] },\n              ]}\n              pointerEvents={'box-none'}\n              {...panResponder.panHandlers}\n            >\n              <Pressable\n              // NOTE: https://github.com/facebook/react-native/issues/14295\n              //  Due to 'Pressable', the width of the children must be explicitly specified as a number.\n              >\n                {children}\n              </Pressable>\n            </Animated.View>\n          </KeyboardAvoidingView>\n        </SafeAreaProvider>\n      </RNModal>\n    </View>\n  );\n};\n\nconst isHideGesture = (distanceY: number, velocityY: number) => {\n  return distanceY > 125 || (distanceY > 0 && velocityY > 0.1);\n};\nconst useModalPanResponder = (\n  type: ModalAnimationType,\n  translateY: Animated.Value,\n  show: () => void,\n  hide: () => void,\n) => {\n  if (type === 'fade' || type === 'slide-no-gesture') return { panHandlers: {} };\n  return React.useRef(\n    PanResponder.create({\n      onMoveShouldSetPanResponderCapture: (_, { dy }) => dy > 8,\n      // @ts-ignore\n      onPanResponderGrant: () => translateY.setOffset(translateY.__getValue()),\n      onPanResponderMove: (_, { dy }) => dy >= 0 && translateY.setValue(dy), // Animated.event([null, { dy: translateY }], { useNativeDriver: false }),\n      onPanResponderRelease: (_, { dy, vy }) => {\n        if (isHideGesture(dy, vy)) hide();\n        else show();\n      },\n    }),\n  ).current;\n};\n\nconst useModalAnimation = (type: ModalAnimationType) => {\n  const initialY = type === 'fade' ? 0 : Dimensions.get('window').height;\n  const baseAnimBackground = useRef(new Animated.Value(0)).current;\n  const baseAnimContent = useRef(new Animated.Value(initialY)).current;\n\n  const content = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [type === 'fade' ? 0 : 1, 1],\n    }),\n    translateY: baseAnimContent,\n  };\n  const backdrop = {\n    opacity: baseAnimBackground.interpolate({\n      inputRange: [0, 1],\n      outputRange: [0, 1],\n    }),\n  };\n  const createTransition = (toValue: 0 | 1) => {\n    const config = { duration: 250, useNativeDriver: false };\n    return Animated.parallel([\n      Animated.timing(baseAnimBackground, { toValue, ...config }),\n      Animated.timing(baseAnimContent, { toValue: toValue === 0 ? initialY : 0, ...config }),\n    ]).start;\n  };\n  return {\n    content,\n    backdrop,\n    showTransition: createTransition(1),\n    hideTransition: createTransition(0),\n  };\n};\n\n// NOTE: onDismiss is supports iOS only\nconst useOnDismiss = (visible: boolean, onDismiss?: () => void) => {\n  const prevVisible = usePrevProp(visible);\n  useEffect(() => {\n    if (Platform.OS === 'ios') return;\n    if (prevVisible && !visible) onDismiss?.();\n  }, [prevVisible, visible]);\n};\n\nconst usePrevProp = <T,>(prop: T) => {\n  const prev = useRef(prop);\n  const curr = useRef(prop);\n  useEffect(() => {\n    prev.current = curr.current;\n    curr.current = prop;\n  });\n  return prev.current;\n};\n\nconst styles = createStyleSheet({\n  background: { flex: 1 },\n});\n\nexport default Modal;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -8,6 +8,7 @@ export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
 export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
+export { default as ModalSafeArea } from './components/Modal/ModalSafeArea';
 export { default as PressBox } from './components/PressBox';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as RegexText } from './components/RegexText';

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","IconAssets","Box","Divider","Icon","Image","ImageWithPlaceholder","Modal","PressBox","ProgressBar","RegexText","Switch","Text","TextInput","VideoThumbnail","ActionMenu","Alert","Avatar","Badge","BottomSheet","Button","ChannelFrozenBanner","DialogProvider","useActionMenu","useAlert","usePrompt","useBottomSheet","GroupChannelMessage","GroupChannelPreview","Header","LoadingSpinner","MenuBar","OpenChannelMessage","OpenChannelPreview","OutlinedButton","Placeholder","ProfileCard","Prompt","Toast","useToast","ToastProvider","TypingIndicatorBubble","createSelectByColorScheme","createScaleFactor","createStyleSheet","createTypography","getDefaultHeaderHeight","HeaderStyleContext","HeaderStyleProvider","useHeaderStyle","createTheme","DarkUIKitTheme","LightUIKitTheme","Palette","UIKitThemeContext","UIKitThemeProvider","useUIKitTheme"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as PressBox } from './components/PressBox';\nexport { default as ProgressBar } from './components/ProgressBar';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\nexport { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n  TypoName,\n  UIKitTheme,\n  UIKitTypography,\n  FontAttributes,\n  BaseHeaderProps,\n  UIKitColorScheme,\n  UIKitColors,\n  ComponentColorTree,\n  UIKitPalette,\n  HeaderElement,\n  HeaderPartProps,\n  ComponentColors,\n  Component,\n  GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["default","IconAssets","Box","Divider","Icon","Image","ImageWithPlaceholder","Modal","ModalSafeArea","PressBox","ProgressBar","RegexText","Switch","Text","TextInput","VideoThumbnail","ActionMenu","Alert","Avatar","Badge","BottomSheet","Button","ChannelFrozenBanner","DialogProvider","useActionMenu","useAlert","usePrompt","useBottomSheet","GroupChannelMessage","GroupChannelPreview","Header","LoadingSpinner","MenuBar","OpenChannelMessage","OpenChannelPreview","OutlinedButton","Placeholder","ProfileCard","Prompt","Toast","useToast","ToastProvider","TypingIndicatorBubble","createSelectByColorScheme","createScaleFactor","createStyleSheet","createTypography","getDefaultHeaderHeight","HeaderStyleContext","HeaderStyleProvider","useHeaderStyle","createTheme","DarkUIKitTheme","LightUIKitTheme","Palette","UIKitThemeContext","UIKitThemeProvider","useUIKitTheme"],"sources":["index.ts"],"sourcesContent":["/** Assets **/\nexport { default as IconAssets } from './assets/icon';\n\n/** Component **/\nexport { default as Box } from './components/Box';\nexport { default as Divider } from './components/Divider';\nexport { default as Icon } from './components/Icon';\nexport { default as Image } from './components/Image';\nexport { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';\nexport { default as Modal } from './components/Modal';\nexport { default as ModalSafeArea } from './components/Modal/ModalSafeArea';\nexport { default as PressBox } from './components/PressBox';\nexport { default as ProgressBar } from './components/ProgressBar';\nexport { default as RegexText } from './components/RegexText';\nexport type { RegexTextPattern } from './components/RegexText';\nexport { default as Switch } from './components/Switch';\nexport { default as Text } from './components/Text';\nexport { default as TextInput } from './components/TextInput';\nexport { VideoThumbnail } from './components/VideoThumbnail';\n\n/** UI **/\nexport { default as ActionMenu } from './ui/ActionMenu';\nexport { default as Alert } from './ui/Alert';\nexport { default as Avatar } from './ui/Avatar';\nexport { default as Badge } from './ui/Badge';\nexport { default as BottomSheet } from './ui/BottomSheet';\nexport { default as Button } from './ui/Button';\nexport { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';\nexport { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';\nexport { default as GroupChannelMessage } from './ui/GroupChannelMessage';\nexport type { GroupChannelMessageProps } from './ui/GroupChannelMessage';\nexport { default as GroupChannelPreview } from './ui/GroupChannelPreview';\nexport { default as Header } from './ui/Header';\nexport { default as LoadingSpinner } from './ui/LoadingSpinner';\nexport { default as MenuBar } from './ui/MenuBar';\nexport type { MenuBarProps } from './ui/MenuBar';\nexport { default as OpenChannelMessage } from './ui/OpenChannelMessage';\nexport type { OpenChannelMessageProps } from './ui/OpenChannelMessage';\nexport { default as OpenChannelPreview } from './ui/OpenChannelPreview';\nexport { default as OutlinedButton } from './ui/OutlinedButton';\nexport { default as Placeholder } from './ui/Placeholder';\nexport { default as ProfileCard } from './ui/ProfileCard';\nexport { default as Prompt } from './ui/Prompt';\nexport { default as Toast, useToast, ToastProvider } from './ui/Toast';\nexport { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';\n\n/** Styles **/\nexport { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';\nexport { default as createScaleFactor } from './styles/createScaleFactor';\nexport { default as createStyleSheet } from './styles/createStyleSheet';\nexport { default as createTypography } from './styles/createTypography';\nexport { default as getDefaultHeaderHeight } from './styles/getDefaultHeaderHeight';\nexport { HeaderStyleContext, HeaderStyleProvider } from './styles/HeaderStyleContext';\nexport { default as useHeaderStyle } from './styles/useHeaderStyle';\n\n/** Theme **/\nexport { default as createTheme } from './theme/createTheme';\nexport { default as DarkUIKitTheme } from './theme/DarkUIKitTheme';\nexport { default as LightUIKitTheme } from './theme/LightUIKitTheme';\nexport { default as Palette } from './theme/Palette';\nexport { default as UIKitThemeContext } from './theme/UIKitThemeContext';\nexport { default as UIKitThemeProvider } from './theme/UIKitThemeProvider';\nexport { default as useUIKitTheme } from './theme/useUIKitTheme';\n\n/** Types **/\nexport type {\n  TypoName,\n  UIKitTheme,\n  UIKitTypography,\n  FontAttributes,\n  BaseHeaderProps,\n  UIKitColorScheme,\n  UIKitColors,\n  ComponentColorTree,\n  UIKitPalette,\n  HeaderElement,\n  HeaderPartProps,\n  ComponentColors,\n  Component,\n  GetColorTree,\n} from './types';\nexport type { ActionMenuItem } from './ui/ActionMenu';\nexport type { BottomSheetItem } from './ui/BottomSheet';\nexport type { UIKitTypographyOverrides } from './styles/createTypography';\nexport type { HeaderStyleContextType } from './styles/HeaderStyleContext';\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/BottomSheet/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacity, useWindowDimensions } from 'react-native';
-import { useSafeAreaPadding } from '@sendbird/uikit-utils';
 import Modal from '../../components/Modal';
+import ModalSafeArea from '../../components/Modal/ModalSafeArea';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import DialogSheet from '../Dialog/DialogSheet';
 const BottomSheet = ({
@@ -17,7 +17,6 @@ const BottomSheet = ({
   const {
     width
   } = useWindowDimensions();
-  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);
   return /*#__PURE__*/React.createElement(Modal, {
     type: 'slide',
     onClose: onHide,
@@ -28,7 +27,7 @@ const BottomSheet = ({
       alignItems: 'center',
       justifyContent: 'flex-end'
     }
-  }, /*#__PURE__*/React.createElement(DialogSheet, {
+  }, /*#__PURE__*/React.createElement(ModalSafeArea, null, safeArea => /*#__PURE__*/React.createElement(DialogSheet, {
     style: {
       width,
       paddingBottom: safeArea.paddingBottom
@@ -52,7 +51,7 @@ const BottomSheet = ({
         onPress();
       } catch {}
     }
-  }, /*#__PURE__*/React.createElement(DialogSheet.Item, props)))));
+  }, /*#__PURE__*/React.createElement(DialogSheet.Item, props))))));
 };
 export default BottomSheet;
 //# sourceMappingURL=index.js.map

package/lib/module/ui/BottomSheet/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","TouchableOpacity","useWindowDimensions","useSafeAreaPadding","Modal","useHeaderStyle","DialogSheet","BottomSheet","onDismiss","onHide","visible","sheetItems","HeaderComponent","statusBarTranslucent","width","safeArea","createElement","type","onClose","backgroundStyle","alignItems","justifyContent","style","paddingBottom","map","onPress","props","idx","activeOpacity","key","title","paddingStart","paddingEnd","disabled","Item"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { TouchableOpacity, useWindowDimensions } from 'react-native';\n\nimport { useSafeAreaPadding } from '@sendbird/uikit-utils';\n\nimport type Icon from '../../components/Icon';\nimport Modal from '../../components/Modal';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport DialogSheet from '../Dialog/DialogSheet';\n\ntype HeaderProps = { onClose: () => Promise<void> };\nexport type BottomSheetItem = {\n  sheetItems: {\n    icon?: keyof typeof Icon.Assets;\n    iconColor?: string;\n    title: string;\n    titleColor?: string;\n    disabled?: boolean;\n    onPress: () => void;\n  }[];\n  HeaderComponent?: (props: HeaderProps) => ReactNode;\n};\ntype Props = {\n  visible: boolean;\n  onHide: () => Promise<void>;\n  onError?: (error: unknown) => void;\n  onDismiss?: () => void;\n} & BottomSheetItem;\nconst BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { width } = useWindowDimensions();\n  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);\n  return (\n    <Modal\n      type={'slide'}\n      onClose={onHide}\n      onDismiss={onDismiss}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}\n    >\n      <DialogSheet style={{ width, paddingBottom: safeArea.paddingBottom }}>\n        {HeaderComponent && <HeaderComponent onClose={onHide} />}\n        {sheetItems.map(({ onPress, ...props }, idx) => (\n          <TouchableOpacity\n            activeOpacity={0.75}\n            key={props.title + idx}\n            style={{ paddingStart: safeArea.paddingStart, paddingEnd: safeArea.paddingEnd }}\n            disabled={props.disabled}\n            onPress={async () => {\n              await onHide();\n              try {\n                onPress();\n              } catch {}\n            }}\n          >\n            <DialogSheet.Item {...props} />\n          </TouchableOpacity>\n        ))}\n      </DialogSheet>\n    </Modal>\n  );\n};\n\nexport default BottomSheet;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,cAAc;AAEpE,SAASC,kBAAkB,QAAQ,uBAAuB;AAG1D,OAAOC,KAAK,MAAM,wBAAwB;AAC1C,OAAOC,cAAc,MAAM,6BAA6B;AACxD,OAAOC,WAAW,MAAM,uBAAuB;AAoB/C,MAAMC,WAAW,GAAGA,CAAC;EAAEC,SAAS;EAAEC,MAAM;EAAEC,OAAO;EAAEC,UAAU;EAAEC;AAAuB,CAAC,KAAK;EAC1F,MAAM;IAAEC;EAAqB,CAAC,GAAGR,cAAc,CAAC,CAAC;EACjD,MAAM;IAAES;EAAM,CAAC,GAAGZ,mBAAmB,CAAC,CAAC;EACvC,MAAMa,QAAQ,GAAGZ,kBAAkB,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;EAChE,oBACEH,KAAA,CAAAgB,aAAA,CAACZ,KAAK;IACJa,IAAI,EAAE,OAAQ;IACdC,OAAO,EAAET,MAAO;IAChBD,SAAS,EAAEA,SAAU;IACrBK,oBAAoB,EAAEA,oBAAqB;IAC3CH,OAAO,EAAEA,OAAQ;IACjBS,eAAe,EAAE;MAAEC,UAAU,EAAE,QAAQ;MAAEC,cAAc,EAAE;IAAW;EAAE,gBAEtErB,KAAA,CAAAgB,aAAA,CAACV,WAAW;IAACgB,KAAK,EAAE;MAAER,KAAK;MAAES,aAAa,EAAER,QAAQ,CAACQ;IAAc;EAAE,GAClEX,eAAe,iBAAIZ,KAAA,CAAAgB,aAAA,CAACJ,eAAe;IAACM,OAAO,EAAET;EAAO,CAAE,CAAC,EACvDE,UAAU,CAACa,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC,EAAEC,GAAG,kBACzC3B,KAAA,CAAAgB,aAAA,CAACf,gBAAgB;IACf2B,aAAa,EAAE,IAAK;IACpBC,GAAG,EAAEH,KAAK,CAACI,KAAK,GAAGH,GAAI;IACvBL,KAAK,EAAE;MAAES,YAAY,EAAEhB,QAAQ,CAACgB,YAAY;MAAEC,UAAU,EAAEjB,QAAQ,CAACiB;IAAW,CAAE;IAChFC,QAAQ,EAAEP,KAAK,CAACO,QAAS;IACzBR,OAAO,EAAE,MAAAA,CAAA,KAAY;MACnB,MAAMhB,MAAM,CAAC,CAAC;MACd,IAAI;QACFgB,OAAO,CAAC,CAAC;MACX,CAAC,CAAC,MAAM,CAAC;IACX;EAAE,gBAEFzB,KAAA,CAAAgB,aAAA,CAACV,WAAW,CAAC4B,IAAI,EAAKR,KAAQ,CACd,CACnB,CACU,CACR,CAAC;AAEZ,CAAC;AAED,eAAenB,WAAW","ignoreList":[]}
+{"version":3,"names":["React","TouchableOpacity","useWindowDimensions","Modal","ModalSafeArea","useHeaderStyle","DialogSheet","BottomSheet","onDismiss","onHide","visible","sheetItems","HeaderComponent","statusBarTranslucent","width","createElement","type","onClose","backgroundStyle","alignItems","justifyContent","safeArea","style","paddingBottom","map","onPress","props","idx","activeOpacity","key","title","paddingStart","paddingEnd","disabled","Item"],"sources":["index.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { TouchableOpacity, useWindowDimensions } from 'react-native';\n\nimport type Icon from '../../components/Icon';\nimport Modal from '../../components/Modal';\nimport ModalSafeArea from '../../components/Modal/ModalSafeArea';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport DialogSheet from '../Dialog/DialogSheet';\n\ntype HeaderProps = { onClose: () => Promise<void> };\nexport type BottomSheetItem = {\n  sheetItems: {\n    icon?: keyof typeof Icon.Assets;\n    iconColor?: string;\n    title: string;\n    titleColor?: string;\n    disabled?: boolean;\n    onPress: () => void;\n  }[];\n  HeaderComponent?: (props: HeaderProps) => ReactNode;\n};\ntype Props = {\n  visible: boolean;\n  onHide: () => Promise<void>;\n  onError?: (error: unknown) => void;\n  onDismiss?: () => void;\n} & BottomSheetItem;\nconst BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { width } = useWindowDimensions();\n  return (\n    <Modal\n      type={'slide'}\n      onClose={onHide}\n      onDismiss={onDismiss}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}\n    >\n      <ModalSafeArea>\n        {(safeArea) => (\n          <DialogSheet style={{ width, paddingBottom: safeArea.paddingBottom }}>\n            {HeaderComponent && <HeaderComponent onClose={onHide} />}\n            {sheetItems.map(({ onPress, ...props }, idx) => (\n              <TouchableOpacity\n                activeOpacity={0.75}\n                key={props.title + idx}\n                style={{ paddingStart: safeArea.paddingStart, paddingEnd: safeArea.paddingEnd }}\n                disabled={props.disabled}\n                onPress={async () => {\n                  await onHide();\n                  try {\n                    onPress();\n                  } catch {}\n                }}\n              >\n                <DialogSheet.Item {...props} />\n              </TouchableOpacity>\n            ))}\n          </DialogSheet>\n        )}\n      </ModalSafeArea>\n    </Modal>\n  );\n};\n\nexport default BottomSheet;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,cAAc;AAGpE,OAAOC,KAAK,MAAM,wBAAwB;AAC1C,OAAOC,aAAa,MAAM,sCAAsC;AAChE,OAAOC,cAAc,MAAM,6BAA6B;AACxD,OAAOC,WAAW,MAAM,uBAAuB;AAoB/C,MAAMC,WAAW,GAAGA,CAAC;EAAEC,SAAS;EAAEC,MAAM;EAAEC,OAAO;EAAEC,UAAU;EAAEC;AAAuB,CAAC,KAAK;EAC1F,MAAM;IAAEC;EAAqB,CAAC,GAAGR,cAAc,CAAC,CAAC;EACjD,MAAM;IAAES;EAAM,CAAC,GAAGZ,mBAAmB,CAAC,CAAC;EACvC,oBACEF,KAAA,CAAAe,aAAA,CAACZ,KAAK;IACJa,IAAI,EAAE,OAAQ;IACdC,OAAO,EAAER,MAAO;IAChBD,SAAS,EAAEA,SAAU;IACrBK,oBAAoB,EAAEA,oBAAqB;IAC3CH,OAAO,EAAEA,OAAQ;IACjBQ,eAAe,EAAE;MAAEC,UAAU,EAAE,QAAQ;MAAEC,cAAc,EAAE;IAAW;EAAE,gBAEtEpB,KAAA,CAAAe,aAAA,CAACX,aAAa,QACViB,QAAQ,iBACRrB,KAAA,CAAAe,aAAA,CAACT,WAAW;IAACgB,KAAK,EAAE;MAAER,KAAK;MAAES,aAAa,EAAEF,QAAQ,CAACE;IAAc;EAAE,GAClEX,eAAe,iBAAIZ,KAAA,CAAAe,aAAA,CAACH,eAAe;IAACK,OAAO,EAAER;EAAO,CAAE,CAAC,EACvDE,UAAU,CAACa,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAE,GAAGC;EAAM,CAAC,EAAEC,GAAG,kBACzC3B,KAAA,CAAAe,aAAA,CAACd,gBAAgB;IACf2B,aAAa,EAAE,IAAK;IACpBC,GAAG,EAAEH,KAAK,CAACI,KAAK,GAAGH,GAAI;IACvBL,KAAK,EAAE;MAAES,YAAY,EAAEV,QAAQ,CAACU,YAAY;MAAEC,UAAU,EAAEX,QAAQ,CAACW;IAAW,CAAE;IAChFC,QAAQ,EAAEP,KAAK,CAACO,QAAS;IACzBR,OAAO,EAAE,MAAAA,CAAA,KAAY;MACnB,MAAMhB,MAAM,CAAC,CAAC;MACd,IAAI;QACFgB,OAAO,CAAC,CAAC;MACX,CAAC,CAAC,MAAM,CAAC;IACX;EAAE,gBAEFzB,KAAA,CAAAe,aAAA,CAACT,WAAW,CAAC4B,IAAI,EAAKR,KAAQ,CACd,CACnB,CACU,CAEF,CACV,CAAC;AAEZ,CAAC;AAED,eAAenB,WAAW","ignoreList":[]}

package/lib/typescript/src/components/Modal/ModalSafeArea.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+type SafeAreaPadding = {
+    paddingTop: number;
+    paddingBottom: number;
+    paddingStart: number;
+    paddingEnd: number;
+};
+type Props = {
+    children: (safeArea: SafeAreaPadding) => ReactNode;
+};
+declare const ModalSafeArea: ({ children }: Props) => React.JSX.Element;
+export default ModalSafeArea;

package/lib/typescript/src/index.d.ts

@@ -7,6 +7,7 @@ export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
 export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
+export { default as ModalSafeArea } from './components/Modal/ModalSafeArea';
 export { default as PressBox } from './components/PressBox';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as RegexText } from './components/RegexText';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "3.12.7",
+  "version": "3.12.8",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -57,7 +57,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "3.12.7"
+    "@sendbird/uikit-utils": "3.12.8"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -94,5 +94,5 @@
       ]
     ]
   },
-  "gitHead": "63ebc4ffee5f5653f7275d331b187b1be2b0ba10"
+  "gitHead": "7fe7ec52a4649a0393d4b5d543109f47355952fe"
 }

package/src/components/Modal/ModalSafeArea.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+
+import { useSafeAreaPadding } from '@sendbird/uikit-utils';
+
+type SafeAreaPadding = {
+  paddingTop: number;
+  paddingBottom: number;
+  paddingStart: number;
+  paddingEnd: number;
+};
+
+type Props = {
+  children: (safeArea: SafeAreaPadding) => ReactNode;
+};
+
+const ModalSafeArea = ({ children }: Props) => {
+  const safeArea = useSafeAreaPadding(['top', 'bottom', 'left', 'right']);
+  return <>{children(safeArea)}</>;
+};
+
+export default ModalSafeArea;

package/src/components/Modal/index.tsx

@@ -15,11 +15,19 @@ import {
   ViewStyle,
   useWindowDimensions,
 } from 'react-native';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
 
 import createStyleSheet from '../../styles/createStyleSheet';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
+const isEdgeToEdgeWindow = () => {
+  if (Platform.OS !== 'android') return false;
+  const metrics = initialWindowMetrics;
+  if (!metrics) return false;
+  return metrics.frame.y + metrics.frame.height >= Dimensions.get('screen').height;
+};
+
 type ModalAnimationType = 'slide' | 'slide-no-gesture' | 'fade';
 type Props = {
   type?: ModalAnimationType;
@@ -58,6 +66,7 @@ const Modal = ({
   const hideAction = () => hideTransition(() => setModalVisible(false));
 
   const { width, height } = useWindowDimensions();
+  const edgeToEdgeWindow = isEdgeToEdgeWindow();
 
   useEffect(() => {
     if (visible) showAction();
@@ -70,6 +79,7 @@ const Modal = ({
     <View>
       <RNModal
         statusBarTranslucent={statusBarTranslucent}
+        navigationBarTranslucent={Boolean(statusBarTranslucent) && edgeToEdgeWindow}
         transparent
         hardwareAccelerated
         visible={modalVisible}
@@ -80,44 +90,46 @@ const Modal = ({
         animationType={'none'}
         {...props}
       >
-        <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>
-          <Animated.View
-            style={[
-              StyleSheet.absoluteFill,
-              {
-                opacity: backdrop.opacity,
-                backgroundColor: palette.onBackgroundLight03,
-              },
-            ]}
-          />
-        </TouchableWithoutFeedback>
-        <KeyboardAvoidingView
-          // NOTE: This is trick for Android.
-          //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.
-          key={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}
-          enabled={enableKeyboardAvoid}
-          style={styles.background}
-          behavior={Platform.select({ ios: 'padding', default: 'height' })}
-          pointerEvents={'box-none'}
-          keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}
-        >
-          <Animated.View
-            style={[
-              styles.background,
-              backgroundStyle,
-              { opacity: content.opacity, transform: [{ translateY: content.translateY }] },
-            ]}
+        <SafeAreaProvider initialMetrics={initialWindowMetrics} style={styles.background}>
+          <TouchableWithoutFeedback onPress={disableBackgroundClose ? undefined : onClose}>
+            <Animated.View
+              style={[
+                StyleSheet.absoluteFill,
+                {
+                  opacity: backdrop.opacity,
+                  backgroundColor: palette.onBackgroundLight03,
+                },
+              ]}
+            />
+          </TouchableWithoutFeedback>
+          <KeyboardAvoidingView
+            // NOTE: This is trick for Android.
+            //  When orientation is changed on Android, the offset that to avoid soft-keyboard is not updated normally.
+            key={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}
+            enabled={enableKeyboardAvoid}
+            style={styles.background}
+            behavior={Platform.select({ ios: 'padding', default: 'height' })}
             pointerEvents={'box-none'}
-            {...panResponder.panHandlers}
+            keyboardVerticalOffset={enableKeyboardAvoid && statusBarTranslucent ? -topInset : 0}
           >
-            <Pressable
-            // NOTE: https://github.com/facebook/react-native/issues/14295
-            //  Due to 'Pressable', the width of the children must be explicitly specified as a number.
+            <Animated.View
+              style={[
+                styles.background,
+                backgroundStyle,
+                { opacity: content.opacity, transform: [{ translateY: content.translateY }] },
+              ]}
+              pointerEvents={'box-none'}
+              {...panResponder.panHandlers}
             >
-              {children}
-            </Pressable>
-          </Animated.View>
-        </KeyboardAvoidingView>
+              <Pressable
+              // NOTE: https://github.com/facebook/react-native/issues/14295
+              //  Due to 'Pressable', the width of the children must be explicitly specified as a number.
+              >
+                {children}
+              </Pressable>
+            </Animated.View>
+          </KeyboardAvoidingView>
+        </SafeAreaProvider>
       </RNModal>
     </View>
   );

package/src/index.ts

@@ -8,6 +8,7 @@ export { default as Icon } from './components/Icon';
 export { default as Image } from './components/Image';
 export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
+export { default as ModalSafeArea } from './components/Modal/ModalSafeArea';
 export { default as PressBox } from './components/PressBox';
 export { default as ProgressBar } from './components/ProgressBar';
 export { default as RegexText } from './components/RegexText';

package/src/ui/BottomSheet/index.tsx

@@ -1,10 +1,9 @@
 import React, { ReactNode } from 'react';
 import { TouchableOpacity, useWindowDimensions } from 'react-native';
 
-import { useSafeAreaPadding } from '@sendbird/uikit-utils';
-
 import type Icon from '../../components/Icon';
 import Modal from '../../components/Modal';
+import ModalSafeArea from '../../components/Modal/ModalSafeArea';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import DialogSheet from '../Dialog/DialogSheet';
 
@@ -29,7 +28,6 @@ type Props = {
 const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }: Props) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { width } = useWindowDimensions();
-  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);
   return (
     <Modal
       type={'slide'}
@@ -39,25 +37,29 @@ const BottomSheet = ({ onDismiss, onHide, visible, sheetItems, HeaderComponent }
       visible={visible}
       backgroundStyle={{ alignItems: 'center', justifyContent: 'flex-end' }}
     >
-      <DialogSheet style={{ width, paddingBottom: safeArea.paddingBottom }}>
-        {HeaderComponent && <HeaderComponent onClose={onHide} />}
-        {sheetItems.map(({ onPress, ...props }, idx) => (
-          <TouchableOpacity
-            activeOpacity={0.75}
-            key={props.title + idx}
-            style={{ paddingStart: safeArea.paddingStart, paddingEnd: safeArea.paddingEnd }}
-            disabled={props.disabled}
-            onPress={async () => {
-              await onHide();
-              try {
-                onPress();
-              } catch {}
-            }}
-          >
-            <DialogSheet.Item {...props} />
-          </TouchableOpacity>
-        ))}
-      </DialogSheet>
+      <ModalSafeArea>
+        {(safeArea) => (
+          <DialogSheet style={{ width, paddingBottom: safeArea.paddingBottom }}>
+            {HeaderComponent && <HeaderComponent onClose={onHide} />}
+            {sheetItems.map(({ onPress, ...props }, idx) => (
+              <TouchableOpacity
+                activeOpacity={0.75}
+                key={props.title + idx}
+                style={{ paddingStart: safeArea.paddingStart, paddingEnd: safeArea.paddingEnd }}
+                disabled={props.disabled}
+                onPress={async () => {
+                  await onHide();
+                  try {
+                    onPress();
+                  } catch {}
+                }}
+              >
+                <DialogSheet.Item {...props} />
+              </TouchableOpacity>
+            ))}
+          </DialogSheet>
+        )}
+      </ModalSafeArea>
     </Modal>
   );
 };