@sendbird/uikit-react-native-foundation 3.7.5 → 3.8.0

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

@@ -9,20 +9,19 @@ import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Button from '../Button';
 import DialogBox from '../Dialog/DialogBox';
-const Prompt = _ref => {
-  let {
-    onDismiss,
-    visible,
-    onHide,
-    autoFocus = true,
-    title,
-    defaultValue = '',
-    placeholder = 'Enter',
-    onSubmit = NOOP,
-    onCancel = NOOP,
-    submitLabel = 'Submit',
-    cancelLabel = 'Cancel'
-  } = _ref;
+const Prompt = ({
+  onDismiss,
+  visible,
+  onHide,
+  autoFocus = true,
+  title,
+  defaultValue = '',
+  placeholder = 'Enter',
+  onSubmit = NOOP,
+  onCancel = NOOP,
+  submitLabel = 'Submit',
+  cancelLabel = 'Cancel'
+}) => {
   const {
     statusBarTranslucent
   } = useHeaderStyle();
@@ -53,8 +52,8 @@ const Prompt = _ref => {
     if (autoFocus && visible) {
       setTimeout(() => {
         var _inputRef$current, _inputRef$current2;
-        if (Platform.OS === 'android') (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
-        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+        if (Platform.OS === 'android') (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+        (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
       }, 250);
     }
   }, [autoFocus, visible, `${width}-${height}`]);
@@ -64,7 +63,7 @@ const Prompt = _ref => {
     onClose: onHide,
     onDismiss: () => {
       setText('');
-      onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+      onDismiss === null || onDismiss === void 0 || onDismiss();
     },
     statusBarTranslucent: statusBarTranslucent,
     visible: visible,
@@ -79,10 +78,7 @@ const Prompt = _ref => {
   }, /*#__PURE__*/React.createElement(Text, {
     h1: true,
     color: colors.ui.dialog.default.none.text,
-    numberOfLines: 1,
-    style: {
-      flex: 1
-    }
+    numberOfLines: 1
   }, title)), /*#__PURE__*/React.createElement(View, {
     style: styles.inputContainer
   }, /*#__PURE__*/React.createElement(TextInput, {
@@ -93,18 +89,17 @@ const Prompt = _ref => {
     value: text,
     onChangeText: setText,
     style: {
-      paddingLeft: 0,
-      paddingRight: 0,
+      paddingStart: 0,
+      paddingEnd: 0,
       paddingTop: 10,
       paddingBottom: 10
     }
   })), /*#__PURE__*/React.createElement(View, {
     style: styles.buttonContainer
-  }, buttons.map((_ref2, index) => {
-    let {
-      text,
-      onPress
-    } = _ref2;
+  }, buttons.map(({
+    text,
+    onPress
+  }, index) => {
     return /*#__PURE__*/React.createElement(Button, {
       key: text + index,
       variant: 'text',
@@ -113,7 +108,7 @@ const Prompt = _ref => {
       onPress: () => {
         Keyboard.dismiss();
         try {
-          onPress === null || onPress === void 0 ? void 0 : onPress();
+          onPress === null || onPress === void 0 || onPress();
         } finally {
           onHide();
         }
@@ -129,8 +124,7 @@ const styles = createStyleSheet({
     marginBottom: 12,
     paddingVertical: 12,
     paddingHorizontal: 24,
-    flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'flex-start'
   },
   inputContainer: {
     paddingHorizontal: 24,
@@ -143,7 +137,7 @@ const styles = createStyleSheet({
     padding: 12
   },
   button: {
-    marginLeft: 8
+    marginStart: 8
   }
 });
 export default Prompt;

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Keyboard","Platform","View","useWindowDimensions","NOOP","Modal","Text","TextInput","createStyleSheet","useHeaderStyle","useUIKitTheme","Button","DialogBox","Prompt","_ref","onDismiss","visible","onHide","autoFocus","title","defaultValue","placeholder","onSubmit","onCancel","submitLabel","cancelLabel","statusBarTranslucent","colors","inputRef","width","height","buttons","text","onPress","setText","setTimeout","_inputRef$current","_inputRef$current2","OS","current","blur","focus","createElement","enableKeyboardAvoid","disableBackgroundClose","onClose","backgroundStyle","alignItems","justifyContent","style","styles","container","Boolean","titleContainer","h1","color","ui","dialog","default","none","numberOfLines","flex","inputContainer","ref","variant","value","onChangeText","paddingLeft","paddingRight","paddingTop","paddingBottom","buttonContainer","map","_ref2","index","key","button","contentColor","highlight","dismiss","marginBottom","paddingVertical","paddingHorizontal","flexDirection","padding","marginLeft"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport TextInput from '../../components/TextInput';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\n\nexport type PromptItem = {\n  title: string;\n  placeholder?: string;\n  defaultValue?: string;\n  onSubmit?: (text: string) => void;\n  submitLabel?: string;\n  onCancel?: () => void;\n  cancelLabel?: string;\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onDismiss?: () => void;\n  autoFocus?: boolean;\n} & PromptItem;\nconst Prompt = ({\n  onDismiss,\n  visible,\n  onHide,\n  autoFocus = true,\n  title,\n  defaultValue = '',\n  placeholder = 'Enter',\n  onSubmit = NOOP,\n  onCancel = NOOP,\n  submitLabel = 'Submit',\n  cancelLabel = 'Cancel',\n}: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const inputRef = useRef<RNTextInput>(null);\n  const { width, height } = useWindowDimensions();\n\n  const buttons = [\n    { text: cancelLabel, onPress: onCancel },\n    { text: submitLabel, onPress: () => onSubmit(text) },\n  ];\n\n  const [text, setText] = useState(defaultValue);\n\n  // FIXME: autoFocus trick with modal\n  // Android\n  // - InputProps.autoFocus is not trigger keyboard appearing.\n  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.\n  // iOS\n  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.\n  useEffect(() => {\n    if (autoFocus && visible) {\n      setTimeout(() => {\n        if (Platform.OS === 'android') inputRef.current?.blur();\n        inputRef.current?.focus();\n      }, 250);\n    }\n  }, [autoFocus, visible, `${width}-${height}`]);\n\n  return (\n    <Modal\n      enableKeyboardAvoid\n      disableBackgroundClose\n      onClose={onHide}\n      onDismiss={() => {\n        setText('');\n        onDismiss?.();\n      }}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n    >\n      <DialogBox style={styles.container}>\n        {Boolean(title) && (\n          <View style={styles.titleContainer}>\n            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1} style={{ flex: 1 }}>\n              {title}\n            </Text>\n          </View>\n        )}\n\n        <View style={styles.inputContainer}>\n          <TextInput\n            autoFocus={autoFocus && Platform.OS === 'android'}\n            ref={inputRef}\n            placeholder={placeholder}\n            variant={'underline'}\n            value={text}\n            onChangeText={setText}\n            style={{ paddingLeft: 0, paddingRight: 0, paddingTop: 10, paddingBottom: 10 }}\n          />\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {buttons.map(({ text, onPress }, index) => {\n            return (\n              <Button\n                key={text + index}\n                variant={'text'}\n                style={styles.button}\n                contentColor={colors.ui.dialog.default.none.highlight}\n                onPress={() => {\n                  Keyboard.dismiss();\n                  try {\n                    onPress?.();\n                  } finally {\n                    onHide();\n                  }\n                }}\n              >\n                {text}\n              </Button>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 8,\n  },\n  titleContainer: {\n    marginBottom: 12,\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  inputContainer: {\n    paddingHorizontal: 24,\n    marginBottom: 12,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    padding: 12,\n  },\n  button: {\n    marginLeft: 8,\n  },\n});\n\nexport default Prompt;\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","useState","Keyboard","Platform","View","useWindowDimensions","NOOP","Modal","Text","TextInput","createStyleSheet","useHeaderStyle","useUIKitTheme","Button","DialogBox","Prompt","onDismiss","visible","onHide","autoFocus","title","defaultValue","placeholder","onSubmit","onCancel","submitLabel","cancelLabel","statusBarTranslucent","colors","inputRef","width","height","buttons","text","onPress","setText","setTimeout","_inputRef$current","_inputRef$current2","OS","current","blur","focus","createElement","enableKeyboardAvoid","disableBackgroundClose","onClose","backgroundStyle","alignItems","justifyContent","style","styles","container","Boolean","titleContainer","h1","color","ui","dialog","default","none","numberOfLines","inputContainer","ref","variant","value","onChangeText","paddingStart","paddingEnd","paddingTop","paddingBottom","buttonContainer","map","index","key","button","contentColor","highlight","dismiss","marginBottom","paddingVertical","paddingHorizontal","flexDirection","padding","marginStart"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Keyboard, Platform, TextInput as RNTextInput, View, useWindowDimensions } from 'react-native';\n\nimport { NOOP } from '@sendbird/uikit-utils';\n\nimport Modal from '../../components/Modal';\nimport Text from '../../components/Text';\nimport TextInput from '../../components/TextInput';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useHeaderStyle from '../../styles/useHeaderStyle';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Button from '../Button';\nimport DialogBox from '../Dialog/DialogBox';\n\nexport type PromptItem = {\n  title: string;\n  placeholder?: string;\n  defaultValue?: string;\n  onSubmit?: (text: string) => void;\n  submitLabel?: string;\n  onCancel?: () => void;\n  cancelLabel?: string;\n};\n\ntype Props = {\n  visible: boolean;\n  onHide: () => void;\n  onDismiss?: () => void;\n  autoFocus?: boolean;\n} & PromptItem;\nconst Prompt = ({\n  onDismiss,\n  visible,\n  onHide,\n  autoFocus = true,\n  title,\n  defaultValue = '',\n  placeholder = 'Enter',\n  onSubmit = NOOP,\n  onCancel = NOOP,\n  submitLabel = 'Submit',\n  cancelLabel = 'Cancel',\n}: Props) => {\n  const { statusBarTranslucent } = useHeaderStyle();\n  const { colors } = useUIKitTheme();\n  const inputRef = useRef<RNTextInput>(null);\n  const { width, height } = useWindowDimensions();\n\n  const buttons = [\n    { text: cancelLabel, onPress: onCancel },\n    { text: submitLabel, onPress: () => onSubmit(text) },\n  ];\n\n  const [text, setText] = useState(defaultValue);\n\n  // FIXME: autoFocus trick with modal\n  // Android\n  // - InputProps.autoFocus is not trigger keyboard appearing.\n  // - InputRef.focus() is trigger keyboard appearing, but position of keyboard selection is always the start of text.\n  // iOS\n  // - InputProps.autoFocus is trigger weird UI behavior on landscape mode.\n  useEffect(() => {\n    if (autoFocus && visible) {\n      setTimeout(() => {\n        if (Platform.OS === 'android') inputRef.current?.blur();\n        inputRef.current?.focus();\n      }, 250);\n    }\n  }, [autoFocus, visible, `${width}-${height}`]);\n\n  return (\n    <Modal\n      enableKeyboardAvoid\n      disableBackgroundClose\n      onClose={onHide}\n      onDismiss={() => {\n        setText('');\n        onDismiss?.();\n      }}\n      statusBarTranslucent={statusBarTranslucent}\n      visible={visible}\n      backgroundStyle={{ alignItems: 'center', justifyContent: 'center' }}\n    >\n      <DialogBox style={styles.container}>\n        {Boolean(title) && (\n          <View style={styles.titleContainer}>\n            <Text h1 color={colors.ui.dialog.default.none.text} numberOfLines={1}>\n              {title}\n            </Text>\n          </View>\n        )}\n\n        <View style={styles.inputContainer}>\n          <TextInput\n            autoFocus={autoFocus && Platform.OS === 'android'}\n            ref={inputRef}\n            placeholder={placeholder}\n            variant={'underline'}\n            value={text}\n            onChangeText={setText}\n            style={{ paddingStart: 0, paddingEnd: 0, paddingTop: 10, paddingBottom: 10 }}\n          />\n        </View>\n\n        <View style={styles.buttonContainer}>\n          {buttons.map(({ text, onPress }, index) => {\n            return (\n              <Button\n                key={text + index}\n                variant={'text'}\n                style={styles.button}\n                contentColor={colors.ui.dialog.default.none.highlight}\n                onPress={() => {\n                  Keyboard.dismiss();\n                  try {\n                    onPress?.();\n                  } finally {\n                    onHide();\n                  }\n                }}\n              >\n                {text}\n              </Button>\n            );\n          })}\n        </View>\n      </DialogBox>\n    </Modal>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 8,\n  },\n  titleContainer: {\n    marginBottom: 12,\n    paddingVertical: 12,\n    paddingHorizontal: 24,\n    alignItems: 'flex-start',\n  },\n  inputContainer: {\n    paddingHorizontal: 24,\n    marginBottom: 12,\n  },\n  buttonContainer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    padding: 12,\n  },\n  button: {\n    marginStart: 8,\n  },\n});\n\nexport default Prompt;\n"],"mappings":"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","ignoreList":[]}

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

@@ -21,14 +21,13 @@ const useOpacity = () => {
     hide: () => transition(0)
   };
 };
-const Toast = _ref => {
-  let {
-    visible,
-    type,
-    children,
-    top,
-    bottom
-  } = _ref;
+const Toast = ({
+  visible,
+  type,
+  children,
+  top,
+  bottom
+}) => {
   const {
     colors,
     select,
@@ -83,11 +82,10 @@ const Toast = _ref => {
   }, children));
 };
 const VISIBLE_MS = 3000;
-export const ToastProvider = _ref2 => {
-  let {
-    children,
-    dismissTimeout = VISIBLE_MS
-  } = _ref2;
+export const ToastProvider = ({
+  children,
+  dismissTimeout = VISIBLE_MS
+}) => {
   const [state, setState] = useState({
     visible: false,
     type: 'error',
@@ -108,14 +106,11 @@ export const ToastProvider = _ref2 => {
   });
   return /*#__PURE__*/React.createElement(ToastContext.Provider, {
     value: {
-      show: function (text) {
-        let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'normal';
-        return text && setState({
-          text,
-          type,
-          visible: true
-        });
-      }
+      show: (text, type = 'normal') => text && setState({
+        text,
+        type,
+        visible: true
+      })
     }
   }, children, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
     behavior: Platform.OS === 'ios' ? 'position' : undefined,
@@ -144,7 +139,7 @@ const styles = createStyleSheet({
     flexDirection: 'row'
   },
   icon: {
-    marginRight: 4
+    marginEnd: 4
   },
   text: {
     maxWidth: 240,

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

@@ -1 +1 @@
-{"version":3,"names":["React","createContext","useContext","useEffect","useMemo","useRef","useState","Animated","KeyboardAvoidingView","Platform","useSafeAreaInsets","Icon","Text","createStyleSheet","useUIKitTheme","ToastContext","useOpacity","opacity","Value","current","transition","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","_ref","visible","type","children","top","bottom","colors","select","palette","color","dark","error300","light","error200","secondary300","secondary200","backgroundColor","createElement","View","pointerEvents","style","styles","toast","icon","containerStyle","onBackgroundReverse01","body3","numberOfLines","text","VISIBLE_MS","ToastProvider","_ref2","dismissTimeout","state","setState","hideTimeout","setTimeout","prev","clearTimeout","Provider","arguments","length","undefined","behavior","OS","keyboardVerticalOffset","toastPosition","useToast","context","Error","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginRight","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated, KeyboardAvoidingView, Platform } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = (value: number) => {\n    Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start();\n  };\n\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <KeyboardAvoidingView\n        behavior={Platform.OS === 'ios' ? 'position' : undefined}\n        keyboardVerticalOffset={-bottom}\n        pointerEvents={'none'}\n      >\n        <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n          {state.text}\n        </Toast>\n      </KeyboardAvoidingView>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginRight: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"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"}
+{"version":3,"names":["React","createContext","useContext","useEffect","useMemo","useRef","useState","Animated","KeyboardAvoidingView","Platform","useSafeAreaInsets","Icon","Text","createStyleSheet","useUIKitTheme","ToastContext","useOpacity","opacity","Value","current","transition","value","timing","toValue","duration","useNativeDriver","start","show","hide","Toast","visible","type","children","top","bottom","colors","select","palette","color","dark","error300","light","error200","secondary300","secondary200","backgroundColor","createElement","View","pointerEvents","style","styles","toast","icon","containerStyle","onBackgroundReverse01","body3","numberOfLines","text","VISIBLE_MS","ToastProvider","dismissTimeout","state","setState","hideTimeout","setTimeout","prev","clearTimeout","Provider","behavior","OS","undefined","keyboardVerticalOffset","toastPosition","useToast","context","Error","position","height","paddingHorizontal","justifyContent","alignItems","alignSelf","borderRadius","flexDirection","marginEnd","maxWidth"],"sources":["index.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { Animated, KeyboardAvoidingView, Platform } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype ToastType = 'normal' | 'error' | 'success';\ntype Context = { show(text: string, type?: ToastType): void };\n\nconst ToastContext = createContext<Context | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  top?: number;\n  bottom?: number;\n  visible: boolean;\n  type: ToastType;\n  children: string;\n}>;\n\nconst useOpacity = () => {\n  const opacity = useRef(new Animated.Value(0)).current;\n  const transition = (value: number) => {\n    Animated.timing(opacity, { toValue: value, duration: 500, useNativeDriver: true }).start();\n  };\n\n  return {\n    opacity,\n    show: () => transition(1),\n    hide: () => transition(0),\n  };\n};\n\nconst Toast = ({ visible, type, children, top, bottom }: Props) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { opacity, show, hide } = useOpacity();\n\n  const color = useMemo(() => {\n    if (type === 'error') {\n      return select({ dark: palette.error300, light: palette.error200 });\n    }\n    if (type === 'success') {\n      return select({ dark: palette.secondary300, light: palette.secondary200 });\n    }\n    return 'transparent';\n  }, [type, select]);\n\n  const backgroundColor = useMemo(() => {\n    return select({ light: 'rgba(0,0,0,0.64)', dark: 'rgba(255,255,255,0.64)' });\n  }, [select]);\n\n  useEffect(() => {\n    visible ? show() : hide();\n  }, [visible]);\n\n  return (\n    <Animated.View pointerEvents={'none'} style={[styles.toast, { opacity, top, bottom, backgroundColor }]}>\n      {type !== 'normal' && (\n        <Icon icon={type === 'success' ? 'done' : 'error'} color={color} containerStyle={styles.icon} />\n      )}\n      <Text color={colors.onBackgroundReverse01} body3 numberOfLines={2} style={styles.text}>\n        {children}\n      </Text>\n    </Animated.View>\n  );\n};\n\nconst VISIBLE_MS = 3000;\nexport const ToastProvider = ({\n  children,\n  dismissTimeout = VISIBLE_MS,\n}: React.PropsWithChildren<{ dismissTimeout?: number }>) => {\n  const [state, setState] = useState({ visible: false, type: 'error' as ToastType, text: '' });\n  const { bottom } = useSafeAreaInsets();\n\n  useEffect(() => {\n    if (!state.visible) return;\n\n    const hideTimeout = setTimeout(() => {\n      setState((prev) => ({ ...prev, visible: false }));\n    }, dismissTimeout);\n    return () => clearTimeout(hideTimeout);\n  });\n\n  return (\n    <ToastContext.Provider value={{ show: (text, type = 'normal') => text && setState({ text, type, visible: true }) }}>\n      {children}\n      <KeyboardAvoidingView\n        behavior={Platform.OS === 'ios' ? 'position' : undefined}\n        keyboardVerticalOffset={-bottom}\n        pointerEvents={'none'}\n      >\n        <Toast type={state.type} visible={state.visible} bottom={bottom + styles.toastPosition.bottom}>\n          {state.text}\n        </Toast>\n      </KeyboardAvoidingView>\n    </ToastContext.Provider>\n  );\n};\n\nexport const useToast = () => {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error('ToastContext is not provided, wrap your app with ToastProvider');\n  return context;\n};\n\nconst styles = createStyleSheet({\n  toast: {\n    position: 'absolute',\n    height: 48,\n    paddingHorizontal: 12,\n    justifyContent: 'center',\n    alignItems: 'center',\n    alignSelf: 'center',\n    borderRadius: 24,\n    flexDirection: 'row',\n  },\n  icon: {\n    marginEnd: 4,\n  },\n  text: {\n    maxWidth: 240,\n    paddingHorizontal: 4,\n  },\n  toastPosition: {\n    bottom: 60,\n  },\n});\n\nexport default Toast;\n"],"mappings":"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","ignoreList":[]}

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

@@ -4,12 +4,11 @@ import Box from '../../components/Box';
 import createStyleSheet from '../../styles/createStyleSheet';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Avatar from '../Avatar';
-const TypingIndicatorBubble = _ref => {
-  let {
-    typingUsers,
-    containerStyle,
-    maxAvatar
-  } = _ref;
+const TypingIndicatorBubble = ({
+  typingUsers,
+  containerStyle,
+  maxAvatar
+}) => {
   const {
     select,
     palette,
@@ -32,7 +31,7 @@ const TypingIndicatorBubble = _ref => {
       })
     },
     containerStyle: {
-      marginRight: 12
+      marginEnd: 12
     }
   }, typingUsers.map((user, index) => /*#__PURE__*/React.createElement(Avatar, {
     key: index,
@@ -45,24 +44,20 @@ const TypingIndicatorBubble = _ref => {
     backgroundColor: colors.onBackground02
   }));
 };
-const TypingDots = _ref2 => {
-  let {
-    dotColor,
-    backgroundColor
-  } = _ref2;
+const TypingDots = ({
+  dotColor,
+  backgroundColor
+}) => {
   const animation = useRef(new Animated.Value(0)).current;
-  const dots = matrix.map(_ref3 => {
-    let [timeline, scale, opacity] = _ref3;
-    return [animation.interpolate({
-      inputRange: timeline,
-      outputRange: scale,
-      extrapolate: 'clamp'
-    }), animation.interpolate({
-      inputRange: timeline,
-      outputRange: opacity,
-      extrapolate: 'clamp'
-    })];
-  });
+  const dots = matrix.map(([timeline, scale, opacity]) => [animation.interpolate({
+    inputRange: timeline,
+    outputRange: scale,
+    extrapolate: 'clamp'
+  }), animation.interpolate({
+    inputRange: timeline,
+    outputRange: opacity,
+    extrapolate: 'clamp'
+  })]);
   useEffect(() => {
     const animated = Animated.loop(Animated.timing(animation, {
       toValue: 1.4,
@@ -81,12 +76,11 @@ const TypingDots = _ref2 => {
     paddingHorizontal: 12,
     height: 34,
     backgroundColor: dotColor
-  }, dots.map((_ref4, index) => {
-    let [scale, opacity] = _ref4;
+  }, dots.map(([scale, opacity], index) => {
     return /*#__PURE__*/React.createElement(Animated.View, {
       key: index,
       style: [styles.dot, {
-        marginRight: index === dots.length - 1 ? 0 : 6,
+        marginEnd: index === dots.length - 1 ? 0 : 6,
         opacity: opacity,
         transform: [{
           scale: scale

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","Animated","Easing","Box","createStyleSheet","useUIKitTheme","Avatar","TypingIndicatorBubble","_ref","typingUsers","containerStyle","maxAvatar","select","palette","colors","length","createElement","flexDirection","justifyContent","alignItems","style","Stack","size","styles","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background400","marginRight","map","user","index","key","uri","profileUrl","TypingDots","dotColor","backgroundColor","_ref2","animation","Value","current","dots","matrix","_ref3","timeline","scale","opacity","interpolate","inputRange","outputRange","extrapolate","animated","loop","timing","toValue","duration","easing","linear","useNativeDriver","start","reset","borderRadius","paddingHorizontal","height","_ref4","View","dot","transform","width"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleProp, ViewStyle } from 'react-native';\n\nimport type { SendbirdUser } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\n\ntype Props = {\n  typingUsers: SendbirdUser[];\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n};\n\nconst TypingIndicatorBubble = ({ typingUsers, containerStyle, maxAvatar }: Props) => {\n  const { select, palette, colors } = useUIKitTheme();\n\n  if (typingUsers.length === 0) return null;\n\n  return (\n    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'center'} style={containerStyle}>\n      <Avatar.Stack\n        size={26}\n        maxAvatar={maxAvatar}\n        styles={{\n          remainsTextColor: colors.onBackground02,\n          remainsBackgroundColor: select({ light: palette.background100, dark: palette.background400 }),\n        }}\n        containerStyle={{ marginRight: 12 }}\n      >\n        {typingUsers.map((user, index) => (\n          <Avatar key={index} uri={user.profileUrl} />\n        ))}\n      </Avatar.Stack>\n      <TypingDots\n        dotColor={select({ light: palette.background100, dark: palette.background400 })}\n        backgroundColor={colors.onBackground02}\n      />\n    </Box>\n  );\n};\n\ntype TypingDotsProps = {\n  dotColor: string;\n  backgroundColor: string;\n};\nconst TypingDots = ({ dotColor, backgroundColor }: TypingDotsProps) => {\n  const animation = useRef(new Animated.Value(0)).current;\n  const dots = matrix.map(([timeline, scale, opacity]) => [\n    animation.interpolate({ inputRange: timeline, outputRange: scale, extrapolate: 'clamp' }),\n    animation.interpolate({ inputRange: timeline, outputRange: opacity, extrapolate: 'clamp' }),\n  ]);\n\n  useEffect(() => {\n    const animated = Animated.loop(\n      Animated.timing(animation, { toValue: 1.4, duration: 1400, easing: Easing.linear, useNativeDriver: true }),\n    );\n    animated.start();\n    return () => animated.reset();\n  }, []);\n\n  return (\n    <Box\n      flexDirection={'row'}\n      alignItems={'center'}\n      justifyContent={'center'}\n      borderRadius={16}\n      paddingHorizontal={12}\n      height={34}\n      backgroundColor={dotColor}\n    >\n      {dots.map(([scale, opacity], index) => {\n        return (\n          <Animated.View\n            key={index}\n            style={[\n              styles.dot,\n              {\n                marginRight: index === dots.length - 1 ? 0 : 6,\n                opacity: opacity,\n                transform: [{ scale: scale }],\n                backgroundColor: backgroundColor,\n              },\n            ]}\n          />\n        );\n      })}\n    </Box>\n  );\n};\n\nconst matrix = [\n  [\n    [0.4, 0.7, 1.0],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n  [\n    [0.6, 0.9, 1.2],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n  [\n    [0.8, 1.1, 1.4],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n];\n\nconst styles = createStyleSheet({\n  dot: {\n    width: 8,\n    height: 8,\n    borderRadius: 4,\n  },\n});\n\nexport default TypingIndicatorBubble;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SAASC,QAAQ,EAAEC,MAAM,QAA8B,cAAc;AAIrE,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,MAAM,MAAM,WAAW;AAQ9B,MAAMC,qBAAqB,GAAGC,IAAA,IAAuD;EAAA,IAAtD;IAAEC,WAAW;IAAEC,cAAc;IAAEC;EAAiB,CAAC,GAAAH,IAAA;EAC9E,MAAM;IAAEI,MAAM;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAGT,aAAa,EAAE;EAEnD,IAAII,WAAW,CAACM,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAEzC,oBACEjB,KAAA,CAAAkB,aAAA,CAACb,GAAG;IAACc,aAAa,EAAE,KAAM;IAACC,cAAc,EAAE,YAAa;IAACC,UAAU,EAAE,QAAS;IAACC,KAAK,EAAEV;EAAe,gBACnGZ,KAAA,CAAAkB,aAAA,CAACV,MAAM,CAACe,KAAK;IACXC,IAAI,EAAE,EAAG;IACTX,SAAS,EAAEA,SAAU;IACrBY,MAAM,EAAE;MACNC,gBAAgB,EAAEV,MAAM,CAACW,cAAc;MACvCC,sBAAsB,EAAEd,MAAM,CAAC;QAAEe,KAAK,EAAEd,OAAO,CAACe,aAAa;QAAEC,IAAI,EAAEhB,OAAO,CAACiB;MAAc,CAAC;IAC9F,CAAE;IACFpB,cAAc,EAAE;MAAEqB,WAAW,EAAE;IAAG;EAAE,GAEnCtB,WAAW,CAACuB,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,kBAC3BpC,KAAA,CAAAkB,aAAA,CAACV,MAAM;IAAC6B,GAAG,EAAED,KAAM;IAACE,GAAG,EAAEH,IAAI,CAACI;EAAW,EAC1C,CAAC,CACW,eACfvC,KAAA,CAAAkB,aAAA,CAACsB,UAAU;IACTC,QAAQ,EAAE3B,MAAM,CAAC;MAAEe,KAAK,EAAEd,OAAO,CAACe,aAAa;MAAEC,IAAI,EAAEhB,OAAO,CAACiB;IAAc,CAAC,CAAE;IAChFU,eAAe,EAAE1B,MAAM,CAACW;EAAe,EACvC,CACE;AAEV,CAAC;AAMD,MAAMa,UAAU,GAAGG,KAAA,IAAoD;EAAA,IAAnD;IAAEF,QAAQ;IAAEC;EAAiC,CAAC,GAAAC,KAAA;EAChE,MAAMC,SAAS,GAAG1C,MAAM,CAAC,IAAIC,QAAQ,CAAC0C,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EACvD,MAAMC,IAAI,GAAGC,MAAM,CAACd,GAAG,CAACe,KAAA;IAAA,IAAC,CAACC,QAAQ,EAAEC,KAAK,EAAEC,OAAO,CAAC,GAAAH,KAAA;IAAA,OAAK,CACtDL,SAAS,CAACS,WAAW,CAAC;MAAEC,UAAU,EAAEJ,QAAQ;MAAEK,WAAW,EAAEJ,KAAK;MAAEK,WAAW,EAAE;IAAQ,CAAC,CAAC,EACzFZ,SAAS,CAACS,WAAW,CAAC;MAAEC,UAAU,EAAEJ,QAAQ;MAAEK,WAAW,EAAEH,OAAO;MAAEI,WAAW,EAAE;IAAQ,CAAC,CAAC,CAC5F;EAAA,EAAC;EAEFvD,SAAS,CAAC,MAAM;IACd,MAAMwD,QAAQ,GAAGtD,QAAQ,CAACuD,IAAI,CAC5BvD,QAAQ,CAACwD,MAAM,CAACf,SAAS,EAAE;MAAEgB,OAAO,EAAE,GAAG;MAAEC,QAAQ,EAAE,IAAI;MAAEC,MAAM,EAAE1D,MAAM,CAAC2D,MAAM;MAAEC,eAAe,EAAE;IAAK,CAAC,CAAC,CAC3G;IACDP,QAAQ,CAACQ,KAAK,EAAE;IAChB,OAAO,MAAMR,QAAQ,CAACS,KAAK,EAAE;EAC/B,CAAC,EAAE,EAAE,CAAC;EAEN,oBACElE,KAAA,CAAAkB,aAAA,CAACb,GAAG;IACFc,aAAa,EAAE,KAAM;IACrBE,UAAU,EAAE,QAAS;IACrBD,cAAc,EAAE,QAAS;IACzB+C,YAAY,EAAE,EAAG;IACjBC,iBAAiB,EAAE,EAAG;IACtBC,MAAM,EAAE,EAAG;IACX3B,eAAe,EAAED;EAAS,GAEzBM,IAAI,CAACb,GAAG,CAAC,CAAAoC,KAAA,EAAmBlC,KAAK,KAAK;IAAA,IAA5B,CAACe,KAAK,EAAEC,OAAO,CAAC,GAAAkB,KAAA;IACzB,oBACEtE,KAAA,CAAAkB,aAAA,CAACf,QAAQ,CAACoE,IAAI;MACZlC,GAAG,EAAED,KAAM;MACXd,KAAK,EAAE,CACLG,MAAM,CAAC+C,GAAG,EACV;QACEvC,WAAW,EAAEG,KAAK,KAAKW,IAAI,CAAC9B,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;QAC9CmC,OAAO,EAAEA,OAAO;QAChBqB,SAAS,EAAE,CAAC;UAAEtB,KAAK,EAAEA;QAAM,CAAC,CAAC;QAC7BT,eAAe,EAAEA;MACnB,CAAC;IACD,EACF;EAEN,CAAC,CAAC,CACE;AAEV,CAAC;AAED,MAAMM,MAAM,GAAG,CACb,CACE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EACf,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EACf,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CACnB,EACD,CACE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EACf,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EACf,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CACnB,EACD,CACE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EACf,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EACf,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CACnB,CACF;AAED,MAAMvB,MAAM,GAAGnB,gBAAgB,CAAC;EAC9BkE,GAAG,EAAE;IACHE,KAAK,EAAE,CAAC;IACRL,MAAM,EAAE,CAAC;IACTF,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAe1D,qBAAqB"}
+{"version":3,"names":["React","useEffect","useRef","Animated","Easing","Box","createStyleSheet","useUIKitTheme","Avatar","TypingIndicatorBubble","typingUsers","containerStyle","maxAvatar","select","palette","colors","length","createElement","flexDirection","justifyContent","alignItems","style","Stack","size","styles","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background400","marginEnd","map","user","index","key","uri","profileUrl","TypingDots","dotColor","backgroundColor","animation","Value","current","dots","matrix","timeline","scale","opacity","interpolate","inputRange","outputRange","extrapolate","animated","loop","timing","toValue","duration","easing","linear","useNativeDriver","start","reset","borderRadius","paddingHorizontal","height","View","dot","transform","width"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, StyleProp, ViewStyle } from 'react-native';\n\nimport type { SendbirdUser } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\n\ntype Props = {\n  typingUsers: SendbirdUser[];\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n};\n\nconst TypingIndicatorBubble = ({ typingUsers, containerStyle, maxAvatar }: Props) => {\n  const { select, palette, colors } = useUIKitTheme();\n\n  if (typingUsers.length === 0) return null;\n\n  return (\n    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'center'} style={containerStyle}>\n      <Avatar.Stack\n        size={26}\n        maxAvatar={maxAvatar}\n        styles={{\n          remainsTextColor: colors.onBackground02,\n          remainsBackgroundColor: select({ light: palette.background100, dark: palette.background400 }),\n        }}\n        containerStyle={{ marginEnd: 12 }}\n      >\n        {typingUsers.map((user, index) => (\n          <Avatar key={index} uri={user.profileUrl} />\n        ))}\n      </Avatar.Stack>\n      <TypingDots\n        dotColor={select({ light: palette.background100, dark: palette.background400 })}\n        backgroundColor={colors.onBackground02}\n      />\n    </Box>\n  );\n};\n\ntype TypingDotsProps = {\n  dotColor: string;\n  backgroundColor: string;\n};\nconst TypingDots = ({ dotColor, backgroundColor }: TypingDotsProps) => {\n  const animation = useRef(new Animated.Value(0)).current;\n  const dots = matrix.map(([timeline, scale, opacity]) => [\n    animation.interpolate({ inputRange: timeline, outputRange: scale, extrapolate: 'clamp' }),\n    animation.interpolate({ inputRange: timeline, outputRange: opacity, extrapolate: 'clamp' }),\n  ]);\n\n  useEffect(() => {\n    const animated = Animated.loop(\n      Animated.timing(animation, { toValue: 1.4, duration: 1400, easing: Easing.linear, useNativeDriver: true }),\n    );\n    animated.start();\n    return () => animated.reset();\n  }, []);\n\n  return (\n    <Box\n      flexDirection={'row'}\n      alignItems={'center'}\n      justifyContent={'center'}\n      borderRadius={16}\n      paddingHorizontal={12}\n      height={34}\n      backgroundColor={dotColor}\n    >\n      {dots.map(([scale, opacity], index) => {\n        return (\n          <Animated.View\n            key={index}\n            style={[\n              styles.dot,\n              {\n                marginEnd: index === dots.length - 1 ? 0 : 6,\n                opacity: opacity,\n                transform: [{ scale: scale }],\n                backgroundColor: backgroundColor,\n              },\n            ]}\n          />\n        );\n      })}\n    </Box>\n  );\n};\n\nconst matrix = [\n  [\n    [0.4, 0.7, 1.0],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n  [\n    [0.6, 0.9, 1.2],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n  [\n    [0.8, 1.1, 1.4],\n    [1.0, 1.2, 1.0],\n    [0.12, 0.38, 0.12],\n  ],\n];\n\nconst styles = createStyleSheet({\n  dot: {\n    width: 8,\n    height: 8,\n    borderRadius: 4,\n  },\n});\n\nexport default TypingIndicatorBubble;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,12 +1,22 @@
 import React from 'react';
 import { ViewProps, ViewStyle } from 'react-native';
 import type { UIKitColors, UIKitPalette } from '../../types';
-type BaseBoxProps = Pick<ViewStyle, 'flex' | 'flexShrink' | 'flexGrow' | 'flexDirection' | 'alignItems' | 'justifyContent' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'borderBottomColor' | 'borderBottomWidth' | 'margin' | 'marginHorizontal' | 'marginVertical' | 'marginLeft' | 'marginRight' | 'marginTop' | 'marginBottom' | 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom' | 'overflow' | 'width' | 'height'> & {
+type DeprecatedBoxProps = {
+    /** @deprecated Please use `paddingStart` instead **/
+    paddingLeft?: ViewStyle['paddingLeft'];
+    /** @deprecated Please use `paddingEnd` instead **/
+    paddingRight?: ViewStyle['paddingRight'];
+    /** @deprecated Please use `marginStart` instead **/
+    marginLeft?: ViewStyle['marginLeft'];
+    /** @deprecated Please use `marginEnd` instead **/
+    marginRight?: ViewStyle['marginRight'];
+};
+type BaseBoxProps = Pick<ViewStyle, 'flex' | 'flexShrink' | 'flexGrow' | 'flexDirection' | 'alignItems' | 'justifyContent' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'borderBottomColor' | 'borderBottomWidth' | 'margin' | 'marginHorizontal' | 'marginVertical' | 'marginStart' | 'marginEnd' | 'marginTop' | 'marginBottom' | 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingStart' | 'paddingEnd' | 'paddingTop' | 'paddingBottom' | 'overflow' | 'width' | 'height'> & {
     backgroundColor?: string | ((theme: {
         colors: UIKitColors;
         palette: UIKitPalette;
     }) => string);
 };
-type BoxProps = BaseBoxProps & ViewProps;
+type BoxProps = BaseBoxProps & DeprecatedBoxProps & ViewProps;
 declare const Box: ({ style, children, ...props }: BoxProps) => React.JSX.Element;
 export default Box;

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

@@ -9,8 +9,9 @@ type Props = {
     size?: number;
     style?: StyleProp<ImageStyle>;
     containerStyle?: StyleProp<ViewStyle>;
+    direction?: 'ltr' | 'rtl';
 };
-declare const _default: (({ icon, color, size, containerStyle, style }: Props) => React.JSX.Element) & {
+declare const _default: (({ icon, color, size, containerStyle, style, direction, }: Props) => React.JSX.Element) & {
     Assets: {
         'chat-hide': any;
         'chat-show': any;

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

@@ -1,9 +1,21 @@
 import React from 'react';
 import { TextProps as RNTextProps } from 'react-native';
 import type { TypoName, UIKitTheme } from '../../types';
+export interface RTLTextAlignSupportProps {
+    /**
+     * If `I18nManager.isRTL` is `true` and this value is enabled, the text will be aligned according to RTL if it starts in an RTL language.
+     * In the case of the `Text` component, the alignment value is calculated based on `I18nManager.doLeftAndRightSwapInRTL`.
+     * For the `TextInput` component, the alignment value is calculated as a physical alignment, unaffected by `I18nManager.doLeftAndRightSwapInRTL`.
+     */
+    supportRTLAlign?: boolean;
+    /**
+     * If you want to enable `supportRTLAlign` but are using nested `Text` components that are not simple text under the `Text` component, pass the original text here.
+     */
+    originalText?: string;
+}
 type TypographyProps = Partial<Record<TypoName, boolean>>;
 export type TextProps = RNTextProps & TypographyProps & {
     color?: ((colors: UIKitTheme['colors']) => string) | string;
-};
-declare const Text: ({ children, color, style, ...props }: TextProps) => React.JSX.Element;
+} & RTLTextAlignSupportProps;
+declare const Text: ({ children, color, style, supportRTLAlign, originalText, ...props }: TextProps) => React.JSX.Element;
 export default Text;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextInput as RNTextInput, TextInputProps } from 'react-native';
+import { RTLTextAlignSupportProps } from '../Text';
 declare const TextInput: React.ForwardRefExoticComponent<{
     variant?: "default" | "underline" | undefined;
-} & TextInputProps & React.RefAttributes<RNTextInput>>;
+} & TextInputProps & RTLTextAlignSupportProps & React.RefAttributes<RNTextInput>>;
 export default TextInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "3.7.5",
+  "version": "3.8.0",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -48,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "3.7.5"
+    "@sendbird/uikit-utils": "3.8.0"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -85,5 +85,5 @@
       ]
     ]
   },
-  "gitHead": "5ab71ecbed6948f2e26797d3b566369580386b53"
+  "gitHead": "bec311112e7b16076db18c6597c73f6ffb3489ad"
 }

package/src/components/Box/index.tsx

@@ -6,6 +6,17 @@ import { isFunction } from '@sendbird/uikit-utils';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import type { UIKitColors, UIKitPalette } from '../../types';
 
+type DeprecatedBoxProps = {
+  /** @deprecated Please use `paddingStart` instead **/
+  paddingLeft?: ViewStyle['paddingLeft'];
+  /** @deprecated Please use `paddingEnd` instead **/
+  paddingRight?: ViewStyle['paddingRight'];
+  /** @deprecated Please use `marginStart` instead **/
+  marginLeft?: ViewStyle['marginLeft'];
+  /** @deprecated Please use `marginEnd` instead **/
+  marginRight?: ViewStyle['marginRight'];
+};
+
 type BaseBoxProps = Pick<
   ViewStyle,
   | 'flex'
@@ -22,15 +33,15 @@ type BaseBoxProps = Pick<
   | 'margin'
   | 'marginHorizontal'
   | 'marginVertical'
-  | 'marginLeft'
-  | 'marginRight'
+  | 'marginStart'
+  | 'marginEnd'
   | 'marginTop'
   | 'marginBottom'
   | 'padding'
   | 'paddingHorizontal'
   | 'paddingVertical'
-  | 'paddingLeft'
-  | 'paddingRight'
+  | 'paddingStart'
+  | 'paddingEnd'
   | 'paddingTop'
   | 'paddingBottom'
   | 'overflow'
@@ -40,7 +51,7 @@ type BaseBoxProps = Pick<
   backgroundColor?: string | ((theme: { colors: UIKitColors; palette: UIKitPalette }) => string);
 };
 
-type BoxProps = BaseBoxProps & ViewProps;
+type BoxProps = BaseBoxProps & DeprecatedBoxProps & ViewProps;
 const Box = ({ style, children, ...props }: BoxProps) => {
   const boxStyle = useBoxStyle(props);
 

package/src/components/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { I18nManager, Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { FileType, convertFileTypeToMessageType, getFileIconFromMessageType } from '@sendbird/uikit-utils';
 
@@ -10,23 +10,55 @@ import useUIKitTheme from '../../theme/useUIKitTheme';
 type IconNames = keyof typeof IconAssets;
 type SizeFactor = keyof typeof sizeStyles;
 
+const mirroredIcons: Partial<Record<IconNames, boolean>> = {
+  create: true,
+  send: true,
+  reply: true,
+  'reply-filled': true,
+  thread: true,
+  chat: true,
+  'chat-filled': true,
+  message: true,
+  broadcast: true,
+  'file-audio': true,
+  'arrow-left': true,
+  leave: true,
+  'chevron-right': true,
+};
+
 type Props = {
   icon: IconNames;
   color?: string;
   size?: number;
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
+  direction?: 'ltr' | 'rtl';
 };
 
-const Icon = ({ icon, color, size = 24, containerStyle, style }: Props) => {
+const Icon = ({
+  icon,
+  color,
+  size = 24,
+  containerStyle,
+  style,
+  direction = I18nManager.isRTL ? 'rtl' : 'ltr',
+}: Props) => {
   const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
   const { colors } = useUIKitTheme();
+
+  const shouldMirror = direction === 'rtl' && mirroredIcons[icon];
+
   return (
     <View style={[containerStyle, containerStyles.container]}>
       <Image
         resizeMode={'contain'}
         source={IconAssets[icon]}
-        style={[{ tintColor: color ?? colors.primary }, sizeStyle, style]}
+        style={[
+          { tintColor: color ?? colors.primary },
+          sizeStyle,
+          shouldMirror && { transform: [{ scaleX: -1 }] },
+          style,
+        ]}
       />
     </View>
   );