98 lines
2.0 KiB
JavaScript
98 lines
2.0 KiB
JavaScript
'use strict';
|
|
|
|
import React, { Component } from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Image,
|
|
ListView,
|
|
Platform,
|
|
StyleSheet,
|
|
View,
|
|
} from 'react-native';
|
|
import ListItem from '../../components/ListItem';
|
|
import Backend from '../../lib/Backend';
|
|
|
|
export default class ChatListScreen extends Component {
|
|
|
|
static navigationOptions = {
|
|
title: 'Chats',
|
|
header: {
|
|
visible: Platform.OS === 'ios',
|
|
},
|
|
tabBar: {
|
|
icon: ({ tintColor }) => (
|
|
<Image
|
|
// Using react-native-vector-icons works here too
|
|
source={require('./chat-icon.png')}
|
|
style={[styles.icon, {tintColor: tintColor}]}
|
|
/>
|
|
),
|
|
},
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
|
|
this.state = {
|
|
isLoading: true,
|
|
dataSource: ds,
|
|
};
|
|
}
|
|
|
|
async componentDidMount() {
|
|
const chatList = await Backend.fetchChatList();
|
|
this.setState((prevState) => ({
|
|
dataSource: prevState.dataSource.cloneWithRows(chatList),
|
|
isLoading: false,
|
|
}));
|
|
}
|
|
|
|
// Binding the function so it can be passed to ListView below
|
|
// and 'this' works properly inside renderRow
|
|
renderRow = (name) => {
|
|
return (
|
|
<ListItem
|
|
label={name}
|
|
onPress={() => {
|
|
// Start fetching in parallel with animating
|
|
this.props.navigation.navigate('Chat', {
|
|
name: name,
|
|
});
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
if (this.state.isLoading) {
|
|
return (
|
|
<View style={styles.loadingScreen}>
|
|
<ActivityIndicator />
|
|
</View>
|
|
);
|
|
}
|
|
return (
|
|
<ListView
|
|
dataSource={this.state.dataSource}
|
|
renderRow={this.renderRow}
|
|
style={styles.listView}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
loadingScreen: {
|
|
backgroundColor: 'white',
|
|
paddingTop: 8,
|
|
flex: 1,
|
|
},
|
|
listView: {
|
|
backgroundColor: 'white',
|
|
},
|
|
icon: {
|
|
width: 30,
|
|
height: 26,
|
|
},
|
|
});
|