[NEW] Direct message from RoomInfo

app/views/RoomInfoView/index.js

@@ -4,7 +4,9 @@ import { View, Text, ScrollView } from 'react-native';
 import { connect } from 'react-redux';
 import moment from 'moment';
 import { SafeAreaView } from 'react-navigation';
-
+import Separator from '../../containers/Separator';
+import ListItem from '../../containers/ListItem';
+import { DisclosureImage } from '../../containers/DisclosureIndicator';
 import Status from '../../containers/Status';
 import Avatar from '../../containers/Avatar';
 import styles from './styles';
@@ -21,7 +23,6 @@ import { withTheme } from '../../theme';
 import { themedHeader } from '../../utils/navigation';
 
 const PERMISSION_EDIT_ROOM = 'edit-room';
-
 const camelize = str => str.replace(/^(.)/, (match, chr) => chr.toUpperCase());
 const getRoomTitle = (room, type, name, theme) => (type === 'd'
 	? <Text testID='room-info-view-name' style={[styles.roomTitle, { color: themes[theme].titleText }]}>{name}</Text>
@@ -142,6 +143,18 @@ class RoomInfoView extends React.Component {
 		}
 	}
 
+	goRoom = async() => {
+		const { roomUser } = this.state;
+		const { username: name } = roomUser;
+		const { navigation } = this.props;
+		const result = await RocketChat.createDirectMessage(name);
+		if (result.success) {
+			await navigation.navigate('RoomsListView');
+			const rid = result.room._id;
+			navigation.navigate('RoomView', { rid, name, t: 'd' });
+		}
+	}
+
 	isDirect = () => this.t === 'd'
 
 	renderItem = (key, room) => {
@@ -260,6 +273,27 @@ class RoomInfoView extends React.Component {
 		return null;
 	}
 
+	renderDisclosure = () => {
+		const { theme } = this.props;
+		return <DisclosureImage theme={theme} />;
+	}
+
+	renderMessageButton = () => {
+		const { theme } = this.props;
+		return (
+			<>
+				<Separator theme={theme} />
+				<ListItem
+					title={I18n.t('Send_message')}
+					onPress={this.goRoom}
+					right={this.renderDisclosure}
+					theme={theme}
+				/>
+				<Separator theme={theme} />
+			</>
+		);
+	}
+
 	renderChannel = () => {
 		const { room } = this.state;
 		return (
@@ -272,16 +306,14 @@ class RoomInfoView extends React.Component {
 		);
 	}
 
-	renderDirect = () => {
-		const { roomUser } = this.state;
-		return (
-			<>
-				{this.renderRoles()}
-				{this.renderTimezone()}
-				{this.renderCustomFields(roomUser._id)}
-			</>
-		);
-	}
+	renderDirect = () => (
+		<>
+			{this.renderMessageButton()}
+			{this.renderRoles()}
+			{this.renderTimezone()}
+			{this.renderCustomFields()}
+		</>
+	)
 
 	render() {
 		const { room, roomUser } = this.state;

app/views/RoomInfoView/styles.js

@@ -8,11 +8,11 @@ export default StyleSheet.create({
 	},
 	scroll: {
 		flex: 1,
-		flexDirection: 'column',
-		padding: 10
+		flexDirection: 'column'
 	},
 	item: {
-		padding: 10,
+		paddingVertical: 10,
+		paddingHorizontal: 20,
 		justifyContent: 'center'
 	},
 	avatarContainer: {