wrapInSafeArea problem

[baltagih2]

Issue Description

On the latest version (2.0.0), the wrapInSafeArea option was removed and it looks like it's now applied automatically. This is causing the input and the keyboard to have a gap between them. I previously had wrapInSafeArea set to false which fixed this problem.

Steps to Reproduce / Code Snippets

Use the GiftedChat component as usual, if you previously had wrapInSafeArea={false}, this doesn't work anymore

Expected Results

Being able to set wrapInSafeArea to false

Additional Information

• Nodejs version: v16.15.0
• React version: 18.2.0
• React Native version: 0.71.3
• react-native-gifted-chat version: ^2.0.0
• Platform(s) (iOS, Android, or both?): tested on iOS simulator and physical device
• TypeScript version: ^4.9.4

[joecampo]

@baltagih2 I've run into the same issue, for me it is using react navigation tabs and using the bottomOffset prop:

https://github.com/FaridSafi/react-native-gifted-chat/pull/2353#issuecomment-1477206396

[baltagih2]

Any workaround @joecampo in the meantime?

[joecampo]

@baltagih2 I'm guessing you're also using React Navigation with tabs and were specifying the bottomOffset prop? If so, there isn't a workaround yet, but I submitted a PR to fix: https://github.com/FaridSafi/react-native-gifted-chat/pull/2361

Hopefully we can get it merged and a patch release.

[baltagih2]

@joecampo I'm actually not using the bottomOffset prop and not using tabs. Regular Stack React Navigation, was using wrapInSafeArea={false} and handling everything myself but the prop was removed from the latest release so it's forcing a safeArea around it which breaks my setup

[joecampo]

@baltagih2 How big is the gap? If small, even when not using bottomOffset it would set it to 1 when the keyboard was shown even if the prop was not defined. The PR proposed would fix that. (I'm thinking this might be your issue).

The safe area dependency was removed. So it is not wrapping in a safe area (just a regular View component) which would be the same behavior as wrapInSafeArea={false}.

If the gap is larger: Is it wrapped in a View component parent? Does the parent have flex: 1? etc.

[baltagih2]

Here is the current gap I'm getting (same one I used to get if I didn't use wrapInSafeArea={false})

[joecampo]

@baltagih2 and I'm assuming no gap when the keyboard is closed? Anyways, I'd wait for the PR to be merged and see if that fixes this. I'm not a maintainer of this and have very little experience using this library. 😅

[baltagih2]

@joecampo that is correct, no gap with a closed keyboard. Thank you so much for the help, I'll wait for that PR merge and see if it fixes it. Thank you again!

[baltagih2]

Update here: In the latest release (2.0.1), I am able to set bottomOffset to 22 to remove the gap. However, this is a workaround and I only tested on two devices and it might not work everywhere. Being able to set wrapInSafeArea to false would be a cleaner way of doing things in my opinion

[amerikan]

@baltagih2 wrapInSafeArea={false} is no longer needed as SafeArea is no longer included in the library in 2.0.0+.

[baltagih2]

@amerikan Just thinking out loud, I might be missing something:

• previously, I had wrapInSafeArea={false} and handled everything with my own safearea
• This means, after wrapInSafeArea was removed, my own safeArea might be causing the gap
• However, since it was set to false, and was working correctly, something else must have changed

the 22 offset I'm adding might be the height of the bottom safeArea (sliding thing from iOS).

It probably has something to do with my code, but I'm trying to figure out why it was working with wrapInSafeArea={false}, was this doing anything other than wrapping the component in a SafeAreaView?

[amerikan]

@baltagih2 you can check what changed in 2.0.0 https://github.com/FaridSafi/react-native-gifted-chat/pull/2353/files and 2.0.1 https://github.com/FaridSafi/react-native-gifted-chat/pull/2361/files

[riehum]

Does any one fix it or how to tackle it

[mariomurrent-softwaresolutions]

Same here, any news about this?