verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

message bug

This commit is contained in:
Diego Mello 2017-11-23 17:26:40 -02:00
parent 872a9430dc
commit 99c09f20f0
8 changed files with 361 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/actions/actionsTypes.js
View File

@ -31,6 +31,8 @@ export const ROOM = createRequestTypes('ROOM', ['ADD_USER_TYPING', 'REMOVE_USER_
export const APP = createRequestTypes('APP', ['READY', 'INIT']);
export const MESSAGES = createRequestTypes('MESSAGES', [
...defaultTypes,
'ACTIONS_SHOW',
'ACTIONS_HIDE',
'DELETE_REQUEST',
'DELETE_SUCCESS',
'DELETE_FAILURE',

13
app/actions/messages.js
View File

@ -20,6 +20,19 @@ export function messagesFailure(err) {
};
}
export function actionsShow(actionMessage) {
return {
type: types.MESSAGES.ACTIONS_SHOW,
actionMessage
};
}
export function actionsHide() {
return {
type: types.MESSAGES.ACTIONS_HIDE
};
}
export function deleteRequest(message) {
return {
type: types.MESSAGES.DELETE_REQUEST,

311
app/containers/MessageActions.js Normal file
View File

@ -0,0 +1,311 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Alert, Clipboard } from 'react-native';
import { connect } from 'react-redux';
import ActionSheet from 'react-native-actionsheet';
import * as moment from 'moment';
import realm from '../lib/realm';
import {
deleteRequest,
editInit,
starRequest,
permalinkRequest,
permalinkClear,
togglePinRequest,
setInput,
actionsHide
} from '../actions/messages';
@connect(
state => ({
showActions: state.messages.showActions,
actionMessage: state.messages.actionMessage,
user: state.login.user,
usersTyping: state.room.usersTyping,
server: state.server.server,
Site_Url: state.settings.Site_Url,
Message_TimeFormat: state.settings.Message_TimeFormat,
loading: state.messages.isFetching,
permissions: state.permissions,
permalink: state.messages.permalink,
Message_AllowDeleting: state.settings.Message_AllowDeleting,
Message_AllowDeleting_BlockDeleteInMinutes: state.settings.Message_AllowDeleting_BlockDeleteInMinutes,
Message_AllowEditing: state.settings.Message_AllowEditing,
Message_AllowEditing_BlockEditInMinutes: state.settings.Message_AllowEditing_BlockEditInMinutes,
Message_AllowPinning: state.settings.Message_AllowPinning,
Message_AllowStarring: state.settings.Message_AllowStarring
}),
dispatch => ({
actionsHide: () => dispatch(actionsHide()),
deleteRequest: message => dispatch(deleteRequest(message)),
editInit: message => dispatch(editInit(message)),
starRequest: message => dispatch(starRequest(message)),
permalinkRequest: message => dispatch(permalinkRequest(message)),
permalinkClear: () => dispatch(permalinkClear()),
togglePinRequest: message => dispatch(togglePinRequest(message)),
setInput: message => dispatch(setInput(message))
})
)
export default class MessageActions extends React.Component {
static propTypes = {
actionsHide: PropTypes.func.isRequired,
showActions: PropTypes.bool.isRequired,
rid: PropTypes.string,
actionMessage: PropTypes.object,
user: PropTypes.object,
permissions: PropTypes.object.isRequired,
deleteRequest: PropTypes.func.isRequired,
editInit: PropTypes.func.isRequired,
starRequest: PropTypes.func.isRequired,
permalinkRequest: PropTypes.func.isRequired,
permalinkClear: PropTypes.func.isRequired,
togglePinRequest: PropTypes.func.isRequired,
setInput: PropTypes.func.isRequired,
permalink: PropTypes.string,
Message_AllowDeleting: PropTypes.bool,
Message_AllowDeleting_BlockDeleteInMinutes: PropTypes.number,
Message_AllowEditing: PropTypes.bool,
Message_AllowEditing_BlockEditInMinutes: PropTypes.number,
Message_AllowPinning: PropTypes.bool,
Message_AllowStarring: PropTypes.bool,
hasEditPermission: PropTypes.bool,
hasDeletePermission: PropTypes.bool,
hasForceDeletePermission: PropTypes.bool
};
constructor(props) {
super(props);
this.state = {
copyPermalink: false,
reply: false,
quote: false
};
this.handleActionPress = this.handleActionPress.bind(this);
this.options = ['Cancel', 'Delete'];
// permissions
this.room = realm.objects('subscriptions').filtered('rid = $0', this.props.rid);
const { roles } = this.room[0];
const roomRoles = Array.from(Object.keys(roles), i => roles[i].value);
const userRoles = this.props.user.roles || [];
const mergedRoles = [...new Set([...roomRoles, ...userRoles])];
this.hasEditPermission = this.props.permissions['edit-message']
.some(item => mergedRoles.indexOf(item) !== -1);
this.hasDeletePermission = this.props.permissions['delete-message']
.some(item => mergedRoles.indexOf(item) !== -1);
this.hasForceDeletePermission = this.props.permissions['force-delete-message']
.some(item => mergedRoles.indexOf(item) !== -1);
}
async componentWillReceiveProps(nextProps) {
if (nextProps.showActions !== this.props.showActions && nextProps.showActions) {
// Cancel
this.options = ['Cancel'];
this.CANCEL_INDEX = 0;
// Reply
this.options.push('Reply');
this.REPLY_INDEX = this.options.length - 1;
// Edit
// if (this.allowEdit()) {
// this.options.push('Edit');
// this.EDIT_INDEX = this.options.length - 1;
// }
// // Permalink
// this.options.push('Copy Permalink');
// this.PERMALINK_INDEX = this.options.length - 1;
// // Copy
// this.options.push('Copy Message');
// this.COPY_INDEX = this.options.length - 1;
// // Quote
// this.options.push('Quote');
// this.QUOTE_INDEX = this.options.length - 1;
// // Star
// if (this.props.Message_AllowStarring) {
// this.options.push('Star');
// this.STAR_INDEX = this.options.length - 1;
// }
// // Pin
// if (this.props.Message_AllowPinning) {
// this.options.push('Pin');
// this.PIN_INDEX = this.options.length - 1;
// }
// // Delete
// if (this.allowDelete()) {
// this.options.push('Delete');
// this.DELETE_INDEX = this.options.length - 1;
// }
setTimeout(() => {
this.ActionSheet.show();
});
} else if (this.props.permalink !== nextProps.permalink && nextProps.permalink) {
// copy permalink
if (this.state.copyPermalink) {
this.setState({ copyPermalink: false });
await Clipboard.setString(nextProps.permalink);
Alert.alert('Permalink copied to clipboard!');
this.props.permalinkClear();
// quote
} else if (this.state.quote) {
this.setState({ quote: false });
const msg = `[ ](${ nextProps.permalink }) `;
this.props.setInput({ msg });
// reply
} else if (this.state.reply) {
this.setState({ reply: false });
let msg = `[ ](${ nextProps.permalink }) `;
// if original message wasn't sent by current user and neither from a direct room
if (this.props.user.username !== this.props.actionMessage.u.username && this.room[0].t !== 'd') {
msg += `@${ this.props.actionMessage.u.username } `;
}
this.props.setInput({ msg });
}
}
}
isOwn = () => this.props.actionMessage.u && this.props.actionMessage.u._id === this.props.user.id;
allowEdit = () => {
const editOwn = this.isOwn();
const { Message_AllowEditing: isEditAllowed, hasEditPermission } = this.props;
if (!(hasEditPermission || (isEditAllowed && editOwn))) {
return false;
}
const blockEditInMinutes = this.props.Message_AllowEditing_BlockEditInMinutes;
if (blockEditInMinutes) {
let msgTs;
if (this.props.actionMessage.ts != null) {
msgTs = moment(this.props.actionMessage.ts);
}
let currentTsDiff;
if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes');
}
return currentTsDiff < blockEditInMinutes;
}
return true;
}
allowDelete = () => {
const deleteOwn = this.isOwn();
const { hasDeletePermission, hasForceDeletePermission, Message_AllowDeleting: isDeleteAllowed } = this.props;
if (!(hasDeletePermission || (isDeleteAllowed && deleteOwn) || this.props.hasForceDeletePermission)) {
return false;
}
if (hasForceDeletePermission) {
return true;
}
const blockDeleteInMinutes = this.props.Message_AllowDeleting_BlockDeleteInMinutes;
if (blockDeleteInMinutes != null && blockDeleteInMinutes !== 0) {
let msgTs;
if (this.props.actionMessage.ts != null) {
msgTs = moment(this.props.actionMessage.ts);
}
let currentTsDiff;
if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes');
}
return currentTsDiff < blockDeleteInMinutes;
}
return true;
}
handleDelete() {
Alert.alert(
'Are you sure?',
'You will not be able to recover this message!',
[
{
text: 'Cancel',
style: 'cancel'
},
{
text: 'Yes, delete it!',
style: 'destructive',
onPress: () => this.props.deleteRequest(this.props.actionMessage)
}
],
{ cancelable: false }
);
}
handleEdit() {
const { _id, msg, rid } = this.props.actionMessage;
this.props.editInit({ _id, msg, rid });
}
handleCopy = async() => {
await Clipboard.setString(this.props.actionMessage.msg);
Alert.alert('Copied to clipboard!');
}
handleStar() {
this.props.starRequest(this.props.actionMessage);
}
handlePermalink() {
this.setState({ copyPermalink: true });
console.warn(this.props.actionMessage)
this.props.permalinkRequest(this.props.actionMessage);
}
handlePin() {
this.props.togglePinRequest(this.props.actionMessage);
}
handleReply() {
this.setState({ reply: true });
this.props.permalinkRequest(this.props.actionMessage);
}
handleQuote() {
this.setState({ quote: true });
this.props.permalinkRequest(this.props.actionMessage);
}
handleActionPress = (actionIndex) => {
switch (actionIndex) {
case this.REPLY_INDEX:
this.handleReply();
break;
case this.EDIT_INDEX:
this.handleEdit();
break;
case this.PERMALINK_INDEX:
this.handlePermalink();
break;
case this.COPY_INDEX:
this.handleCopy();
break;
case this.QUOTE_INDEX:
this.handleQuote();
break;
case this.STAR_INDEX:
this.handleStar();
break;
case this.PIN_INDEX:
this.handlePin();
break;
case this.DELETE_INDEX:
this.handleDelete();
break;
default:
break;
}
// this.props.actionsHide();
}
render() {
return (
<ActionSheet
ref={o => this.ActionSheet = o}
title='Messages actions'
options={this.options}
cancelButtonIndex={this.CANCEL_INDEX}
destructiveButtonIndex={this.DELETE_INDEX}
onPress={this.handleActionPress}
/>
);
}
}

2
app/containers/MessageBox.js
View File

@ -56,7 +56,7 @@ export default class MessageBox extends React.Component {
}
componentWillReceiveProps(nextProps) {
if (this.props.message !== nextProps.message && nextProps.message) {
if (this.props.message !== nextProps.message && nextProps.message && nextProps.editing) {
this.component.setNativeProps({ text: nextProps.message.msg });
this.component.focus();
} else if (!nextProps.message) {

2
app/containers/message/User.js
View File

@ -31,7 +31,7 @@ const styles = StyleSheet.create({
}
});
export default class Message extends React.PureComponent {
export default class User extends React.PureComponent {
static propTypes = {
item: PropTypes.object.isRequired,
Message_TimeFormat: PropTypes.string.isRequired,

279
app/containers/message/index.js
View File

@ -1,24 +1,14 @@
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, TouchableOpacity, Text, Alert, Clipboard } from 'react-native';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { emojify } from 'react-emojione';
import Markdown from 'react-native-easy-markdown'; // eslint-disable-line
import ActionSheet from 'react-native-actionsheet';
import { connect } from 'react-redux';
import * as moment from 'moment';
import { actionsShow } from '../../actions/messages';
import Card from './Card';
import User from './User';
import Avatar from '../Avatar';
import {
deleteRequest,
editInit,
starRequest,
permalinkRequest,
permalinkClear,
togglePinRequest,
setInput
} from '../../actions/messages';
const styles = StyleSheet.create({
content: {
@ -43,169 +33,23 @@ const styles = StyleSheet.create({
@connect(state => ({
message: state.messages.message,
permalink: state.messages.permalink,
user: state.login.user,
Message_AllowDeleting: state.settings.Message_AllowDeleting,
Message_AllowDeleting_BlockDeleteInMinutes: state.settings.Message_AllowDeleting_BlockDeleteInMinutes,
Message_AllowEditing: state.settings.Message_AllowEditing,
Message_AllowEditing_BlockEditInMinutes: state.settings.Message_AllowEditing_BlockEditInMinutes,
Message_AllowPinning: state.settings.Message_AllowPinning,
Message_AllowStarring: state.settings.Message_AllowStarring
editing: state.messages.editing
}), dispatch => ({
deleteRequest: message => dispatch(deleteRequest(message)),
editInit: message => dispatch(editInit(message)),
starRequest: message => dispatch(starRequest(message)),
permalinkRequest: message => dispatch(permalinkRequest(message)),
togglePinRequest: message => dispatch(togglePinRequest(message)),
setInput: message => dispatch(setInput(message)),
permalinkClear: () => dispatch(permalinkClear())
actionsShow: actionMessage => dispatch(actionsShow(actionMessage))
}))
export default class Message extends React.Component {
static propTypes = {
item: PropTypes.object.isRequired,
room: PropTypes.object.isRequired,
baseUrl: PropTypes.string.isRequired,
Message_TimeFormat: PropTypes.string.isRequired,
deleteRequest: PropTypes.func.isRequired,
editInit: PropTypes.func.isRequired,
starRequest: PropTypes.func.isRequired,
permalinkRequest: PropTypes.func.isRequired,
permalinkClear: PropTypes.func.isRequired,
togglePinRequest: PropTypes.func.isRequired,
setInput: PropTypes.func.isRequired,
user: PropTypes.object.isRequired,
message: PropTypes.object,
permalink: PropTypes.string,
Message_AllowDeleting: PropTypes.bool,
Message_AllowDeleting_BlockDeleteInMinutes: PropTypes.number,
Message_AllowEditing: PropTypes.bool,
Message_AllowEditing_BlockEditInMinutes: PropTypes.number,
Message_AllowPinning: PropTypes.bool,
Message_AllowStarring: PropTypes.bool,
hasEditPermission: PropTypes.bool,
hasDeletePermission: PropTypes.bool,
hasForceDeletePermission: PropTypes.bool
message: PropTypes.object.isRequired,
editing: PropTypes.bool,
actionsShow: PropTypes.func
}
constructor(props) {
super(props);
this.state = {
copyPermalink: false,
reply: false,
quote: false
};
this.handleActionPress = this.handleActionPress.bind(this);
this.showActions = this.showActions.bind(this);
// Cancel
this.options = ['Cancel'];
this.CANCEL_INDEX = 0;
// Reply
this.options.push('Reply');
this.REPLY_INDEX = this.options.length - 1;
// Edit
if (this.allowEdit()) {
this.options.push('Edit');
this.EDIT_INDEX = this.options.length - 1;
}
// Permalink
this.options.push('Copy Permalink');
this.PERMALINK_INDEX = this.options.length - 1;
// Copy
this.options.push('Copy Message');
this.COPY_INDEX = this.options.length - 1;
// Quote
this.options.push('Quote');
this.QUOTE_INDEX = this.options.length - 1;
// Star
if (this.props.Message_AllowStarring) {
this.options.push('Star');
this.STAR_INDEX = this.options.length - 1;
}
// Pin
if (this.props.Message_AllowPinning) {
this.options.push('Pin');
this.PIN_INDEX = this.options.length - 1;
}
// Delete
if (this.allowDelete()) {
this.options.push('Delete');
this.DELETE_INDEX = this.options.length - 1;
}
}
async componentWillReceiveProps(nextProps) {
if (this.props.permalink !== nextProps.permalink && nextProps.permalink) {
// copy permalink
if (this.state.copyPermalink) {
this.setState({ copyPermalink: false });
await Clipboard.setString(nextProps.permalink);
Alert.alert('Permalink copied to clipboard!');
this.props.permalinkClear();
// quote
} else if (this.state.quote) {
this.setState({ quote: false });
const msg = `[ ](${ nextProps.permalink }) `;
this.props.setInput({ msg });
// reply
} else if (this.state.reply) {
this.setState({ reply: false });
let msg = `[ ](${ nextProps.permalink }) `;
// if original message wasn't sent by current user and neither from a direct room
if (this.props.user.username !== this.props.item.u.username && this.props.room.t !== 'd') {
msg += `@${ this.props.item.u.username } `;
}
this.props.setInput({ msg });
}
}
}
isOwn = () => this.props.item.u && this.props.item.u._id === this.props.user.id;
allowEdit = () => {
const editOwn = this.isOwn();
const { Message_AllowEditing: isEditAllowed, hasEditPermission } = this.props;
if (!(hasEditPermission || (isEditAllowed && editOwn))) {
return false;
}
const blockEditInMinutes = this.props.Message_AllowEditing_BlockEditInMinutes;
if (blockEditInMinutes) {
let msgTs;
if (this.props.item.ts != null) {
msgTs = moment(this.props.item.ts);
}
let currentTsDiff;
if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes');
}
return currentTsDiff < blockEditInMinutes;
}
return true;
}
allowDelete = () => {
const deleteOwn = this.isOwn();
const { hasDeletePermission, hasForceDeletePermission, Message_AllowDeleting: isDeleteAllowed } = this.props;
if (!(hasDeletePermission || (isDeleteAllowed && deleteOwn) || this.props.hasForceDeletePermission)) {
return false;
}
if (hasForceDeletePermission) {
return true;
}
const blockDeleteInMinutes = this.props.Message_AllowDeleting_BlockDeleteInMinutes;
if (blockDeleteInMinutes != null && blockDeleteInMinutes !== 0) {
let msgTs;
if (this.props.item.ts != null) {
msgTs = moment(this.props.item.ts);
}
let currentTsDiff;
if (msgTs != null) {
currentTsDiff = moment().diff(msgTs, 'minutes');
}
return currentTsDiff < blockDeleteInMinutes;
}
return true;
onLongPress() {
const { item } = this.props;
this.props.actionsShow(item);
}
isDeleted() {
@ -220,93 +64,6 @@ export default class Message extends React.Component {
) : null;
}
showActions = () => {
this.ActionSheet.show();
}
handleDelete() {
Alert.alert(
'Are you sure?',
'You will not be able to recover this message!',
[
{
text: 'Cancel',
style: 'cancel'
},
{
text: 'Yes, delete it!',
style: 'destructive',
onPress: () => this.props.deleteRequest(this.props.item)
}
],
{ cancelable: false }
);
}
handleEdit() {
const { _id, msg, rid } = this.props.item;
this.props.editInit({ _id, msg, rid });
}
handleCopy = async() => {
await Clipboard.setString(this.props.item.msg);
Alert.alert('Copied to clipboard!');
}
handleStar() {
this.props.starRequest(this.props.item);
}
handlePermalink() {
this.setState({ copyPermalink: true });
this.props.permalinkRequest(this.props.item);
}
handlePin() {
this.props.togglePinRequest(this.props.item);
}
handleReply() {
this.setState({ reply: true });
this.props.permalinkRequest(this.props.item);
}
handleQuote() {
this.setState({ quote: true });
this.props.permalinkRequest(this.props.item);
}
handleActionPress = (actionIndex) => {
switch (actionIndex) {
case this.REPLY_INDEX:
this.handleReply();
break;
case this.EDIT_INDEX:
this.handleEdit();
break;
case this.PERMALINK_INDEX:
this.handlePermalink();
break;
case this.COPY_INDEX:
this.handleCopy();
break;
case this.QUOTE_INDEX:
this.handleQuote();
break;
case this.STAR_INDEX:
this.handleStar();
break;
case this.PIN_INDEX:
this.handlePin();
break;
case this.DELETE_INDEX:
this.handleDelete();
break;
default:
break;
}
}
renderMessageContent() {
if (this.isDeleted()) {
return <Text style={styles.textInfo}>Message removed</Text>;
@ -321,7 +78,9 @@ export default class Message extends React.Component {
}
render() {
const { item } = this.props;
const {
item, message, editing
} = this.props;
const extraStyle = {};
if (item.temp) {
@ -329,11 +88,11 @@ export default class Message extends React.Component {
}
const username = item.alias || item.u.username;
const isEditing = this.props.message._id === item._id;
const isEditing = message._id === item._id && editing;
return (
<TouchableOpacity
onLongPress={() => this.showActions()}
onLongPress={() => this.onLongPress()}
disabled={this.isDeleted()}
style={[styles.message, extraStyle, isEditing ? styles.editing : null]}
>
@ -354,14 +113,6 @@ export default class Message extends React.Component {
{this.attachments()}
{this.renderMessageContent(item)}
</View>
<ActionSheet
ref={o => this.ActionSheet = o}
title='Messages actions'
options={this.options}
cancelButtonIndex={this.CANCEL_INDEX}
destructiveButtonIndex={this.DELETE_INDEX}
onPress={this.handleActionPress}
/>
</TouchableOpacity>
);
}

15
app/reducers/messages.js
View File

@ -4,8 +4,10 @@ const initialState = {
isFetching: false,
failure: false,
message: {},
actionMessage: {},
editing: false,
permalink: ''
permalink: '',
showActions: false
};
export default function messages(state = initialState, action) {
@ -27,6 +29,17 @@ export default function messages(state = initialState, action) {
failure: true,
errorMessage: action.err
};
case types.MESSAGES.ACTIONS_SHOW:
return {
...state,
showActions: true,
actionMessage: action.actionMessage
};
case types.MESSAGES.ACTIONS_HIDE:
return {
...state,
showActions: false
};
case types.MESSAGES.EDIT_INIT:
return {
...state,

24
app/views/RoomView.js
View File

@ -11,6 +11,7 @@ import { editCancel } from '../actions/messages';
import realm from '../lib/realm';
import RocketChat from '../lib/rocketchat';
import Message from '../containers/message';
import MessageActions from '../containers/MessageActions';
import MessageBox from '../containers/MessageBox';
import KeyboardView from '../presentation/KeyboardView';
@ -55,8 +56,7 @@ const styles = StyleSheet.create({
server: state.server.server,
Site_Url: state.settings.Site_Url,
Message_TimeFormat: state.settings.Message_TimeFormat,
loading: state.messages.isFetching,
permissions: state.permissions
loading: state.messages.isFetching
}),
dispatch => ({
actions: bindActionCreators(actions, dispatch),
@ -77,8 +77,7 @@ export default class RoomView extends React.Component {
Message_TimeFormat: PropTypes.string,
loading: PropTypes.bool,
usersTyping: PropTypes.array,
user: PropTypes.object,
permissions: PropTypes.object.isRequired
user: PropTypes.object
};
constructor(props) {
@ -101,18 +100,6 @@ export default class RoomView extends React.Component {
loaded: true,
joined: typeof props.rid === 'undefined'
};
// permissions
const { roles } = this.room[0];
const roomRoles = Array.from(Object.keys(roles), i => roles[i].value);
const userRoles = this.props.user.roles || [];
const mergedRoles = [...new Set([...roomRoles, ...userRoles])];
this.hasEditPermission = this.props.permissions['edit-message']
.some(item => mergedRoles.indexOf(item) !== -1);
this.hasDeletePermission = this.props.permissions['delete-message']
.some(item => mergedRoles.indexOf(item) !== -1);
this.hasForceDeletePermission = this.props.permissions['force-delete-message']
.some(item => mergedRoles.indexOf(item) !== -1);
}
componentWillMount() {
@ -193,10 +180,6 @@ export default class RoomView extends React.Component {
item={item}
baseUrl={this.props.Site_Url}
Message_TimeFormat={this.props.Message_TimeFormat}
room={this.room}
hasEditPermission={this.hasEditPermission}
hasDeletePermission={this.hasDeletePermission}
hasForceDeletePermission={this.hasForceDeletePermission}
/>
);
@ -242,6 +225,7 @@ export default class RoomView extends React.Component {
</SafeAreaView>
{this.renderFooter()}
<Text style={styles.typing}>{this.usersTyping}</Text>
<MessageActions rid={this.rid} />
</KeyboardView>
);
}