stream-chat-react-native-core 9.4.0-beta.10 → 9.4.0-beta.12

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import type { ImageGalleryHeaderProps } from './types';
 
@@ -17,11 +18,6 @@ import { ImageGalleryState } from '../../../state-store/image-gallery-state-stor
 import { primitives } from '../../../theme';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import { Button } from '../../ui/Button/Button';
-import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
-
-const ReanimatedSafeAreaView = Animated.createAnimatedComponent
-  ? Animated.createAnimatedComponent(SafeAreaView)
-  : SafeAreaView;
 
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
@@ -35,6 +31,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
   const { imageGalleryStateStore } = useImageGalleryContext();
   const { asset } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
   const { setOverlay } = useOverlayContext();
+  const topInset = useContext(SafeAreaInsetsContext)?.top ?? 0;
 
   const date = useMemo(
     () =>
@@ -71,17 +68,19 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <ReanimatedSafeAreaView edges={['top']} style={[styles.container, headerStyle]}>
+      <Animated.View style={[styles.container, { paddingTop: topInset }, headerStyle]}>
         <View style={styles.innerContainer}>
-          <Button
-            accessibilityLabelKey='a11y/Hide Overlay'
-            variant='secondary'
-            type='ghost'
-            size='md'
-            onPress={hideOverlay}
-            LeadingIcon={ChevronLeft}
-            iconOnly
-          />
+          <View style={styles.leftContainer}>
+            <Button
+              accessibilityLabelKey='a11y/Hide Overlay'
+              variant='secondary'
+              type='ghost'
+              size='md'
+              onPress={hideOverlay}
+              LeadingIcon={ChevronLeft}
+              iconOnly
+            />
+          </View>
           <View style={styles.centerContainer} accessibilityLabel='Center element'>
             <Text style={styles.userName}>
               {asset?.user?.name || asset?.user?.id || t('Unknown User')}
@@ -90,7 +89,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
           </View>
           <View style={styles.rightContainer} accessibilityLabel='Right element' />
         </View>
-      </ReanimatedSafeAreaView>
+      </Animated.View>
     </View>
   );
 };
