react-native-actionsheet installed

app/containers/Message.js

@@ -1,13 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { emojify } from 'react-emojione';
 import Markdown from 'react-native-easy-markdown';
+import ActionSheet from 'react-native-actionsheet';
 
 import Card from './message/Card';
 import Avatar from './Avatar';
 import User from './message/User';
 
+const title = 'Message actions';
+const options = ['Cancel', 'Reply', 'Edit', 'Permalink', 'Copy', 'Quote', 'Star Message', 'Delete'];
+const CANCEL_INDEX = 0;
+const DESTRUCTIVE_INDEX = 7;
+
 const styles = StyleSheet.create({
 	content: {
 		flexGrow: 1,
@@ -29,6 +35,12 @@ export default class Message extends React.PureComponent {
 		Message_TimeFormat: PropTypes.string.isRequired
 	}
 
+	constructor(props) {
+		super(props);
+		this.handleActionPress = this.handleActionPress.bind(this);
+		this.showActions = this.showActions.bind(this);
+	}
+
 	attachments() {
 		return this.props.item.attachments.length ? (
 			<Card
@@ -37,6 +49,14 @@ export default class Message extends React.PureComponent {
 		) : null;
 	}
 
+	showActions() {
+		this.ActionSheet.show();
+	}
+
+	handleActionPress = (i) => {
+		console.log(i);
+	}
+
 	render() {
 		const { item } = this.props;
 
@@ -49,26 +69,36 @@ export default class Message extends React.PureComponent {
 		const username = item.alias || item.u.username;
 
 		return (
-			<View style={[styles.message, extraStyle]}>
-				<Avatar
-					style={{ marginRight: 10 }}
-					text={item.avatar ? '' : username}
-					size={40}
-					baseUrl={this.props.baseUrl}
-					avatar={item.avatar}
-				/>
-				<View style={[styles.content]}>
-					<User
-						onPress={this._onPress}
-						item={item}
-						Message_TimeFormat={this.props.Message_TimeFormat}
+			<TouchableOpacity onLongPress={() => this.showActions()}>
+				<View style={[styles.message, extraStyle]}>
+					<Avatar
+						style={{ marginRight: 10 }}
+						text={item.avatar ? '' : username}
+						size={40}
+						baseUrl={this.props.baseUrl}
+						avatar={item.avatar}
+					/>
+					<View style={[styles.content]}>
+						<User
+							onPress={this._onPress}
+							item={item}
+							Message_TimeFormat={this.props.Message_TimeFormat}
+						/>
+						{this.attachments()}
+						<Markdown>
+							{msg}
+						</Markdown>
+					</View>
+					<ActionSheet
+						ref={o => this.ActionSheet = o}
+						title={title}
+						options={options}
+						cancelButtonIndex={CANCEL_INDEX}
+						destructiveButtonIndex={DESTRUCTIVE_INDEX}
+						onPress={this.handleActionPress}
 					/>
-					{this.attachments()}
-					<Markdown>
-						{msg}
-					</Markdown>
 				</View>
-			</View>
+			</TouchableOpacity>
 		);
 	}
 }

package.json

@@ -22,6 +22,7 @@
     "react-emojione": "^5.0.0",
     "react-native": "0.50.3",
     "react-native-action-button": "^2.8.1",
+    "react-native-actionsheet": "^2.3.0",
     "react-native-animatable": "^1.2.4",
     "react-native-card-view": "0.0.3",
     "react-native-easy-markdown": "git+https://github.com/lappalj4/react-native-easy-markdown.git",