stream-chat-react-native
stream-chat-react-native copied to clipboard
GetStream
Image Gallery customization
Describe the bug If we attach big images and try to see them in the preview they are cut off by the footer and header.
Dev environment info:
- stream-chat-react-native 5.0.0
- react-native: 0.68.3
- Device/Emulator (android/ios) and OS version: Iphone 8 with IOS 15 and Samsung A50 with Android 12
To Reproduce Steps to reproduce the behavior:
- Go to the chat
- Attach some big images
- Open images
- See cut images
Expected behavior I'm not sure if it's the expected behavior, but we should be able to specify like a prop 'scale to fit' or sth like that.
Additional context I'm using react-navigation with status bar and tab bar navigator, both makes the space of the screen a bit smaller. I hide the stream header, I use a transparent header in react navigation and with the left button of status bar I handle the hide overlay logic.
@Marcoo09 could you please share some screenshot pointing out the issue?
Yes, sure. In this case it is more striking but having a transparent header and only the tab bar in two other apps in which I use stream it also happens The workaround I use is override the onPressMessage, check that the messages has attachements and hide the status bard and tab bar navigator
https://user-images.githubusercontent.com/18408823/189786052-77e536e7-511c-4436-bfae-95fa3bd3a894.mov
@Marcoo09 thanks for providing the info, we added this issue to the backlog.
I think we had the same issue before If I remember the solution is to place the OverlayProvider (from stream) higher in the DOM.
https://getstream.io/chat/docs/sdk/reactnative/basics/stream_chat_with_navigation/
Hey @Marcoo09, @neopit's point makes sense, please check our docs and raise the OverlayProvider to the highest level that works for you.
Hey @vanGalilea @neopit, I have the O OverlayProvider at the top of DOM and the problem happens