@@ -114,7 +113,7 @@ const useStyles = () => {
         },
         centerContainer: {
           alignItems: 'center',
-          flex: 1,
+          flex: 2,
           justifyContent: 'center',
           gap: primitives.spacingXxs,
           ...header.centerContainer,
@@ -134,9 +133,13 @@ const useStyles = () => {
           borderBottomColor: semantics.borderCoreSubtle,
           ...header.innerContainer,
         },
+        leftContainer: {
+          flex: 1,
+        },
         rightContainer: {
           width: 24,
           height: 24,
+          flex: 1,
         },
         userName: {
           color: semantics.textPrimary,

package/src/components/Message/Message.tsx

@@ -11,7 +11,7 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Portal } from 'react-native-teleport';
 
-import type { Attachment, LocalMessage, UserResponse } from 'stream-chat';
+import type { Attachment, LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
 
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
@@ -94,7 +94,19 @@ export type TouchableEmitter =
   | 'messageReplies'
   | 'reactionList';
 
-export type TextMentionTouchableHandlerAdditionalInfo = { user?: UserResponse };
+export type TextMentionTouchableHandlerAdditionalInfo = {
+  /**
+   * The typed mention entity for the pressed mention (user / channel / here /
+   * role / user_group). Always populated by the default renderText pipeline;
+   * undefined only when a custom renderer doesn't resolve a match.
+   */
+  mentionedEntity?: MentionEntity;
+  /**
+   * Back-compat: still populated when the mention is a user, so existing
+   * integrators reading `additionalInfo.user` keep working.
+   */
+  user?: UserResponse;
+};
 
 export type TextMentionTouchableHandlerPayload = {
   emitter: 'textMention';

package/src/components/Message/MessageItemView/MessageTextContainer.tsx

@@ -166,6 +166,31 @@ const areEqual = (
     return false;
   }
 
+  // Enhanced mention sources (channel/here/roles/groups) — without these the
+  // renderText cache would refresh on a new entity but this comparator would
+  // short-circuit it away and the highlight would not appear until something
+  // else re-rendered the row.
+  const mentionedBroadcastEqual =
+    prevMessage.mentioned_channel === nextMessage.mentioned_channel &&
+    prevMessage.mentioned_here === nextMessage.mentioned_here;
+  if (!mentionedBroadcastEqual) {
+    return false;
+  }
+
+  const joinIds = (values?: string[]) => (values ?? []).join('|');
+  const mentionedRolesEqual =
+    joinIds(prevMessage.mentioned_roles) === joinIds(nextMessage.mentioned_roles);
+  if (!mentionedRolesEqual) {
+    return false;
+  }
+
+  const groupIds = (m: typeof prevMessage) =>
+    joinIds(m.mentioned_groups?.map((g) => g.id) ?? m.mentioned_group_ids);
+  const mentionedGroupsEqual = groupIds(prevMessage) === groupIds(nextMessage);
+  if (!mentionedGroupsEqual) {
+    return false;
+  }
+
   // stringify could be an expensive operation, so lets rule out the obvious
   // possibilities first such as different object reference or empty objects etc.
   // Also keeping markdown equality check at the last to make sure other less

package/src/components/Message/MessageItemView/utils/renderText.tsx

@@ -27,7 +27,7 @@ import {
   State,
 } from 'simple-markdown';
 
-import type { LocalMessage, UserResponse } from 'stream-chat';
+import type { LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
 
 import { generateMarkdownText } from './generateMarkdownText';
 
@@ -152,7 +152,7 @@ const defaultMarkdownStyles: MarkdownStyle = {
     flexDirection: 'row',
   },
   mentions: {
-    fontWeight: '700',
+    fontWeight: primitives.typographyFontWeightRegular,
     fontSize: primitives.typographyFontSizeMd,
     lineHeight: primitives.typographyLineHeightNormal,
   },
@@ -286,7 +286,7 @@ export const renderText = (params: RenderTextParams) => {
     },
     mentions: {
       ...defaultMarkdownStyles.mentions,
-      color: semantics.accentPrimary,
+      color: semantics.chatTextMention,
       ...markdownStyles?.mentions,
     },
     table: {
@@ -404,26 +404,96 @@ export const renderText = (params: RenderTextParams) => {
     );
   };
 
-  // take the @ mentions and turn them into markdown?
-  // translate links
-  const { mentioned_users } = message;
-  const mentionedUsernames = (mentioned_users || [])
-    .map((user) => user.name || user.id)
-    .filter(Boolean)
+  // Collect every mention type the server sent us into a single typed list so
+  // the markdown rule, the lookup, and the press payload all see the same shape.
+  const {
+    mentioned_channel,
+    mentioned_group_ids,
+    mentioned_groups,
+    mentioned_here,
+    mentioned_roles,
+    mentioned_users,
+  } = message;
+
+  const mentionEntities: MentionEntity[] = [
+    ...((mentioned_users ?? []) as UserResponse[]).map(
+      (user) => ({ ...user, mentionType: 'user' }) as MentionEntity,
+    ),
+    ...(mentioned_channel
+      ? ([{ id: 'channel', mentionType: 'channel', name: 'channel' }] as MentionEntity[])
+      : []),
+    ...(mentioned_here
+      ? ([{ id: 'here', mentionType: 'here', name: 'here' }] as MentionEntity[])
+      : []),
+    ...((mentioned_roles ?? []) as string[]).map(
+      (role) => ({ id: role, mentionType: 'role', name: role }) as MentionEntity,
+    ),
+    ...(
+      (mentioned_groups ?? (mentioned_group_ids ?? []).map((id) => ({ id, name: id }))) as Array<{
+        id: string;
+        name?: string;
+      }>
+    ).map(
+      (group) =>
+        ({
+          id: group.id,
+          mentionType: 'user_group',
+          name: group.name ?? group.id,
+        }) as MentionEntity,
+    ),
+  ];
+
+  // Lookup keyed by the rendered mention text (sans `@`), lowercased so we
+  // resolve case-insensitively. First-write-wins: if a user shares a name with
+  // a role/group, the user entity is preferred — same precedence the React SDK
+  // applies via insertion order in its plugin.
+  const mentionLookup = new Map<string, MentionEntity>();
+  for (const entity of mentionEntities) {
+    const key = (entity.name ?? entity.id).toLowerCase();
+    if (!mentionLookup.has(key)) mentionLookup.set(key, entity);
+  }
+
+  const mentionTokens = mentionEntities
+    .map((entity) => entity.name ?? entity.id)
+    .filter((value): value is string => Boolean(value))
     .sort((a, b) => b.length - a.length)
-    .map(escapeRegExp);
-  const mentionedUsers = mentionedUsernames.map((username) => `@${username}`).join('|');
-  const regEx = new RegExp(`^\\B(${mentionedUsers})`, 'g');
+    .map((value) => `@${escapeRegExp(value)}`)
+    .join('|');
+  const regEx = new RegExp(`^\\B(${mentionTokens})`, 'g');
   const mentionsMatchFunction: MatchFunction = (source) => regEx.exec(source);
 
+  const colorForMentionType = (mentionType: MentionEntity['mentionType']) => {
+    switch (mentionType) {
+      case 'user':
+        return semantics.chatTextMentionUser;
+      case 'channel':
+      case 'here':
+        return semantics.chatTextMentionBroadcast;
+      case 'role':
+        return semantics.chatTextMentionRole;
+      case 'user_group':
+        return semantics.chatTextMentionGroup;
+      default:
+        return semantics.chatTextMention;
+    }
+  };
+
   const mentionsReact: ReactNodeOutput = (node, output, { ...state }) => {
-    /**removes the @ prefix of username */
-    const userName = node.content[0]?.content?.substring(1);
+    const matchedText: string | undefined = node.content[0]?.content;
+    const matchedName = matchedText?.substring(1) ?? '';
+    const matchedEntity = mentionLookup.get(matchedName.toLowerCase());
+    const mentionedUser =
+      matchedEntity?.mentionType === 'user' ? (matchedEntity as UserResponse) : undefined;
+    const mentionColor = matchedEntity
+      ? colorForMentionType(matchedEntity.mentionType)
+      : semantics.chatTextMention;
+
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
           additionalInfo: {
-            user: mentioned_users?.find((user: UserResponse) => userName === user.name),
+            mentionedEntity: matchedEntity,
+            user: mentionedUser,
           },
           emitter: 'textMention',
           event,
@@ -434,6 +504,10 @@ export const renderText = (params: RenderTextParams) => {
     const onLongPress = (event: GestureResponderEvent) => {
       if (!preventPress && onLongPressParam) {
         onLongPressParam({
+          additionalInfo: {
+            mentionedEntity: matchedEntity,
+            user: mentionedUser,
+          },
           emitter: 'textMention',
           event,
         });
@@ -441,7 +515,12 @@ export const renderText = (params: RenderTextParams) => {
     };
 
     return (
-      <Text key={state.key} onLongPress={onLongPress} onPress={onPress} style={styles.mentions}>
+      <Text
+        key={state.key}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        style={[styles.mentions, { color: mentionColor }]}
+      >
         {Array.isArray(node.content)
           ? node.content.reduce((acc, current) => acc + current.content, '') || ''
           : output(node.content, state)}
@@ -492,7 +571,7 @@ export const renderText = (params: RenderTextParams) => {
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
     sublist: { react: listReact },
-    ...(mentionedUsers
+    ...(mentionTokens
       ? {
           mentions: {
             match: mentionsMatchFunction,
@@ -507,7 +586,7 @@ export const renderText = (params: RenderTextParams) => {
 
   return (
     <Markdown
-      key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}-${
+      key={`${JSON.stringify(mentionEntities)}-${onlyEmojis}-${
         messageOverlay ? JSON.stringify(markdownStyles) : undefined
       }-${JSON.stringify(semantics)}`}
       onLink={onLink}

package/src/components/MessageInput/MessageComposer.tsx

@@ -118,7 +118,7 @@ const useStyles = () => {
         shadowRadius: 12,
       },
       suggestionsListContainer: {
-        backgroundColor: semantics.backgroundCoreElevation1,
+        backgroundColor: 'transparent',
         position: 'absolute',
         width: '100%',
       },
@@ -200,7 +200,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     AudioRecordingInProgress,
     AudioRecordingLockIndicator,
     AudioRecordingPreview,
-    AutoCompleteSuggestionList,
     Input,
     InputView,
     MessageComposerLeadingView,
@@ -227,7 +226,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
         inputBoxWrapper,
         inputContainer,
         inputFloatingContainer,
-        suggestionsListContainer: { container: suggestionListContainer },
         wrapper,
       },
     },
@@ -355,7 +353,12 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
                 layout: { height: newHeight },
               },
             }) => {
-              messageInputHeightStore.setHeight(newHeight);
+              messageInputHeightStore.setHeight(
+                newHeight -
+                  (selectedPicker && !isKeyboardVisible
+                    ? attachmentPickerBottomSheetHeight - bottomInset
+                    : 0),
+              );
             }}
             style={
               messageInputFloating
@@ -437,11 +440,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               <MessageComposerTrailingView />
             )}
           </View>
-          <View
-            style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
-          >
-            <AutoCompleteSuggestionList />
-          </View>
         </PortalWhileClosingView>
       </Animated.View>
 

package/src/components/MessageList/MessageFlashList.tsx

@@ -60,6 +60,7 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
 
@@ -297,6 +298,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     threadList = false,
   } = props;
   const {
+    AutoCompleteSuggestionList,
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
     NetworkDownIndicator,
@@ -1135,6 +1137,22 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           />
         </View>
       ) : null}
+      <Animated.View
+        layout={transitions.layout200}
+        style={[
+          {
+            bottom: messageInputFloating ? messageInputHeight + 16 : 0,
+          },
+          styles.suggestionsListContainer,
+        ]}
+      >
+        <PortalWhileClosingView
+          portalHostName='overlay-suggestion-list'
+          portalName='autocomplete-suggestion-list'
+        >
+          <AutoCompleteSuggestionList />
+        </PortalWhileClosingView>
+      </Animated.View>
       <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );
@@ -1279,6 +1297,9 @@ const useStyles = () => {
         scrollToBottomButtonContainer,
         unreadMessagesNotificationContainer,
       },
+      messageComposer: {
+        suggestionsListContainer: { container: suggestionListContainer },
+      },
     },
   } = useTheme();
 
@@ -1287,6 +1308,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        suggestionsListContainer: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          width: '100%',
+          ...suggestionListContainer,
+        },
         container: {
           flex: 1,
           width: '100%',
@@ -1338,6 +1365,7 @@ const useStyles = () => {
       scrollToBottomButtonContainer,
       stickyHeaderContainer,
       unreadMessagesNotificationContainer,
+      suggestionListContainer,
     ],
   );
 };

package/src/components/MessageList/MessageList.tsx

@@ -74,6 +74,7 @@ import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { PortalWhileClosingView } from '../UIComponents';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.
@@ -92,6 +93,9 @@ const useStyles = () => {
         scrollToBottomButtonContainer,
         unreadMessagesNotificationContainer,
       },
+      messageComposer: {
+        suggestionsListContainer: { container: suggestionListContainer },
+      },
     },
   } = useTheme();
 
