CODEWITHSUNDEEP
react-nativereact-navigation
MonkeyBonkey
MonkeyBonkey

Reputation: 47921

How to have react gifted chat render message box at bottom of screen when tab is hidden

So I'm using react-native-gifted chat along with react navigation. My problem is that I set tab bar visible to false, but the input box for gifted chat renders above what it thinks is the tab bar - which is hidden.

How can I either make it render full screen, or get it to not float above the hidden tab bar.

 static navigationOptions = () => ({
    title: 'CHAT',
    tabBarLabel: 'Chat',
    tabBarVisible: false,
    tabBarIcon: ({ tintColor }) => (
      <View>
        <Icon
          name="comment"
          style={{ color: tintColor, fontSize: 32 }} />
      </View>
    ),

  });

enter image description here

Upvotes: 1

Views: 3938

Answers (1)

Joshua Dyck
Joshua Dyck

Reputation: 2173

I just had the same problem and here's what I did:

On the react-native-gifted-chat GitHub readme.md: it gives some props we can use.

The one we are interested in is:

bottomOffset (Integer) - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)

I have multiple chat screens in my app and so I conditionally applied the fix by passing in a props called offsetFix for screens where the tab hides. Here's the code:

<GiftedChat
    loadEarlier={...}

    isLoadingEarlier={...}
    messages={...}
    onSend={(message) => {...}}
    user={{
        _id: ...
        name: ...,
        avatar: ...,
    }}
    showUserAvatar={...}
    renderActions={...}
    placeholder={'Type a message...'}
    // Setting the offset to 50 (my tab bar height), 
    // fixed it for me.
    bottomOffset={this.props.offsetFix ? 50 : 0} // <---------------------------
/>

Hope that helps.

Upvotes: 1

Related Questions