Merge pull request #212 from virdesai/keyboard-fix-and-other-cleanup

KeyboardCompatibleView initialHeight setting with keyboard closed and new onLayout height

Author: vishalnarkhede

docs/cookbook.md

@@ -1326,11 +1326,14 @@ For setup regarding push notifications, first of all make sure you have followed
 
 ### Requirements
 
-- User must be a member of channel, if he expects a push notification for a message on that channel.
+- User must be a member of channel if they expect a push notification for a message on that channel.
 
 - We only send a push notification, when user is **NOT** connected to chat, or in other words, if user does **NOT** have any active WS (websocket) connection. WS connection is established when you do
 
-  `await client.setUser({ id: 'user_id' })`.
+  ```js
+  await client.setUser({ id: 'user_id' })
+  await client.addDevice(token.token, token.os === 'ios' ? 'apn' : 'firebase')
+  ```
 
 ### Caveats
 

src/components/ChannelInner.js

@@ -155,7 +155,6 @@ class ChannelInner extends PureComponent {
       threadMessages: [],
       threadLoadingMore: false,
       threadHasMore: true,
-      kavEnabled: true,
       /** We save the events in state so that we can display event message
        * next to the message after which it was received, in MessageList.
        *
@@ -651,8 +650,6 @@ class ChannelInner extends PureComponent {
       this.props.disableIfFrozenChannel,
   });
 
-  renderComponent = () => this.props.children;
-
   renderLoading = () => {
     const Indicator = this.props.LoadingIndicator;
     return <Indicator listType="message" />;
@@ -665,7 +662,7 @@ class ChannelInner extends PureComponent {
 
   render() {
     let core;
-    const { KeyboardCompatibleView, t } = this.props;
+    const { children, KeyboardCompatibleView, t } = this.props;
     if (this.state.error) {
       this.props.logger(
         'Channel component',
@@ -693,14 +690,7 @@ class ChannelInner extends PureComponent {
           enabled={!this.props.disableKeyboardCompatibleView}
         >
           <ChannelContext.Provider value={this.getContext()}>
-            <SuggestionsProvider
-              handleKeyboardAvoidingViewEnabled={(trueOrFalse) => {
-                if (this._unmounted) return;
-                this.setState({ kavEnabled: trueOrFalse });
-              }}
-            >
-              {this.renderComponent()}
-            </SuggestionsProvider>
+            <SuggestionsProvider>{children}</SuggestionsProvider>
           </ChannelContext.Provider>
         </KeyboardCompatibleView>
       );

src/components/Chat.js

@@ -165,7 +165,6 @@ export const Chat = themed(
       this._unmounted = true;
       this.props.client.off('connection.recovered');
       this.props.client.off('connection.changed');
-      this.props.client.off(this.handleEvent);
       this.unsubscribeNetInfo && this.unsubscribeNetInfo();
     }
 

src/components/KeyboardCompatibleView.js

@@ -42,7 +42,7 @@ export class KeyboardCompatibleView extends React.PureComponent {
     super(props);
 
     this.state = {
-      channelHeight: new Animated.Value('100%'),
+      channelHeight: new Animated.Value(Dimensions.get('window').height),
       // For some reason UI doesn't update sometimes, when state is updated using setValue.
       // So to force update the component, I am using following key, which will be incremented
       // for every keyboard slide up and down.
@@ -228,8 +228,12 @@ export class KeyboardCompatibleView extends React.PureComponent {
       layout: { height },
     },
   }) => {
-    // Not to set initial height again.
-    if (!this.initialHeight) {
+    // Don't set initial height again if the keyboard is open or initialHeight and layout height are equal
+    // Helps with issues related to bottom tab bar animations occurring after this initial onLayout call
+    if (
+      !this.initialHeight ||
+      (!this._keyboardOpen && this.initialHeight !== height)
+    ) {
       this.initialHeight = height;
       this.state.channelHeight.setValue(this.initialHeight);
     }

src/components/MessageInput.js

@@ -465,7 +465,7 @@ class MessageInput extends PureComponent {
           mentioned_users: [],
         });
       } catch (err) {
-        console.log('Fialed');
+        console.log('Failed');
       }
     }
   };

types/index.d.ts

@@ -1,7 +1,7 @@
 // TypeScript Version: 2.8
 
 import * as React from 'react';
-import { Text, GestureResponderEvent, FlatList } from 'react-native';
+import { FlatList, GestureResponderEvent } from 'react-native';
 import * as Client from 'stream-chat';
 import * as SeamlessImmutable from 'seamless-immutable';
 import * as i18next from 'i18next';