@sendbird/uikit-react-native-foundation 3.1.2 → 3.3.0

package/src/components/Box/index.tsx

@@ -45,7 +45,7 @@ const Box = ({ style, children, ...props }: BoxProps) => {
   const boxStyle = useBoxStyle(props);
 
   return (
-    <View style={[boxStyle, style]} {...props}>
+    <View {...props} style={[boxStyle, style]}>
       {children}
     </View>
   );

package/src/components/Icon/index.tsx

@@ -17,10 +17,8 @@ type Props = {
   style?: StyleProp<ImageStyle>;
   containerStyle?: StyleProp<ViewStyle>;
 };
-const Icon: ((props: Props) => JSX.Element) & {
-  Assets: typeof IconAssets;
-  File: typeof FileIcon;
-} = ({ icon, color, size = 24, containerStyle, style }) => {
+
+const Icon = ({ icon, color, size = 24, containerStyle, style }: Props) => {
   const sizeStyle = sizeStyles[size as SizeFactor] ?? { width: size, height: size };
   const { colors } = useUIKitTheme();
   return (
@@ -68,6 +66,7 @@ const sizeStyles = createStyleSheet({
   },
 });
 
-Icon.Assets = IconAssets;
-Icon.File = FileIcon;
-export default Icon;
+export default Object.assign(Icon, {
+  Assets: IconAssets,
+  File: FileIcon,
+});

package/src/components/Image/FastImageInternal.tsx

@@ -1,9 +1,10 @@
+import type { ReactNode } from 'react';
 import type { FastImageProps } from 'react-native-fast-image';
 
-let FastImageInternal: (props: FastImageProps) => JSX.Element | null = () => null;
+let FastImageInternal: (props: FastImageProps) => ReactNode | null = () => null;
 
 try {
-  FastImageInternal = require('react-native-fast-image') as (props: FastImageProps) => JSX.Element;
+  FastImageInternal = require('react-native-fast-image') as (props: FastImageProps) => ReactNode;
 } catch {}
 
 export default FastImageInternal;

package/src/components/Image/index.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import type { ImageProps as NativeImageProps } from 'react-native';
 import { NativeModules } from 'react-native';
 
@@ -7,7 +8,7 @@ export interface SendbirdImageProps extends Omit<NativeImageProps, 'onLoad' | 'o
   tintColor?: string;
 }
 
-export type SendbirdImageComponent = (props: SendbirdImageProps) => JSX.Element;
+export type SendbirdImageComponent = (props: SendbirdImageProps) => ReactNode;
 
 function getImageModule(): SendbirdImageComponent {
   const hasFastImage = Boolean(NativeModules.FastImageView);

package/src/components/Modal/index.tsx

@@ -86,7 +86,7 @@ const Modal = ({
       <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={`${width}-${height}`}
+        key={Platform.OS === 'android' && enableKeyboardAvoid ? `${width}-${height}` : undefined}
         enabled={enableKeyboardAvoid}
         style={styles.background}
         behavior={Platform.select({ ios: 'padding', default: 'height' })}

package/src/components/PressBox/index.tsx

@@ -10,6 +10,7 @@ type PressBoxStateParams = {
 };
 
 type Props = {
+  disabled?: boolean;
   onPress?: (event: GestureResponderEvent) => void;
   onLongPress?: (event: GestureResponderEvent) => void;
   delayLongPress?: number;

package/src/components/ProgressBar/index.tsx

@@ -0,0 +1,72 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, ViewStyle } from 'react-native';
+
+import { NOOP } from '@sendbird/uikit-utils';
+
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Box from '../Box';
+
+type Props = {
+  current: number;
+  total: number;
+  trackColor?: string;
+  barColor?: string;
+  overlay?: ReactNode | undefined;
+  style?: ViewStyle;
+};
+const ProgressBar = ({ current = 100, total = 100, trackColor, barColor, overlay, style }: Props) => {
+  const { colors } = useUIKitTheme();
+
+  const uiColors = {
+    track: trackColor ?? colors.primary,
+    bar: barColor ?? colors.onBackground01,
+  };
+
+  const progress = useRef(new Animated.Value(0)).current;
+  const percent = current / total;
+  const stopped = percent === 0;
+
+  useEffect(() => {
+    if (!Number.isNaN(percent)) {
+      const animation = Animated.timing(progress, {
+        toValue: stopped ? 0 : percent,
+        duration: stopped ? 0 : 100,
+        useNativeDriver: false,
+        easing: Easing.linear,
+      });
+
+      animation.start();
+      return () => animation.stop();
+    }
+
+    return NOOP;
+  }, [percent]);
+
+  return (
+    <Box
+      height={36}
+      flexDirection={'row'}
+      backgroundColor={uiColors.track}
+      alignItems={'center'}
+      overflow={'hidden'}
+      style={style}
+    >
+      <Animated.View
+        style={{
+          position: 'absolute',
+          width: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0%', '100%'],
+            extrapolate: 'clamp',
+          }),
+          height: '100%',
+          opacity: 0.38,
+          backgroundColor: uiColors.bar,
+        }}
+      />
+      <Box style={StyleSheet.absoluteFill}>{overlay}</Box>
+    </Box>
+  );
+};
+
+export default ProgressBar;

package/src/components/RegexText/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { replaceWithRegex } from '@sendbird/uikit-utils';
 
@@ -12,7 +12,7 @@ export interface RegexTextPattern {
     index: number;
     keyPrefix: string;
     parentProps?: TextProps;
-  }): string | JSX.Element;
+  }): string | ReactNode;
 }
 
 type Props = { patterns: RegexTextPattern[] } & TextProps;
