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: 79b1964

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.

#482

[lsps9150414]

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

[keith-kurak]

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

[keith-kurak]

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.

[keith-kurak]

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.

[keith-kurak]

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

[keith-kurak]

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 #482. Thanks everyone!