@@ -100,6 +104,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        suggestionsListContainer: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          width: '100%',
+          ...suggestionListContainer,
+        },
         container: {
           flex: 1,
           width: '100%',
@@ -151,6 +161,7 @@ const useStyles = () => {
       scrollToBottomButtonContainer,
       stickyHeaderContainer,
       unreadMessagesNotificationContainer,
+      suggestionListContainer,
     ],
   );
 };
@@ -360,6 +371,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     TypingIndicator,
     TypingIndicatorContainer,
     UnreadMessagesNotification,
+    AutoCompleteSuggestionList,
   } = useComponentsContext();
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
@@ -1363,6 +1375,22 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           />
         </View>
       ) : null}
+      <Animated.View
+        layout={transitions.layout200}
+        style={[
+          {
+            bottom: messageInputFloating ? messageInputHeight + 16 : 0,
+          },
+          styles.suggestionsListContainer,
+        ]}
+      >
+        <PortalWhileClosingView
+          portalHostName='overlay-suggestion-list'
+          portalName='autocomplete-suggestion-list'
+        >
+          <AutoCompleteSuggestionList />
+        </PortalWhileClosingView>
+      </Animated.View>
       <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -1715,6 +1715,30 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         }
       />
+      <View
+        layout={BaseAnimationMock {}}
+        style={
+          [
+            {
+              "bottom": 0,
+            },
+            {
+              "backgroundColor": "transparent",
+              "position": "absolute",
+              "width": "100%",
+            },
+          ]
+        }
+      >
+        <View
+          name="autocomplete-suggestion-list"
+        >
+          <View
+            collapsable={false}
+            onLayout={[Function]}
+          />
+        </View>
+      </View>
     </View>
     <View
       layout={BaseAnimationMock {}}
