fix: respect topInset on bottom sheet once again (#3606)

## 🎯 Goal

This PR addresses a regression with our `AttachmentPicker` component
which was done in order to fix accessibility issues. Namely, since we
calculate the `topInset` for our `BottomSheet` in order to make it
properly orderable by screen readers, the value for the global
`topInset` was omitted.

This is wrong, because then the calculations are very wrong particularly
in the cases of having native modals (i.e
`react-navigation/native-stack` or `expo-router`) whose height we need
to take into account, similarly to how we do it for
`keyboardVerticalOffset`.

## 🛠 Implementation details

<!-- Provide a description of the implementation -->

## 🎨 UI Changes

<!-- Add relevant screenshots -->

<details>
<summary>iOS</summary>


<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>


<details>
<summary>Android</summary>

<table>
    <thead>
        <tr>
            <td>Before</td>
            <td>After</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <!--<img src="" /> -->
            </td>
            <td>
                <!--<img src="" /> -->
            </td>
        </tr>
    </tbody>
</table>
</details>

## 🧪 Testing

<!-- Explain how this change can be tested (or why it can't be tested)
-->

## ☑️ Checklist

- [ ] I have signed the [Stream
CLA](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform)
(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

Author: isekovanic

examples/ExpoMessaging/app/channel/[cid]/index.tsx

@@ -73,6 +73,7 @@ export default function ChannelScreen() {
         channel={channel}
         onPressMessage={onPressMessage}
         keyboardVerticalOffset={headerHeight}
+        topInset={headerHeight}
         thread={thread}
       >
         <MessageList

examples/ExpoMessaging/app/channel/[cid]/thread/[cid]/index.tsx

@@ -19,6 +19,7 @@ export default function ThreadScreen() {
       audioRecordingEnabled={true}
       channel={channel}
       keyboardVerticalOffset={Platform.OS === 'ios' ? headerHeight : undefined}
+      topInset={headerHeight}
       thread={thread}
       threadList
     >

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -39,6 +39,7 @@ export const AttachmentPicker = () => {
     attachmentPickerBottomSheetHeight,
     bottomSheetRef: ref,
     bottomInset,
+    topInset,
     disableAttachmentPicker,
   } = useAttachmentPickerContext();
   const { AttachmentPickerContent, AttachmentPickerSelectionBar } = useComponentsContext();
@@ -94,7 +95,7 @@ export const AttachmentPicker = () => {
   const initialSnapPoint = attachmentPickerBottomSheetHeight;
   const pickerTopInset = Math.max(
     0,
-    windowHeight - attachmentPickerBottomSheetHeight - bottomInset,
+    windowHeight - topInset - attachmentPickerBottomSheetHeight - bottomInset,
   );
 
   /**

package/src/components/Channel/Channel.tsx

@@ -496,7 +496,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     thread: threadFromProps,
     threadList,
     threadMessages,
-    topInset,
+    topInset = 0,
     isOnline,
     maximumMessageLimit,
     initializeOnMount = true,