React Native Stream Group Chat Tutorial: Render Chat screen UI

render UI in Chat.js

// src/screens/Chat.js
render() {
  if (this.channel_state) {
    const { messages, is_users_modal_visible } = this.state;
    const channel_users = this.channel_state.members;

    return (
      <View style={styles.container}>
        <GiftedChat
          messages={messages}
          onSend={messages => this.onSend(messages)}
          user={{
            _id: this.user_id
          }}
        />
        <Modal isVisible={is_users_modal_visible}>
          <View style={styles.modal}>
            <View style={styles.modal_header}>
              <Text style={styles.modal_header_text}>Users</Text>
              <TouchableOpacity onPress={this.hideModal.bind(this, 'users')}>
                <View>
                  <Text>Close</Text>
                </View>
              </TouchableOpacity>
            </View>

            <View style={styles.modal_body}>
              <FlatList
                keyExtractor={item => item.user.id.toString()}
                data={channel_users}
                renderItem={this.renderUser}
              />
            </View>
          </View>
        </Modal>
      </View>
    );
  }

  return null;
}