@@ -2327,21 +2351,6 @@ exports[`Thread should match thread snapshot 1`] = `
               </View>
             </View>
           </View>
-          <View
-            style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "position": "absolute",
-                  "width": "100%",
-                },
-                {
-                  "bottom": 0,
-                },
-                {},
-              ]
-            }
-          />
         </View>
       </View>
     </View>

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -39,12 +39,12 @@ import {
 } from './BottomSheetModal.utils';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useAnnounceOnShow } from '../../a11y/hooks/useAnnounceOnShow';
 import { useResolvedModalAccessibilityProps } from '../../a11y/hooks/useResolvedModalAccessibilityProps';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
-import { useAccessibilityAnnouncer } from '../Accessibility/useAccessibilityAnnouncer';
 
 export type BottomSheetModalProps = {
   /**
@@ -544,25 +544,10 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
 
   const modalA11yProps = useResolvedModalAccessibilityProps();
 
-  const announce = useAccessibilityAnnouncer();
   const openAnnouncement = useA11yLabel(
     'a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.',
   );
-  const announcedOpenRef = useRef(false);
-  useEffect(() => {
-    if (!visible) {
-      announcedOpenRef.current = false;
-      return;
-    }
-    if (!openAnnouncement || announcedOpenRef.current) {
-      return;
-    }
-    const id = setTimeout(() => {
-      announce(openAnnouncement, 'polite');
-      announcedOpenRef.current = true;
-    }, 800);
-    return () => clearTimeout(id);
-  }, [visible, openAnnouncement, announce]);
+  useAnnounceOnShow(visible, openAnnouncement, { delayMs: 800 });
 
   const closeLabel = useA11yLabel('a11y/Close');
   const closeAccessibilityActions = useMemo(

package/src/components/UIComponents/ClippingFadeBottom.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+const CLIPPING_FADE_HEIGHT = 16;
+const CLIPPING_FADE_GRADIENT_ID = 'sdk-clipping-fade-bottom';
+
+export type ClippingFadeBottomProps = {
+  /**
+   * Color the fade ramps toward at the bottom edge. Typically the
+   * background color of the surface beneath the fade so the bottom edge of
+   * scrolling content visually melts into it.
+   */
+  backgroundColor: string;
+};
+
+/**
+ * Bottom edge fade overlay. Draws a 16px tall SVG linear gradient that
+ * ramps from the supplied background's transparent variant at the top to
+ * fully opaque at the bottom - visually clipping any content that scrolls
+ * past the lower edge of its parent. `pointerEvents='none'` so it doesn't
+ * intercept taps/scrolls on the rows underneath.
+ */
+export const ClippingFadeBottom = ({ backgroundColor }: ClippingFadeBottomProps) => (
+  <View pointerEvents='none' style={styles.fade}>
+    <Svg height='100%' width='100%'>
+      <Defs>
+        <LinearGradient id={CLIPPING_FADE_GRADIENT_ID} x1='0' x2='0' y1='0' y2='1'>
+          <Stop offset='0' stopColor={backgroundColor} stopOpacity='0' />
+          <Stop offset='1' stopColor={backgroundColor} stopOpacity='1' />
+        </LinearGradient>
+      </Defs>
+      <Rect fill={`url(#${CLIPPING_FADE_GRADIENT_ID})`} height='100%' width='100%' />
+    </Svg>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  fade: {
+    bottom: 0,
+    height: CLIPPING_FADE_HEIGHT,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+  },
+});