Merge pull request #37 from sendbird/feat/message-components

[UIKIT-2110] Feat/Additional message components

Author: bang9

packages/uikit-react-native-foundation/src/styles/HeaderStyleContext.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { StatusBar } from 'react-native';
+import { StatusBar, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { BaseHeaderProps, HeaderElement } from '../types';
+import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 
 export type HeaderStyleContextType = {
   HeaderComponent: (
@@ -20,12 +21,14 @@ export type HeaderStyleContextType = {
   defaultTitleAlign: 'left' | 'center';
   statusBarTranslucent: boolean;
   topInset: number;
+  defaultHeight: number;
 };
 export const HeaderStyleContext = React.createContext<HeaderStyleContextType>({
   HeaderComponent: () => null,
   defaultTitleAlign: 'left',
   statusBarTranslucent: true,
   topInset: StatusBar.currentHeight ?? 0,
+  defaultHeight: getDefaultHeaderHeight(false),
 });
 
 type Props = Pick<HeaderStyleContextType, 'statusBarTranslucent' | 'defaultTitleAlign' | 'HeaderComponent'>;
@@ -36,6 +39,7 @@ export const HeaderStyleProvider = ({
   statusBarTranslucent,
 }: React.PropsWithChildren<Props>) => {
   const { top } = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
 
   return (
     <HeaderStyleContext.Provider
@@ -44,6 +48,7 @@ export const HeaderStyleProvider = ({
         defaultTitleAlign,
         statusBarTranslucent,
         topInset: statusBarTranslucent ? top : 0,
+        defaultHeight: getDefaultHeaderHeight(width > height),
       }}
     >
       {children}

packages/uikit-react-native-foundation/src/ui/Header/index.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import { TouchableOpacity, TouchableOpacityProps, View, useWindowDimensions } from 'react-native';
+import { TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 import type { BaseHeaderProps } from '../../index';
 import createStyleSheet from '../../styles/createStyleSheet';
-import getDefaultHeaderHeight from '../../styles/getDefaultHeaderHeight';
 import useHeaderStyle from '../../styles/useHeaderStyle';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 import Text, { TextProps } from '../Text';
@@ -38,8 +37,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
   onPressRight,
   clearTitleMargin = false,
 }) => {
-  const { topInset, defaultTitleAlign } = useHeaderStyle();
-  const { width, height } = useWindowDimensions();
+  const { topInset, defaultTitleAlign, defaultHeight } = useHeaderStyle();
   const { colors } = useUIKitTheme();
   const { left: paddingLeft, right: paddingRight } = useSafeAreaInsets();
 
@@ -64,7 +62,7 @@ const Header: ((props: HeaderProps) => JSX.Element) & {
         },
       ]}
     >
-      <View style={[styles.header, { height: getDefaultHeaderHeight(width > height) }]}>
+      <View style={[styles.header, { height: defaultHeight }]}>
         <LeftSide titleAlign={actualTitleAlign} left={left} onPressLeft={onPressLeft} />
         <View
           style={[

packages/uikit-react-native/package.json

@@ -53,24 +53,29 @@
     "@react-native-firebase/messaging": "^14.4.0",
     "@types/react": "*",
     "@types/react-native": "*",
+    "@types/react-native-video": "^5.0.14",
     "date-fns": "^2.28.0",
+    "expo-av": "^12.0.4",
     "expo-clipboard": "^2.1.1",
     "expo-document-picker": "^10.1.3",
     "expo-file-system": "^13.1.4",
     "expo-image-picker": "^12.0.2",
     "expo-media-library": "^14.0.1",
     "expo-notifications": "^0.14.1",
+    "expo-video-thumbnails": "^6.4.0",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
     "js-convert-case": "^4.2.0",
     "react": "17.0.2",
     "react-native": "0.66.4",
     "react-native-builder-bob": "^0.18.0",
+    "react-native-create-thumbnail": "^1.5.1",
     "react-native-document-picker": "^8.0.0",
     "react-native-file-access": "^2.4.3",
     "react-native-image-picker": "^4.7.1",
     "react-native-permissions": "^3.6.0",
     "react-native-safe-area-context": "^3.3.2",
+    "react-native-video": "^5.2.0",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
@@ -79,18 +84,22 @@
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
     "date-fns": ">=2.28.0",
+    "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
     "expo-document-picker": ">=10.1.3",
     "expo-file-system": ">=13.1.4",
     "expo-image-picker": ">=12.0.2",
     "expo-notifications": ">=0.14.1",
+    "expo-video-thumbnails": ">=6.4.0",
     "react": ">=16.13.1",
     "react-native": ">=0.63.3",
+    "react-native-create-thumbnail": ">=1.5.1",
     "react-native-document-picker": ">=8.0.0",
     "react-native-file-access": ">=2.4.3",
     "react-native-image-picker": ">=4.7.1",
     "react-native-permissions": ">=3.6.0",
     "react-native-safe-area-context": ">=3.3.2",
+    "react-native-video": ">=5.2.0",
     "sendbird": "^3.1.22"
   },
   "peerDependenciesMeta": {

packages/uikit-react-native/src/SendbirdUIKitContainer.tsx

@@ -23,7 +23,12 @@ import { useLocalization } from './hooks/useContext';
 import StringSetEn from './localization/StringSet.en';
 import type { StringSet } from './localization/StringSet.type';
 import SBUDynamicModule from './platform/dynamicModule';
-import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from './platform/types';
+import type {
+  ClipboardServiceInterface,
+  FileServiceInterface,
+  MediaServiceInterface,
+  NotificationServiceInterface,
+} from './platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from './types';
 import VERSION from './version';
 
@@ -40,6 +45,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     file: FileServiceInterface;
     notification: NotificationServiceInterface;
     clipboard: ClipboardServiceInterface;
+    media?: MediaServiceInterface;
   };
   chatOptions?: {
     localCacheStorage?: LocalCacheStorage;
@@ -55,6 +61,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     theme?: UIKitTheme;
     statusBarTranslucent?: boolean;
     defaultHeaderTitleAlign?: 'left' | 'center';
+    defaultHeaderHeight?: number;
     HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
   };
   toast?: {
@@ -142,6 +149,7 @@ const SendbirdUIKitContainer = ({
             fileService={platformServices.file}
             notificationService={platformServices.notification}
             clipboardService={platformServices.clipboard}
+            mediaService={platformServices.media}
           >
             <UIKitThemeProvider theme={styles?.theme ?? LightUIKitTheme}>
               <HeaderStyleProvider