title: Invariant Violation tried to get frame out of range index NaN
body: <p>I am running an <code>react-native</code> chat app example from <a href="https://blog.expo.io/how-to-build-a-chat-app-with-react-native-3ef8604ebb3c" rel="nofollow noreferrer">Even Bacon</a>  and run into <code>frame out of range NaN</code> error:</p>
  
  <p><a href="https://i.stack.imgur.com/KT6RI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KT6RI.jpg" alt="enter image description here"></a></p>
  
  <p>Here is package.json:</p>
  
  <pre><code> "firebase": "^5.8.0",
      "react": "16.6.3",
      "react-native": "0.57.8",
      "react-native-elements": "^0.19.1",
      "react-native-gesture-handler": "^1.0.15",
      "react-native-gifted-chat": "^0.7.0",
      "react-navigation": "^3.0.9"
  </code></pre>
  
  <p>There are a few online posts about the error with different situations. The error is pointing to <code>GiftedChat</code> in Chat.js. and I have no clue what causes the error.</p>
  
  <pre><code>import React, { Component} from 'react';
  import {View, StyleSheet } from 'react-native';
  import { GiftedChat } from 'react-native-gifted-chat';
  import Fire from '../Fire';
  
  class Chat extends React.Component {
      static navigationOptions = ({ navigation}) =&gt; ({
          title: (navigation.state.params || {}).name || 'Chat!',
      });
  
      state = {
          messages: {},
      };
  
      componentDidMount() {
          Fire.shared.on(message =&gt;
                this.setState(previousState =&gt; ({
                  messages: GiftedChat.append(previousState.messages, message),
                }))
          );
      }
  
      componentWillUnmount() {
        Fire.shared.off();
      }
  
      get user() {
        // return our name and our UID for GiftedChat to parse
        return {
            name: this.props.navigation.state.params.name,
            _id: Fire.shared.uid,
        };
      }
  
      render() {
          return (
              &lt;GiftedChat   &lt;&lt;&lt;&lt;==this is line:37
                messages={this.state.messages}
                onSend={Fire.shared.send}
                user={this.user}
              /&gt; 
          );
      }
  }
  
  const styles = StyleSheet.create({});
  
  
  
  export default Chat;
  </code></pre>