Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native Stream Group Chat Tutorial: Initialize Chat screen
// src/screens/Chat.js
import React, { Component } from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import { StreamChat } from 'stream-chat';
import Config from 'react-native-config';
import axios from 'axios';
import Modal from 'react-native-modal';
const CHAT_SERVER = 'YOUR NGROK HTTPS URL';
const client = new StreamChat(Config.APP_KEY);
class Chat extends Component {
state = {
messages: [],
is_users_modal_visible: false
}
// next: add navigationOptions
}
export default Chat;
const styles = {
container: {
flex: 1
},
header_right: {
flex: 1,
flexDirection: "row",
justifyContent: "space-around"
},
header_button_container: {
marginRight: 10
},
header_button_text: {
color: '#FFF'
},
modal: {
flex: 1,
backgroundColor: '#FFF'
},
close: {
alignSelf: 'flex-end',
marginBottom: 10
},
modal_header: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 10
},
modal_header_text: {
fontSize: 20,
fontWeight: 'bold'
},
modal_body: {
marginTop: 20,
padding: 20
},
list_item_body: {
flex: 1,
padding: 10,
flexDirection: "row",
justifyContent: "space-between"
},
list_item: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
},
list_item_text: {
marginLeft: 10,
fontSize: 20,
},
inline_contents: {
flex: 1,
flexDirection: 'row'
},
status_indicator: {
width: 10,
height: 10,
alignSelf: 'center',
borderRadius: 10,
},
online: {
backgroundColor: '#5bb90b'
},
offline: {
backgroundColor: '#606060'
},
}
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.