Chats

This is the screen displaying the list of open chats. The special thing to note here is we are using a second navigator to display selected chats on top of the chats list. This means we need a StackNavigator in our Chats component that will contain two screens: ChatList and Chat. When a user taps on a chat from ChatList, StackNavigator will display the selected chat on top of ChatList making the list of chats available through a standard < back button in the header.

For listing the chats, we will use <FlatList />, a performant interface for rendering simple, flat lists, supporting the most of the features from <ListView />:

/*** src/screens/Chats.js ***/

import React, { PropTypes } from 'react'
import { View, Text, FlatList, ActivityIndicator } from 'react-native'
import { observer, inject } from 'mobx-react/native'
import { StackNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons/FontAwesome'
import notifications from '../notifications'

import...