React-native-gifted-chat: How to use with Expo?

[thebigredgeek]

Trying to understand how to install this in Expo if I want to use Android?

[parijatsahai]

What's the specific issue that you are encountering? You should be able to simply add the package using "yarn add" or "npm install" command and then use import { GiftedChat, Actions, Bubble } from 'react-native-gifted-chat' and then use the component <GiftedChat /> with parameters.

[thebigredgeek]

• Add android:windowSoftInputMode="adjustResize" to your Android Manifest android/app/src/main/AndroidManifest.xml

<!-- ... -->
<activity
  android:name=".MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
<!-- ... -->

^ This is not possible with Expo. Is it truly necessary, or are the docs out of date?

[slorber]

Hi, I'm wondering the same.

For an app I'd like a system similar to Intercom where customers can chat with an app admin easily (with images/files integration...). Intercom requires ejecting so this chat lib is a potential candidate as well as it may permit avoid ejecting to CRNA/Expo.

As far as I know it's not possible to customize manifest without ejecting of Expo, so it would be nice to know if this is really required or not.

@FaridSafi added this in doc so he may know why this is needed: https://github.com/FaridSafi/react-native-gifted-chat/commit/79b196427aa530a5ba1f44230ac1f386fe67bfec

Also note that it's possible the manifest already has this setting in expo, according to what I see: https://github.com/expo/expo/blob/master/exponent-view-template/android/app/src/main/AndroidManifest.xml#L14

I think it would be nice if someone build a sample app to demonstrate usage in Expo, and then to add to readme that this lib is compatible with Expo without ejecting.

[brentvatne]

I submitted a PR to the docs to explain that this config is already done in Expo.

https://github.com/FaridSafi/react-native-gifted-chat/pull/482

[lsps9150414]

@brentvatne Thanks for showing up and saving my day in almost all issues I encountered with expo! You are the hero!

[llamaluvr]

Did this actually work for anyone? I'm using Gifted.chat in Expo 18 and the keyboard is covering the text input.

[llamaluvr]

I created an example here: https://github.com/llamaluvr/expo-gifted-chat-example

You can run it with exp start and then scan it into the Expo Client on your Android device.

When I did this, the keyboard hid the input toolbar and the bottom of the chat window- nothing was pushed up.

Further, when I detached from Expo, I saw that AndroidManifest.xml had the required options, yet, when I ran it using react-native run-android, the toolbar was still hidden.

So, I'm left wondering if this works correctly on Android at all. I guess I'll try it next with a plain react native project, though I don't see what difference that will make compared to a detached Expo project.

[llamaluvr]

Figured it out! Well, at least what is wrong.

If you remove android:theme="@style/Theme.Exponent.Light" from the activity tag in AndroidManifest.xml (this is after detaching from Expo, of course), then the input bar moves up with the keyboard correctly. Unfortunately, it also adds this ugly default title bar, so it's not so simple as detaching and removing that line. So, I'll put in a bug with Expo and post it here.

[llamaluvr]

It's really unclear what repo this would even be an issue under, so I've posted the issue at https://forums.expo.io/t/android-theme-causes-window-not-to-resize-when-keyboard-is-open/1582

[llamaluvr]

In the meantime, I'm using the following workaround of using a keyboard spacer. I'm having a hard time seeing any difference between this and the way it works outside of Expo.

import React, { Component } from 'react';
import { View, Platform } from 'react-native';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import { GiftedChat } from 'react-native-gifted-chat';

export default class Chat extends Component {
  render() {
    const giftedChatMessages = [
      ...
    ];
    return (
      <View style={{flex: 1}}>
        <GiftedChat
          messages={giftedChatMessages}
          onSend={newMessages => onSend(newMessages[0].text)}
          user={{
              _id: 1,
          }}
          renderAvatar={() => null}
        />
        {Platform.OS === 'android' ? <KeyboardSpacer /> : null }
      </View>   
    )
  }
}

[thebigredgeek]

I think the ideal solution here is to actually make this work without detaching

[brentvatne]

You can set the status bar background color in app.json and that may help too (as it becomes opaque rather than transparent when this happens)

"androidStatusBar": {
  "backgroundColor": "#000000"
}

[cooperka]

Clarified in https://github.com/FaridSafi/react-native-gifted-chat/pull/482. Thanks everyone!

[bmason]

I follow the directions in
Run the example

git clone https://github.com/FaridSafi/react-native-gifted-chat
cd react-native-gifted-chat/example
npm install
react-native run-ios

