New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use with Expo? #461

Closed
thebigredgeek opened this Issue May 16, 2017 · 19 comments

Comments

Projects
None yet
@thebigredgeek

thebigredgeek commented May 16, 2017

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

@parijatsahai

This comment has been minimized.

parijatsahai commented May 16, 2017

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

This comment has been minimized.

thebigredgeek commented May 16, 2017

  • 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

This comment has been minimized.

slorber commented Jun 7, 2017

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

This comment has been minimized.

Contributor

brentvatne commented Jun 19, 2017

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

#482

@lsps9150414

This comment has been minimized.

lsps9150414 commented Jun 24, 2017

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

@llamaluvr

This comment has been minimized.

llamaluvr commented Jul 11, 2017

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

@llamaluvr

This comment has been minimized.

llamaluvr commented Jul 12, 2017

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

This comment has been minimized.

llamaluvr commented Jul 12, 2017

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

This comment has been minimized.

llamaluvr commented Jul 12, 2017

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

This comment has been minimized.

llamaluvr commented Jul 12, 2017

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

This comment has been minimized.

thebigredgeek commented Jul 13, 2017

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

@brentvatne

This comment has been minimized.

Contributor

brentvatne commented Jul 13, 2017

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

This comment has been minimized.

Collaborator

cooperka commented Jul 16, 2017

Clarified in #482. Thanks everyone!

@bmason

This comment has been minimized.

bmason commented Aug 31, 2017

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

GiftedChat@0.0.1 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 fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! GiftedChat@0.0.1 postinstall: yarn run clean:example; yarn run clean:babelrc
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the GiftedChat@0.0.1 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

This comment has been minimized.

Collaborator

xcarpentier commented Sep 26, 2017

Hello,

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

Please see this fix and vote for it:
#587

@FaridSafi , @kfiroo or @cooperka

Please review it :)

Thanks!

@mikesholiu

This comment has been minimized.

mikesholiu commented Oct 10, 2017

@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

This comment has been minimized.

ratsjosh commented Nov 6, 2017

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

@llamaluvr

This comment has been minimized.

llamaluvr commented Nov 6, 2017

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

This comment has been minimized.

ashconnell commented Jan 17, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment