Full screen modal for image gallery grid in overlay

[vishalnarkhede]

Motivation

As per our current implementation, image grid opens as a modal on top of image viewer. But it has no explicit backdrop, which creates a confusion between the header of image grid and underlying image viewer. Especially the close buttons for image viewer vs close button for image grid modal. We should improve the experience for user around this feature.

Proposed solution

Update the snap points for image grid modal so that it covers the entire screen.

https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/ImageGallery/ImageGallery.tsx#L178

NOTE: Following code is just an idea, please don't copy-paste it for the fix

const { top } = useSafeAreaInsets();
const snapPoints = React.useMemo(() => ([Dimensions.get('window').height - top]), [])

[vanGalilea]

Hey team! Please add your planning poker estimate with ZenHub @Enigma-I-am @khushal87 @madsroskar @santhoshvai @vishalnarkhede

[khushal87]

Hey @vishalnarkhede this is the current behaviour from what I see. We improved this behavaiour and logic of snap points in #2490 and this seems to eliminate this issue when the picker is fully draged to top. I hope this is(the video below) what is expected, right?

Simulator.Screen.Recording.-.iPhone.14.-.2024-05-22.at.12.23.31.mp4