Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native Stream Group Chat Tutorial: Render Chat screen UI
// 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.