The list of chats relies on <ListItem /> to render each specific chat within the list. This component is a custom UI class we created to reduce the ChatList component complexity:
/*** src/components/ListItem.js ***/
import React, { PropTypes } from 'react'
import { View, Image, Text, TouchableOpacity } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'
const ListItem = (props) => {
return (
<TouchableOpacity onPress={props.onPress}>
<View style={{height: 60, borderColor: '#ccc',
borderBottomWidth: 1,
marginLeft: 10, flexDirection: 'row'}}>
<View style={{padding: 15, paddingTop: 10}}>
<Image source={{uri: props.image}} style={{width: 40,
height: 40,
borderRadius: 20, resizeMode: 'cover'}}/>
</View>
<View style={{padding: 15, paddingTop: 20}}>
<Text style={{fontSize: 15}}>{ props.text }</Text>
</View>
<Icon name="angle-right" size={20} color="#aaa"
style={{position: 'absolute', right: 20, top: 20}}/>
</View>
</TouchableOpacity>
)
}
export default ListItemThere is little logic on this component as it only receives a prop named onPress(), which will be called when the <ListItem /> is pressed, which, as we saw on this component's parent, will open the chat screen to show the list of messages on that specific chat. Let's take a look at the chat screen where all the messages for a specific chat are rendered.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.