Gifted Chat UI - Height issue on ios

[taatiq882]

Issue Description

On Android, it's working but on ios, the Gifted chat is taking the full available heigh. As it can be seen it's not calculating heigh properly. When Header is disabled then it works fine but as soon I enable Header, some sort of padding or height issue comes. This doesn't happen on Android.

ON IOS with Header Enabled (Native Stack Navigator V6)

[amerikan]

I came across this problem too, and I think that's because this library tries to place SafeArea for you by default :(. It's not documented, but there is a wrapInSafearea property which I set to false since I am already taking care of the SafeArea myself.

<GiftedChat wrapInSafeArea={false} ....

[taatiq882]

Thanks. It solved the problem 🙌🏾

[chakafasano88]

Thank you!! Solved the issue.

[julian-hecker]

Works for me. Still having some funkiness with the textinput and safearea

[ori9998]

Works for me. Still having some funkiness with the textinput and safearea

I think that funkiness with the textinput and safearea seems like my problem => message going below textinput. Do you have the same problem? Have you solve it?

[jwAndroid]

create a custom header

const RoomHeader = styled.View(() => ({
  position: 'absolute',
  width: '100%',
  height: 50,
  backgroundColor: 'gray',
  top: getStatusBarHeight(),
}));

    <Container>
      <RoomHeader />

      <View style={{ paddingTop: 50, flex: 1 }}>
        <GiftedChat
          alignTop
          messages={messages}
          onSend={(messages) => onSend(messages)}
          user={{
            _id: 1,
          }}
          bottomOffset={bottom === 0 ? 0 : bottom}
        />
      </View>
    </Container>

[zivgit]

workaround:

import { SafeAreaView } from 'react-native-safe-area-context';

<SafeAreaView edges={['right', 'bottom', 'left']} style={{ flex: 1 }}>
    <GiftedChat
        wrapInSafeArea={false}

[a-vikor]

I came across this problem too, and I think that's because this library tries to place SafeArea for you by default :(. It's not documented, but there is a wrapInSafearea property which I set to false since I am already taking care of the SafeArea myself.

<GiftedChat wrapInSafeArea={false} ....

First of all, thank you for great work :) In the other hand it would be nice if this would be documented at least in the Troubleshooting section of README.md 😄

[amerikan]

Update: you can now update to v2.0.0 which finally removes SafeArea from the library, so this will not be an issue.

[fayhot]

I met the same problem. I have solved it, but not in the way that add "wrapInSafeArea={false}".
The version i used has no the property.

I tried import the SafeAreaView from "react-native" rather than "react-native-safe-area-context". And then it works, the problem has gone away