chore: customizability of context menu

[isekovanic]

🎯 Goal

This PR introduces a MessageOverlayWrapper component so that integrations can pick which part of the Message they want to move to the contextual menu. The component handles all bookkeeping on its own and makes sure that a single measurement source (target) is active at a time.

It comes paired with a messageOverlayTargetId for the simple purpose of performance (self registration would work as well here, however I did notice that sometimes 2 layout passes had to be done before registration could be finished, in order for the other portals to unmount - causing a nasty remount on the first render and so this guards against that).

Usage:

import { MessageContent as DefaultMessageContent } from 'stream-chat-react-native';

// ...

const OverlayTargetedMessageContent = (
  props: React.ComponentProps<typeof DefaultMessageContent>,
) => (
  <MessageOverlayWrapper targetId='message-content'>
    <DefaultMessageContent {...props} />
  </MessageOverlayWrapper>
);

// ...

<WithComponents overrides={{ MessageContent: OverlayTargetedMessageContent }}>
      <Channel
       {...otherProps}
        messageOverlayTargetId='message-content'
      >
        {/* channel children */}
      </Channel>
</WithComponents>

🛠 Implementation details

🎨 UI Changes

iOS

Before	After

Android

Before	After

🧪 Testing

☑️ Checklist

• I have signed the Stream CLA (required)
• PR targets the develop branch
• Documentation is updated
• New code is tested in main example apps, including all possible scenarios
  • SampleApp iOS and Android
  • Expo iOS and Android

[Stream-SDK-Bot]

SDK Size

title	develop	branch	diff	status
js_bundle_size	352 KB	353 KB	+311 B	🟡