To keep our code succinct and maintainable, we will use GiftedChat for rendering all the messages in a chat, but there is still some work we need to do to properly render this screen:

/*** src/screens/Chat.js ***/

import React, { PropTypes } from 'react'
import { View, Image, ActivityIndicator } from 'react-native';
import { observer, inject } from 'mobx-react/native'
import { GiftedChat } from 'react-native-gifted-chat'

@inject('chats', 'users') @observer
class Chat extends React.Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    title: navigation.state.params.name,
    headerRight: <Image source={{uri: navigation.state.params.image}} 
    style={{
      width: 30,
      height: 30,
      borderRadius: 15,
      marginRight: 10,
      resizeMode: 'cover'
    }}/>
  })

  onSend(messages) {
    this.props.chats.addMessages(this.chatId, this.contactId, 
    messages);
  }

  componentWillMount() {
    this.contactId = this.props.navigation.state.params.contactId;
    this.chatId = this.props.navigation.state.params.id;this.props.chats.selectChat(this.chatId);
  }

  render () {
    var messages = this.props.chats.selectedChatMessages;
    if(this.props.chats.downloadingChat) {
      return <View><ActivityIndicator style={{marginTop: 20}}/></View>
    }

    return (
      <GiftedChat
        onSend={(messages) => this.onSend(messages)}
        messages={messages ? messages.toJS().reverse() : []}
        user={{
          _id: this.props.users.id,
          name: this.props.users.name,
          avatar: this.props.users.avatar
        }}
      />
    )
  }
}

export default Chat;

We also need to inject some stores for our <Chat /> component to work. This time, we need users and chats stores that will be available as props inside the component. This component also expects to receive two params from the navigator: chatId (the ID for the chat) and contactId (the ID for the person the user is chatting with).

When the component is getting ready to be mounted (onComponentWillMount()) we save the chatId and contactId in more convenient variables inside the component and call the selectChat() method on the chats store. This will trigger a request to Firebase database to fetch the messages for the selected chat, which will be synced through the chats store and is accessible to the component through this.props.chats.selectedChatMessages. MobX will also update a downloadingChat property to ensure we let the user know the data is being retrieved from Firebase.

Lastly, we need to add a onSend() function to GiftedChat, which will call the addMessages() method on the chats store to post the message to Firebase every time the Send button is pressed.

GiftedChat helped us in largely reducing the amount of work we need to do in order to render the list of messages for a chat. On the other hand, we had to format the messages in the way GiftedChat requires and provide an onSend() function to be executed whenever we need a message posted to our backend.