and get
C:\React\react-native-gifted-chat\example>npm install

[email protected] postinstall C:\React\react-native-gifted-chat\example
yarn run clean:example; yarn run clean:babelrc

yarn run v0.27.5
error Command "clean:example;" not found. Did you mean "clean:example"?
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.1.1 (node_modules\sane\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: yarn run clean:example; yarn run clean:babelrc
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\small\AppData\Roaming\npm-cache_logs\2017-08-31T11_52_02_630Z-debug.log

[xcarpentier]

Hello,

I have found a way to show the TextInput by adding a props forceGetKeyboardHeight

Please see this fix and vote for it:
https://github.com/FaridSafi/react-native-gifted-chat/pull/587

@FaridSafi , @kfiroo or @cooperka

Please review it :)

Thanks!

[mikesholiu]

@xcarpentier - can you explain how this works? i don't think these changes are resulting in the intended behavior (testing on android emulator with Android 8.0)

[ratsjosh]

@llamaluvr - Your solution at the top fixed the problem of the Android keyboard hiding the text inputs!! Life saver 👍

[llamaluvr]

One note I forgot when I posted about how you could get the view to adjust by detaching from Expo and updating AndroidManifest.xml: you don't actually need to detach. Setting a backgroundColor for the androidStatusBar in app.json effectively makes the same change. Either way you do it, there's a pretty big consequence, though (and I don't think it has anything to do with Expo, but with RN in general) - you lose the transparent status bar. IMO it doesn't look as good and it mucked other things up in my app, which is why I'm sticking with adding the KeyboardSpacer.

On that note, I'm really wondering if it's worth it for GiftedChat to try to handle moving the view based on the keyboard at all, or at least make it configurable to turn it off for those who don't want or need its handling. If there was an option to turn off GiftedChat's keyboard avoidance, I would handle keyboard avoidance like any other view in my app- by adding the spacer, regardless of platform. Some people add a spacer in their root component so they never have to worry about it again, but that doesn't work with GiftedChat because it also has it's own avoidance. IMO adding a spacer isn't that hard and puts the developer in full control.

[ashconnell]

I also ran into these differences with KeyboardAvoidingView after moving from Expo to a pure React Native app. The status bar hack isn't super elegant either.

In my own project, i've essentially normalised Android to behave in the same way as iOS. This way KeyboardAvoidingView just works out of the box!

I left android to use the default windowSoftInputMode: adjustResize (adjustPan and adjustNothing have their own problems).

Then i set the root view of my app to be the height of the window dimensions. This prevents the view from collapsing when the keyboard appears, acting essentially the same as on iOS.

Anyway, thought i'd post that here in case it's useful.

[f4th4n]

I solved by using topSpacing property on KeyboardSpacer

import React, { Component } from 'react';
import { View, Platform } from 'react-native';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import { GiftedChat } from 'react-native-gifted-chat';

export default class Chat extends Component {
  render() {
    const giftedChatMessages = [
      ...
    ];
    return (
      <View style={{flex: 1}}>
        <GiftedChat
          messages={giftedChatMessages}
          onSend={newMessages => onSend(newMessages[0].text)}
          user={{
              _id: 1,
          }}
          renderAvatar={() => null}
        />
        {Platform.OS === 'android' ? <KeyboardSpacer topSpacing={50} /> : null }
      </View>   
    )
  }
}

[llamaluvr]

Since my original workaround is linked on the readme, I wanted to update on something we recently found. react-native-keyboard-spacer uses Dimensions.get('window') in its calculation determining what space is taken up by the keyboard. On Android phones with notches, this is now returning the wrong height (https://github.com/facebook/react-native/issues/23693), causing the TextInput on Gifted Chat to be hidden. We're noticing this more and more as phones like the Pixel 3 XL and Galaxy S10 become popular.

KeyboardAvoidingView does not use Dimensions.get('window') and avoids this problem. Normally you can use it as such:

<KeyboardAvoidingView behavior="padding">
   <GiftedChat ... />
</KeyboardAvoidingView>

However, it has the opposite problem that react-native-keyboard-spacer has with navigation chrome- headers throw it off. This can be resolved by setting keyboardVerticalOffset to the height of your header bar, or by wrapping all of your navigation in KeyboardAvoidingView. If you do the latter, you may want to make use of React Navigation's tabBarOptions.keyboardHidesTabBar (https://reactnavigation.org/docs/en/bottom-tab-navigator.html#bottomtabnavigatorconfig).

I'll make a note to submit a PR tomorrow suggesting a documentation change to this effect.