- Reusable header

- Server image as drawer icon

app/containers/Header.js

@@ -1,18 +1,8 @@
 import React from 'react';
-import { Text, View, StyleSheet, Platform, TouchableOpacity, Dimensions } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import Modal from 'react-native-modal';
 import { SafeAreaView } from 'react-navigation';
 
-import DrawerMenuButton from '../presentation/DrawerMenuButton';
-import Avatar from './Avatar';
-import RocketChat from '../lib/rocketchat';
-import { STATUS_COLORS } from '../constants/colors';
-
-const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
-
 let platformContainerStyles;
 if (Platform.OS === 'ios') {
 	platformContainerStyles = {
@@ -32,7 +22,6 @@ if (Platform.OS === 'ios') {
 }
 
 const appBarHeight = Platform.OS === 'ios' ? 44 : 56;
-const { width } = Dimensions.get('window');
 const styles = StyleSheet.create({
 	container: {
 		backgroundColor: Platform.OS === 'ios' ? '#F7F7F7' : '#FFF',
@@ -41,171 +30,20 @@ const styles = StyleSheet.create({
 	},
 	appBar: {
 		flex: 1
-	},
-	header: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		flex: 1
-	},
-	titleContainer: {
-		left: TITLE_OFFSET,
-		right: TITLE_OFFSET,
-		position: 'absolute',
-		alignItems: 'center',
-		justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
-		flexDirection: 'row'
-	},
-	status: {
-		borderRadius: 4,
-		width: 8,
-		height: 8,
-		marginRight: 10
-	},
-	avatar: {
-		marginRight: 10
-	},
-	title: {
-		fontWeight: 'bold'
-	},
-	left: {
-		left: 0,
-		position: 'absolute'
-	},
-	right: {
-		right: 0,
-		position: 'absolute'
-	},
-	modal: {
-		width: width - 60,
-		height: width - 60,
-		backgroundColor: '#F7F7F7',
-		borderRadius: 4,
-		flexDirection: 'column'
-	},
-	modalButton: {
-		flex: 1,
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'center',
-		backgroundColor: 'transparent',
-		borderBottomWidth: StyleSheet.hairlineWidth,
-		borderBottomColor: 'rgba(0, 0, 0, .3)',
-		paddingHorizontal: 20
 	}
 });
 
-@connect(state => ({
-	user: state.login.user,
-	Site_Url: state.settings.Site_Url
-}))
 export default class extends React.PureComponent {
 	static propTypes = {
-		navigation: PropTypes.object.isRequired,
+		subview: PropTypes.object.isRequired
-		user: PropTypes.object.isRequired,
-		Site_Url: PropTypes.string
 	}
 
-	constructor(props) {
-		super(props);
-		this.state = {
-			isModalVisible: false
-		};
-	}
-
-	onPressModalButton(status) {
-		RocketChat.setUserPresenceDefaultStatus(status);
-		this.hideModal();
-	}
-
-	showModal() {
-		this.setState({ isModalVisible: true });
-	}
-
-	hideModal() {
-		this.setState({ isModalVisible: false });
-	}
-
-	createChannel() {
-		this.props.navigation.navigate('SelectUsers');
-	}
-
-	renderTitle() {
-		if (!this.props.user.username) {
-			return null;
-		}
-		return (
-			<TouchableOpacity style={styles.titleContainer} onPress={() => this.showModal()}>
-				<View style={[styles.status, { backgroundColor: STATUS_COLORS[this.props.user.status || 'offline'] }]} />
-				<Avatar
-					text={this.props.user.username}
-					size={24}
-					style={{ marginRight: 5 }}
-					baseUrl={this.props.Site_Url}
-				/>
-				<Text style={styles.title}>{this.props.user.username}</Text>
-			</TouchableOpacity>
-		);
-	}
-
-	renderRight() {
-		if (Platform.OS !== 'ios') {
-			return;
-		}
-		return (
-			<View style={styles.right}>
-				<Icon.Button
-					name='ios-create-outline'
-					color='blue'
-					size={26}
-					backgroundColor='transparent'
-					onPress={() => this.createChannel()}
-				/>
-			</View>
-		);
-	}
-
-	renderModalButton = (status, text) => {
-		const statusStyle = [styles.status, { backgroundColor: STATUS_COLORS[status] }];
-		const textStyle = { flex: 1, fontWeight: this.props.user.status === status ? 'bold' : 'normal' };
-		return (
-			<TouchableOpacity
-				style={styles.modalButton}
-				onPress={() => this.onPressModalButton(status)}
-			>
-				<View style={statusStyle} />
-				<Text style={textStyle}>
-					{text || status.charAt(0).toUpperCase() + status.slice(1)}
-				</Text>
-			</TouchableOpacity>
-		);
-	};
-
 	render() {
 		return (
 			<SafeAreaView style={styles.container}>
 				<View style={styles.appBar}>
-					<View style={styles.header}>
+					{this.props.subview}
-						<View style={styles.left}>
-							<DrawerMenuButton navigation={this.props.navigation} />
-						</View>
-						{this.renderTitle()}
-						{this.renderRight()}
-					</View>
 				</View>
-				<Modal
-					isVisible={this.state.isModalVisible}
-					supportedOrientations={['portrait', 'landscape']}
-					style={{ alignItems: 'center' }}
-					onModalHide={() => this.hideModal()}
-					onBackdropPress={() => this.hideModal()}
-				>
-					<View style={styles.modal}>
-						{this.renderModalButton('online')}
-						{this.renderModalButton('busy')}
-						{this.renderModalButton('away')}
-						{this.renderModalButton('offline', 'Invisible')}
-					</View>
-				</Modal>
 			</SafeAreaView>
 		);
 	}

app/containers/routes/AuthRoutes.js

@@ -1,36 +1,22 @@
-import React from 'react';
 import { Platform } from 'react-native';
 import { StackNavigator, DrawerNavigator } from 'react-navigation';
 
 import Sidebar from '../../containers/Sidebar';
-import DrawerMenuButton from '../../presentation/DrawerMenuButton';
-import Header from '../../containers/Header';
-
 import RoomsListView from '../../views/RoomsListView';
 import RoomView from '../../views/RoomView';
 import CreateChannelView from '../../views/CreateChannelView';
 import SelectUsersView from '../../views/SelectUsersView';
 
-const drawerPosition = 'left';
-const drawerIconPosition = 'headerLeft';
-
 const AuthRoutes = StackNavigator(
 	{
 		RoomsList: {
-			screen: RoomsListView,
+			screen: RoomsListView
-			navigationOptions({ navigation }) {
-				return {
-					title: 'Rooms',
-					header: <Header navigation={navigation} />
-				};
-			}
 		},
 		Room: {
 			screen: RoomView,
 			navigationOptions({ navigation }) {
 				return {
 					title: navigation.state.params.name || navigation.state.params.room.name || 'Room'
-					// [drawerIconPosition]: (<DrawerMenuButton navigation={navigation} />)÷
 				};
 			}
 		},
@@ -53,18 +39,11 @@ const AuthRoutes = StackNavigator(
 const Routes = DrawerNavigator(
 	{
 		Home: {
-			screen: AuthRoutes,
+			screen: AuthRoutes
-			navigationOptions({ navigation }) {
-				return {
-					title: 'Rooms',
-					[drawerIconPosition]: <DrawerMenuButton navigation={navigation} />
-				};
-			}
 		}
 	},
 	{
 		contentComponent: Sidebar,
-		drawerPosition,
 		navigationOptions: {
 			drawerLockMode: Platform.OS === 'ios' ? 'locked-closed' : 'unlocked'
 		}

app/presentation/DrawerMenuButton.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
-
-const DrawerMenuButton = ({ navigation }) => (
-	<TouchableOpacity
-		onPress={() => navigation.navigate('DrawerOpen')}
-	>
-		<Icon name='bars' style={{ padding: 10, marginLeft: 10 }} size={20} color='black' />
-	</TouchableOpacity>
-);
-
-DrawerMenuButton.propTypes = {
-	navigation: PropTypes.object.isRequired
-};
-
-export default DrawerMenuButton;

app/views/RoomsListView/Header.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import { Text, View, StyleSheet, Platform, TouchableOpacity, Dimensions } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import Modal from 'react-native-modal';
+import { CachedImage } from 'react-native-img-cache';
+
+import Avatar from '../../containers/Avatar';
+import RocketChat from '../../lib/rocketchat';
+import { STATUS_COLORS } from '../../constants/colors';
+
+const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
+
+const { width } = Dimensions.get('window');
+const styles = StyleSheet.create({
+	header: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		flex: 1
+	},
+	titleContainer: {
+		left: TITLE_OFFSET,
+		right: TITLE_OFFSET,
+		position: 'absolute',
+		alignItems: 'center',
+		justifyContent: Platform.OS === 'ios' ? 'center' : 'flex-start',
+		flexDirection: 'row'
+	},
+	status: {
+		borderRadius: 4,
+		width: 8,
+		height: 8,
+		marginRight: 10
+	},
+	avatar: {
+		marginRight: 10
+	},
+	title: {
+		fontWeight: 'normal'
+	},
+	left: {
+		left: 0,
+		position: 'absolute'
+	},
+	right: {
+		right: 0,
+		position: 'absolute'
+	},
+	modal: {
+		width: width - 60,
+		height: width - 60,
+		backgroundColor: '#F7F7F7',
+		borderRadius: 4,
+		flexDirection: 'column'
+	},
+	modalButton: {
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'center',
+		backgroundColor: 'transparent',
+		borderBottomWidth: StyleSheet.hairlineWidth,
+		borderBottomColor: 'rgba(0, 0, 0, .3)',
+		paddingHorizontal: 20
+	},
+	serverImage: {
+		width: 32,
+		height: 32,
+		padding: 10,
+		marginLeft: 10
+	}
+});
+
+@connect(state => ({
+	user: state.login.user,
+	baseUrl: state.settings.Site_Url
+}))
+export default class extends React.PureComponent {
+	static propTypes = {
+		navigation: PropTypes.object.isRequired,
+		user: PropTypes.object.isRequired,
+		baseUrl: PropTypes.string
+	}
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			isModalVisible: false
+		};
+	}
+
+	onPressModalButton(status) {
+		RocketChat.setUserPresenceDefaultStatus(status);
+		this.hideModal();
+	}
+
+	showModal() {
+		this.setState({ isModalVisible: true });
+	}
+
+	hideModal() {
+		this.setState({ isModalVisible: false });
+	}
+
+	createChannel() {
+		this.props.navigation.navigate('SelectUsers');
+	}
+
+	renderLeft() {
+		return (
+			<View style={styles.left}>
+				<TouchableOpacity
+					onPress={() => this.props.navigation.navigate('DrawerOpen')}
+				>
+					<CachedImage
+						style={styles.serverImage}
+						source={{ uri: encodeURI(`${ this.props.baseUrl }/assets/favicon_32.png`) }}
+					/>
+				</TouchableOpacity>
+			</View>
+		);
+	}
+
+	renderTitle() {
+		if (!this.props.user.username) {
+			return null;
+		}
+		return (
+			<TouchableOpacity style={styles.titleContainer} onPress={() => this.showModal()}>
+				<View style={[styles.status, { backgroundColor: STATUS_COLORS[this.props.user.status || 'offline'] }]} />
+				<Avatar
+					text={this.props.user.username}
+					size={24}
+					style={{ marginRight: 5 }}
+					baseUrl={this.props.baseUrl}
+				/>
+				<Text style={styles.title}>{this.props.user.username}</Text>
+			</TouchableOpacity>
+		);
+	}
+
+	renderRight() {
+		if (Platform.OS !== 'ios') {
+			return;
+		}
+		return (
+			<View style={styles.right}>
+				<Icon.Button
+					name='ios-create-outline'
+					color='blue'
+					size={26}
+					backgroundColor='transparent'
+					onPress={() => this.createChannel()}
+				/>
+			</View>
+		);
+	}
+
+	renderModalButton = (status, text) => {
+		const statusStyle = [styles.status, { backgroundColor: STATUS_COLORS[status] }];
+		const textStyle = { flex: 1, fontWeight: this.props.user.status === status ? 'bold' : 'normal' };
+		return (
+			<TouchableOpacity
+				style={styles.modalButton}
+				onPress={() => this.onPressModalButton(status)}
+			>
+				<View style={statusStyle} />
+				<Text style={textStyle}>
+					{text || status.charAt(0).toUpperCase() + status.slice(1)}
+				</Text>
+			</TouchableOpacity>
+		);
+	};
+
+	render() {
+		return (
+			<View style={styles.header}>
+				{this.renderLeft()}
+				{this.renderTitle()}
+				{this.renderRight()}
+				<Modal
+					isVisible={this.state.isModalVisible}
+					supportedOrientations={['portrait', 'landscape']}
+					style={{ alignItems: 'center' }}
+					onModalHide={() => this.hideModal()}
+					onBackdropPress={() => this.hideModal()}
+				>
+					<View style={styles.modal}>
+						{this.renderModalButton('online')}
+						{this.renderModalButton('busy')}
+						{this.renderModalButton('away')}
+						{this.renderModalButton('offline', 'Invisible')}
+					</View>
+				</Modal>
+			</View>
+		);
+	}
+}

app/views/RoomsListView/index.js

@@ -12,6 +12,8 @@ import RocketChat from '../../lib/rocketchat';
 import RoomItem from '../../presentation/RoomItem';
 import Banner from '../../containers/Banner';
 import { goRoom } from '../../containers/routes/NavigationService';
+import Header from '../../containers/Header';
+import RoomsListHeader from './Header';
 
 const styles = StyleSheet.create({
 	container: {
@@ -79,6 +81,10 @@ export default class RoomsListView extends React.Component {
 		server: PropTypes.string
 	}
 
+	static navigationOptions = ({ navigation }) => ({
+		header: <Header subview={<RoomsListHeader navigation={navigation} />} />
+	});
+
 	constructor(props) {
 		super(props);