@@ -20,7 +20,7 @@ type Props = { patterns: RegexTextPattern[] } & TextProps;
 const RegexText = ({ children, patterns, ...props }: Props) => {
   if (patterns.length === 0 || typeof children !== 'string') return <>{children}</>;
 
-  const matchedTexts: Array<string | JSX.Element> = [children];
+  const matchedTexts: Array<string | ReactNode> = [children];
 
   patterns.forEach(({ regex, replacer }, patterIndex) => {
     const matchedTextsTemp = matchedTexts.concat();

package/src/components/TextInput/index.tsx

@@ -15,6 +15,10 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
   const variantStyle = colors['ui']['input'][variant];
   const inputStyle = editable ? variantStyle.active : variantStyle.disabled;
   const underlineStyle = variant === 'underline' && { borderBottomWidth: 2, borderBottomColor: inputStyle.highlight };
+  const fontStyle = {
+    ...typography.body3,
+    lineHeight: typography.body3.fontSize ? typography.body3.fontSize * 1.2 : undefined,
+  };
 
   return (
     <RNTextInput
@@ -23,7 +27,7 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
       selectionColor={inputStyle.highlight}
       placeholderTextColor={inputStyle.placeholder}
       style={[
-        typography.body3,
+        fontStyle,
         styles.input,
         { color: inputStyle.text, backgroundColor: inputStyle.background },
         underlineStyle,
@@ -38,8 +42,11 @@ const TextInput = React.forwardRef<RNTextInput, Props>(function TextInput(
 
 const styles = createStyleSheet({
   input: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
+    includeFontPadding: false,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 16,
+    paddingRight: 16,
   },
 });
 

package/src/index.ts

@@ -9,6 +9,7 @@ export { default as Image } from './components/Image';
 export { default as ImageWithPlaceholder } from './components/ImageWithPlaceholder';
 export { default as Modal } from './components/Modal';
 export { default as PressBox } from './components/PressBox';
+export { default as ProgressBar } from './components/ProgressBar';
 export { default as RegexText } from './components/RegexText';
 export type { RegexTextPattern } from './components/RegexText';
 export { default as Switch } from './components/Switch';
@@ -25,14 +26,13 @@ export { default as BottomSheet } from './ui/BottomSheet';
 export { default as Button } from './ui/Button';
 export { default as ChannelFrozenBanner } from './ui/ChannelFrozenBanner';
 export { DialogProvider, useActionMenu, useAlert, usePrompt, useBottomSheet } from './ui/Dialog';
+export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
+export type { GroupChannelMessageProps } from './ui/GroupChannelMessage';
+export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
 export { default as Header } from './ui/Header';
 export { default as LoadingSpinner } from './ui/LoadingSpinner';
 export { default as MenuBar } from './ui/MenuBar';
 export type { MenuBarProps } from './ui/MenuBar';
-export { default as GroupChannelMessage } from './ui/GroupChannelMessage';
-export type { GroupChannelMessageProps } from './ui/GroupChannelMessage';
-export { default as GroupChannelPreview } from './ui/GroupChannelPreview';
-
 export { default as OpenChannelMessage } from './ui/OpenChannelMessage';
 export type { OpenChannelMessageProps } from './ui/OpenChannelMessage';
 export { default as OpenChannelPreview } from './ui/OpenChannelPreview';
@@ -41,6 +41,7 @@ export { default as Placeholder } from './ui/Placeholder';
 export { default as ProfileCard } from './ui/ProfileCard';
 export { default as Prompt } from './ui/Prompt';
 export { default as Toast, useToast, ToastProvider } from './ui/Toast';
+export { default as TypingIndicatorBubble } from './ui/TypingIndicatorBubble';
 
 /** Styles **/
 export { default as createSelectByColorScheme } from './styles/createSelectByColorScheme';

package/src/styles/HeaderStyleContext.tsx

@@ -6,7 +6,7 @@ import type { HeaderProps } from '../ui/Header';
 import getDefaultHeaderHeight from './getDefaultHeaderHeight';
 
 export type HeaderStyleContextType = {
-  HeaderComponent: (props: HeaderProps) => React.ReactElement | null;
+  HeaderComponent: (props: HeaderProps) => React.ReactNode | null;
   defaultTitleAlign: 'left' | 'center';
   statusBarTranslucent: boolean;
   topInset: number;

package/src/styles/createScaleFactor.ts

@@ -10,9 +10,9 @@ const createScaleFactor = (deviceWidth = DESIGNED_DEVICE_WIDTH) => {
   return (dp: number) => PixelRatio.roundToNearestPixel(dp * rangedRatio);
 };
 
-createScaleFactor.updateScaleFactor = (scaleFactor: (dp: number) => number) => {
-  DEFAULT_SCALE_FACTOR = scaleFactor;
-};
-
 export let DEFAULT_SCALE_FACTOR = createScaleFactor();
-export default createScaleFactor;
+export default Object.assign(createScaleFactor, {
+  updateScaleFactor: (scaleFactor: (dp: number) => number) => {
+    DEFAULT_SCALE_FACTOR = scaleFactor;
+  },
+});

package/src/styles/createStyleSheet.ts

@@ -18,11 +18,15 @@ const preProcessor: Partial<StylePreprocessor> = {
   'height': SCALE_FACTOR_WITH_STR,
   'width': SCALE_FACTOR_WITH_STR,
   'padding': SCALE_FACTOR_WITH_STR,
+  'paddingVertical': SCALE_FACTOR_WITH_STR,
+  'paddingHorizontal': SCALE_FACTOR_WITH_STR,
   'paddingTop': SCALE_FACTOR_WITH_STR,
   'paddingBottom': SCALE_FACTOR_WITH_STR,
   'paddingLeft': SCALE_FACTOR_WITH_STR,
   'paddingRight': SCALE_FACTOR_WITH_STR,
   'margin': SCALE_FACTOR_WITH_STR,
+  'marginVertical': SCALE_FACTOR_WITH_STR,
+  'marginHorizontal': SCALE_FACTOR_WITH_STR,
   'marginTop': SCALE_FACTOR_WITH_STR,
   'marginBottom': SCALE_FACTOR_WITH_STR,
   'marginLeft': SCALE_FACTOR_WITH_STR,

package/src/theme/DarkUIKitTheme.ts

@@ -3,41 +3,6 @@ import createTheme from './createTheme';
 const DarkUIKitTheme = createTheme({
   colorScheme: 'dark',
   colors: (palette) => {
-    const groupChannelMessage = {
-      incoming: {
-        enabled: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.onBackgroundDark02,
-          background: palette.background400,
-        },
-        pressed: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.onBackgroundDark02,
-          background: palette.primary500,
-        },
-      },
-      outgoing: {
-        enabled: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.transparent,
-          background: palette.primary200,
-        },
-        pressed: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundDark03,
-          textSenderName: palette.transparent,
-          background: palette.primary300,
-        },
-      },
-    };
-
     return {
       primary: palette.primary200,
       secondary: palette.secondary200,
@@ -149,7 +114,6 @@ const DarkUIKitTheme = createTheme({
             },
           },
         },
-        message: groupChannelMessage,
         dateSeparator: {
           default: {
             none: {
@@ -158,7 +122,60 @@ const DarkUIKitTheme = createTheme({
             },
           },
         },
-        groupChannelMessage,
+        groupChannelMessage: {
+          incoming: {
+            enabled: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.onBackgroundDark02,
+              background: palette.background400,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.background400,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700,
+            },
+            pressed: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.onBackgroundDark02,
+              background: palette.primary500,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.background400,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700,
+            },
+          },
+          outgoing: {
+            enabled: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.transparent,
+              background: palette.primary200,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.primary200,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700,
+            },
+            pressed: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundDark03,
+              textSenderName: palette.transparent,
+              background: palette.primary300,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.primary200,
+              voiceActionIcon: palette.primary200,
+              voiceActionIconBackground: palette.background700,
+            },
+          },
+        },
         groupChannelPreview: {
           default: {
             none: {
@@ -243,6 +260,32 @@ const DarkUIKitTheme = createTheme({
             },
           },
         },
+        voiceMessageInput: {
+          default: {
+            active: {
+              textCancel: palette.primary200,
+              textTime: palette.onBackgroundLight01,
+              background: palette.background600,
+              actionIcon: palette.onBackgroundDark01,
+              actionIconBackground: palette.background500,
+              sendIcon: palette.onBackgroundLight01,
+              sendIconBackground: palette.primary200,
+              progressTrack: palette.primary200,
+              recording: palette.error300,
+            },
+            inactive: {
+              textCancel: palette.primary200,
+              textTime: palette.onBackgroundDark03,
+              background: palette.background600,
+              actionIcon: palette.onBackgroundDark01,
+              actionIconBackground: palette.background500,
+              sendIcon: palette.onBackgroundDark04,
+              sendIconBackground: palette.background500,
+              progressTrack: palette.background400,
+              recording: palette.error200,
+            },
+          },
+        },
       },
     };
   },

package/src/theme/LightUIKitTheme.ts

@@ -3,41 +3,6 @@ import createTheme from './createTheme';
 const LightUIKitTheme = createTheme({
   colorScheme: 'light',
   colors: (palette) => {
-    const groupChannelMessage = {
-      incoming: {
-        enabled: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundLight03,
-          textSenderName: palette.onBackgroundLight02,
-          background: palette.background100,
-        },
-        pressed: {
-          textMsg: palette.onBackgroundLight01,
-          textEdited: palette.onBackgroundLight02,
-          textTime: palette.onBackgroundLight03,
-          textSenderName: palette.onBackgroundLight02,
-          background: palette.primary100,
-        },
-      },
-      outgoing: {
-        enabled: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundLight03,
-          textSenderName: palette.transparent,
-          background: palette.primary300,
-        },
-        pressed: {
-          textMsg: palette.onBackgroundDark01,
-          textEdited: palette.onBackgroundDark02,
-          textTime: palette.onBackgroundLight03,
-          textSenderName: palette.transparent,
-          background: palette.primary400,
-        },
-      },
-    };
-
     return {
       primary: palette.primary300,
       secondary: palette.secondary300,
@@ -149,7 +114,6 @@ const LightUIKitTheme = createTheme({
             },
           },
         },
-        message: groupChannelMessage,
         dateSeparator: {
           default: {
             none: {
@@ -158,7 +122,60 @@ const LightUIKitTheme = createTheme({
             },
           },
         },
-        groupChannelMessage,
+        groupChannelMessage: {
+          incoming: {
+            enabled: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundLight03,
+              textSenderName: palette.onBackgroundLight02,
+              background: palette.background100,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.background100,
+              voiceActionIcon: palette.primary300,
+              voiceActionIconBackground: palette.background50,
+            },
+            pressed: {
+              textMsg: palette.onBackgroundLight01,
+              textEdited: palette.onBackgroundLight02,
+              textTime: palette.onBackgroundLight03,
+              textSenderName: palette.onBackgroundLight02,
+              background: palette.primary100,
+              textVoicePlaytime: palette.onBackgroundLight01,
+              voiceSpinner: palette.primary300,
+              voiceProgressTrack: palette.background100,
+              voiceActionIcon: palette.primary300,
+              voiceActionIconBackground: palette.background50,
+            },
+          },
+          outgoing: {
+            enabled: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundLight03,
+              textSenderName: palette.transparent,
+              background: palette.primary300,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.primary300,
+              voiceActionIcon: palette.primary300,
+              voiceActionIconBackground: palette.background50,
+            },
+            pressed: {
+              textMsg: palette.onBackgroundDark01,
+              textEdited: palette.onBackgroundDark02,
+              textTime: palette.onBackgroundLight03,
+              textSenderName: palette.transparent,
+              background: palette.primary400,
+              textVoicePlaytime: palette.onBackgroundDark01,
+              voiceSpinner: palette.primary200,
+              voiceProgressTrack: palette.primary300,
+              voiceActionIcon: palette.primary300,
+              voiceActionIconBackground: palette.background50,
+            },
+          },
+        },
         groupChannelPreview: {
           default: {
             none: {
@@ -243,6 +260,32 @@ const LightUIKitTheme = createTheme({
             },
           },
         },
+        voiceMessageInput: {
+          default: {
+            active: {
+              textCancel: palette.primary300,
+              textTime: palette.onBackgroundDark01,
+              background: palette.background50,
+              actionIcon: palette.onBackgroundLight01,
+              actionIconBackground: palette.background100,
+              sendIcon: palette.onBackgroundDark01,
+              sendIconBackground: palette.primary300,
+              progressTrack: palette.primary300,
+              recording: palette.error300,
+            },
+            inactive: {
+              textCancel: palette.primary300,
+              textTime: palette.onBackgroundLight03,
+              background: palette.background50,
+              actionIcon: palette.onBackgroundLight01,
+              actionIconBackground: palette.background100,
+              sendIcon: palette.onBackgroundLight04,
+              sendIconBackground: palette.background100,
+              progressTrack: palette.background100,
+              recording: palette.error300,
+            },
+          },
+        },
       },
     };
   },

package/src/types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { TextStyle } from 'react-native';
 
 export interface UIKitTypography {
@@ -43,7 +43,8 @@ export type Component =
   | 'ProfileCard'
   | 'Reaction'
   | 'OpenChannelMessage'
-  | 'OpenChannelPreview';
+  | 'OpenChannelPreview'
+  | 'VoiceMessageInput';
 
 export type GetColorTree<
   Tree extends {
@@ -74,6 +75,7 @@ export type ComponentColorTree = GetColorTree<{
     Reaction: 'default' | 'rounded';
     OpenChannelMessage: 'default';
     OpenChannelPreview: 'default';
+    VoiceMessageInput: 'default';
   };
   State: {
     Header: 'none';
@@ -89,6 +91,7 @@ export type ComponentColorTree = GetColorTree<{
     Reaction: 'enabled' | 'selected';
     OpenChannelMessage: 'enabled' | 'pressed';
     OpenChannelPreview: 'none';
+    VoiceMessageInput: 'active' | 'inactive';
   };
   ColorPart: {
     Header: 'background' | 'borderBottom';
@@ -98,7 +101,17 @@ export type ComponentColorTree = GetColorTree<{
     Badge: 'text' | 'background';
     Placeholder: 'content' | 'highlight';
     DateSeparator: 'text' | 'background';
-    GroupChannelMessage: 'textMsg' | 'textEdited' | 'textSenderName' | 'textTime' | 'background';
+    GroupChannelMessage:
+      | 'textMsg'
+      | 'textEdited'
+      | 'textSenderName'
+      | 'textTime'
+      | 'textVoicePlaytime'
+      | 'background'
+      | 'voiceSpinner'
+      | 'voiceProgressTrack'
+      | 'voiceActionIcon'
+      | 'voiceActionIconBackground';
     GroupChannelPreview:
       | 'textTitle'
       | 'textTitleCaption'
@@ -128,6 +141,16 @@ export type ComponentColorTree = GetColorTree<{
       | 'background'
       | 'coverBackground'
       | 'separator';
+    VoiceMessageInput:
+      | 'textCancel'
+      | 'textTime'
+      | 'background'
+      | 'actionIcon'
+      | 'actionIconBackground'
+      | 'sendIcon'
+      | 'sendIconBackground'
+      | 'progressTrack'
+      | 'recording';
   };
 }>;
 export type ComponentColors<T extends Component> = {
@@ -175,14 +198,15 @@ export interface UIKitColors {
     reaction: ComponentColors<'Reaction'>;
     openChannelMessage: ComponentColors<'OpenChannelMessage'>;
     openChannelPreview: ComponentColors<'OpenChannelPreview'>;
+    voiceMessageInput: ComponentColors<'VoiceMessageInput'>;
   };
 }
 
-export type HeaderElement = string | ReactElement | null;
+export type HeaderElement = ReactNode;
 export type HeaderPartProps = {
-  title?: HeaderElement;
-  right?: HeaderElement;
-  left?: HeaderElement;
+  title?: ReactNode;
+  right?: ReactNode;
+  left?: ReactNode;
   onPressLeft?: (...params: any[]) => any;
   onPressRight?: (...params: any[]) => any;
 };