[FIX] messagebox growing width and icons (#130)

* multiline messagebox

* Action buttons alignment

* rocket chat icons

__tests__/RoomItem.js

@@ -1,4 +1,11 @@
-import 'react-native';
+import {View} from 'react-native';
+import { Provider } from 'react-redux';
+
+import { createStore, combineReducers } from 'redux';
+
+const reducers = combineReducers({settings:() => ({})});
+const store = createStore(reducers);
+
 import React from 'react';
 import RoomItem from '../app/presentation/RoomItem';
 
@@ -10,25 +17,25 @@ const date = new Date(2017, 10, 10, 10);
 jest.mock('react-native-img-cache', () => { return { CachedImage: 'View' } });
 
 it('renders correctly', () => {
-	expect(renderer.create(<RoomItem type="d" _updatedAt={date} name="name" />).toJSON()).toMatchSnapshot();
+	expect(renderer.create(<Provider store={store}><View><RoomItem type="d" _updatedAt={date} name="name" /></View></Provider>).toJSON()).toMatchSnapshot();
 });
 
 it('render unread', () => {
-	expect(renderer.create(<RoomItem type="d" _updatedAt={date} name="name" unread={1} />).toJSON()).toMatchSnapshot();
+	expect(renderer.create(<Provider store={store}><View><RoomItem type="d" _updatedAt={date} name="name" unread={1} /></View></Provider>).toJSON()).toMatchSnapshot();
 });
 
 it('render unread +999', () => {
-	expect(renderer.create(<RoomItem type="d" _updatedAt={date} name="name" unread={1000} />).toJSON()).toMatchSnapshot();
+	expect(renderer.create(<Provider store={store}><View><RoomItem type="d" _updatedAt={date} name="name" unread={1000} /></View></Provider>).toJSON()).toMatchSnapshot();
 });
 
 it('render no icon', () => {
-	expect(renderer.create(<RoomItem type="X" _updatedAt={date} name="name" />).toJSON()).toMatchSnapshot();
+	expect(renderer.create(<Provider store={store}><View><RoomItem type="X" _updatedAt={date} name="name" /></View></Provider>).toJSON()).toMatchSnapshot();
 });
 
 it('render private group', () => {
-	expect(renderer.create(<RoomItem type="g" _updatedAt={date} name="private-group" /> ).toJSON()).toMatchSnapshot();
+	expect(renderer.create(<Provider store={store}><View><RoomItem type="g" _updatedAt={date} name="private-group" /> </View></Provider>).toJSON()).toMatchSnapshot();
 });
 
 it('render channel', () => {
-	expect(renderer.create(<RoomItem type="c" _updatedAt={date} name="general" />).toJSON()).toMatchSnapshot();
+	expect(renderer.create(<Provider store={store}><View><RoomItem type="c" _updatedAt={date} name="general" /></View></Provider>).toJSON()).toMatchSnapshot();
 });

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -218,25 +218,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         >
           RC
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "https://demo.rocket.chat/avatar/rocket.cat",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "position": "absolute",
-              },
-              Object {
-                "borderRadius": 4,
-                "height": 40,
-                "width": 40,
-              },
-            ]
-          }
-        />
       </View>
       <View
         style={
@@ -349,25 +330,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         >
           RC
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "https://demo.rocket.chat/avatar/rocket.cat",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "position": "absolute",
-              },
-              Object {
-                "borderRadius": 4,
-                "height": 40,
-                "width": 40,
-              },
-            ]
-          }
-        />
       </View>
       <View
         style={
@@ -482,25 +444,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         >
           RC
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "https://demo.rocket.chat/avatar/rocket.cat",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "position": "absolute",
-              },
-              Object {
-                "borderRadius": 4,
-                "height": 40,
-                "width": 40,
-              },
-            ]
-          }
-        />
       </View>
       <View
         style={
@@ -633,25 +576,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         >
           LC
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "https://demo.rocket.chat/avatar/Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "position": "absolute",
-              },
-              Object {
-                "borderRadius": 4,
-                "height": 40,
-                "width": 40,
-              },
-            ]
-          }
-        />
       </View>
       <View
         style={
@@ -786,25 +710,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         >
           LC
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "https://demo.rocket.chat/avatar/Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "position": "absolute",
-              },
-              Object {
-                "borderRadius": 4,
-                "height": 40,
-                "width": 40,
-              },
-            ]
-          }
-        />
       </View>
       <View
         style={
@@ -937,25 +842,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         >
           LC
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "https://demo.rocket.chat/avatar/Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "position": "absolute",
-              },
-              Object {
-                "borderRadius": 4,
-                "height": 40,
-                "width": 40,
-              },
-            ]
-          }
-        />
       </View>
       <View
         style={
@@ -1088,25 +974,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         >
           LC
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "https://demo.rocket.chat/avatar/Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "position": "absolute",
-              },
-              Object {
-                "borderRadius": 4,
-                "height": 40,
-                "width": 40,
-              },
-            ]
-          }
-        />
       </View>
       <View
         style={
@@ -1239,25 +1106,6 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
         >
           LC
         </Text>
-        <CachedImage
-          source={
-            Object {
-              "uri": "https://demo.rocket.chat/avatar/Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
-            }
-          }
-          style={
-            Array [
-              Object {
-                "position": "absolute",
-              },
-              Object {
-                "borderRadius": 4,
-                "height": 40,
-                "width": 40,
-              },
-            ]
-          }
-        />
       </View>
       <View
         style={

android/app/build.gradle

@@ -145,13 +145,13 @@ android {
 
 dependencies {
     compile project(':react-native-video')
+    compile project(':react-native-push-notification')
     compile project(':react-native-svg')
     compile project(':react-native-image-picker')
     compile project(':react-native-vector-icons')
     compile project(':react-native-fetch-blob')
     compile project(':react-native-zeroconf')
     compile project(':realm')
-    compile project(':react-native-push-notification')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules

android/app/src/main/AndroidManifest.xml

@@ -7,8 +7,9 @@
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
 		<uses-permission android:name="android.permission.CAMERA" />
 		<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-
+		<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 		<uses-permission android:name="android.permission.WAKE_LOCK" />
+
 		<permission
    	android:name="${applicationId}.permission.C2D_MESSAGE"
    	android:protectionLevel="signature" />

app/animations/collapse.js

@@ -0,0 +1,63 @@
+import { View, Animated } from 'react-native';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default class Panel extends React.Component {
+	static propTypes = {
+		open: PropTypes.bool.isRequired,
+		children: PropTypes.node.isRequired,
+		style: PropTypes.object
+	}
+	constructor(props) {
+		super(props);
+		this.state = {
+			animation: new Animated.Value()
+		};
+		this.first = true;
+		this.open = false;
+		this.opacity = 0;
+	}
+	componentDidMount() {
+		const initialValue = !this.props.open ? this.height : 0;
+		this.state.animation.setValue(initialValue);
+	}
+	componentWillReceiveProps(nextProps) {
+		if (this.first) {
+			this.first = false;
+			if (!this.props.open) {
+				this.state.animation.setValue(0);
+				return;
+			}
+		}
+		if (this.open === nextProps.open) {
+			return;
+		}
+		this.open = nextProps.open;
+		const initialValue = !nextProps.open ? this.height : 0;
+		const finalValue = !nextProps.open ? 0 : this.height;
+
+		this.state.animation.setValue(initialValue);
+		Animated.timing(
+			this.state.animation,
+			{
+				toValue: finalValue,
+				duration: 150
+			}
+		).start();
+	}
+	set _height(h) {
+		this.height = h || this.height;
+	}
+	render() {
+		return (
+			<Animated.View
+				style={[{ height: this.state.animation }, this.props.style]}
+			>
+				<View onLayout={({ nativeEvent }) => this._height = nativeEvent.layout.height} style={{ position: !this.first ? 'relative' : 'absolute' }}>
+					{this.props.children}
+				</View>
+			</Animated.View>
+		);
+	}
+}

app/containers/Avatar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { StyleSheet, Text, View } from 'react-native';
 import { CachedImage } from 'react-native-img-cache';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -19,6 +20,10 @@ const styles = StyleSheet.create({
 	}
 });
 
+@connect(state => ({
+	baseUrl: state.settings.Site_Url
+}))
+
 class Avatar extends React.PureComponent {
 	render() {
 		const {

app/containers/MessageBox/index.js

@@ -1,47 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, TextInput, StyleSheet, SafeAreaView, Platform } from 'react-native';
+import { View, TextInput, SafeAreaView, Platform } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
+import Icon from 'react-native-vector-icons/Ionicons';
 import ImagePicker from 'react-native-image-picker';
 import { connect } from 'react-redux';
-import { userTyping } from '../actions/room';
+import { userTyping } from '../../actions/room';
-import RocketChat from '../lib/rocketchat';
+import RocketChat from '../../lib/rocketchat';
-import { editRequest, editCancel, clearInput } from '../actions/messages';
+import { editRequest, editCancel, clearInput } from '../../actions/messages';
-
+import styles from './style';
-const styles = StyleSheet.create({
+import MyIcon from '../icons';
-	textBox: {
-		paddingTop: 1,
-		paddingHorizontal: 15,
-		borderTopWidth: 1,
-		borderTopColor: '#ccc',
-		backgroundColor: '#fff'
-	},
-	safeAreaView: {
-		flexDirection: 'row',
-		alignItems: 'center'
-	},
-	textBoxInput: {
-		height: 40,
-		minHeight: 40,
-		maxHeight: 120,
-		flexGrow: 1,
-		paddingHorizontal: 10,
-		paddingTop: 12
-	},
-	actionButtons: {
-		color: '#aaa',
-		paddingTop: 10,
-		paddingBottom: 10,
-		paddingHorizontal: 8,
-		fontSize: 20,
-		alignSelf: 'flex-end'
-	},
-	editing: {
-		backgroundColor: '#fff5df'
-	}
-});
-
 @connect(state => ({
+	room: state.room,
 	message: state.messages.message,
 	editing: state.messages.editing
 }), dispatch => ({
@@ -65,7 +34,8 @@ export default class MessageBox extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			height: 40
+			height: 20,
+			text: ''
 		};
 	}
 
@@ -77,32 +47,49 @@ export default class MessageBox extends React.Component {
 			this.component.setNativeProps({ text: '' });
 		}
 	}
-
+	onChangeText(text) {
-	submit(message) {
+		this.setState({ text });
-		this.component.setNativeProps({ text: '' });
+		this.props.typing(text.length > 0);
-		this.props.typing(false);
+	}
-		if (message.trim() === '') {
+	get leftButtons() {
-			return;
-		}
-		// if is editing a message
 		const { editing } = this.props;
 		if (editing) {
-			const { _id, rid } = this.props.message;
+			return <Icon style={styles.actionButtons} name='ios-close' onPress={() => this.editCancel()} />;
-			this.props.editRequest({ _id, msg: message, rid });
-		} else {
-			// if is submiting a new message
-			this.props.onSubmit(message);
 		}
-		this.props.clearInput();
+		return !this.state.emoji ? <Icon style={styles.actionButtons} onPress={() => this.openEmoji()} name='md-happy' /> : <Icon onPress={() => this.openEmoji()} style={styles.actionButtons} name='md-sad' />;
+	}
+	get rightButtons() {
+		const icons = [];
+
+		if (this.state.text.length) {
+			icons.push(<MyIcon
+				style={[styles.actionButtons, { color: '#1D74F5' }]}
+				name='send'
+				key='sendIcon'
+				onPress={() => this.submit(this.component._lastNativeText)}
+			/>);
+		}
+		icons.push(<MyIcon
+			style={[styles.actionButtons, { color: '#2F343D', fontSize: 16 }]}
+			name='plus'
+			key='fileIcon'
+			onPress={() => this.addFile()}
+		/>);
+		return icons;
 	}
 
+	// get placeholder() {
+	// 	return `New Message`.substring(0, 35);
+	// }
+	updateSize = (height) => {
+		this.setState({ height: height + (Platform.OS === 'ios' ? 0 : 0) });
+	}
 	addFile = () => {
 		const options = {
 			customButtons: [{
 				name: 'import', title: 'Import File From'
 			}]
 		};
-
 		ImagePicker.showImagePicker(options, (response) => {
 			if (response.didCancel) {
 				console.log('User cancelled image picker');
@@ -122,49 +109,56 @@ export default class MessageBox extends React.Component {
 			}
 		});
 	}
-
-	updateSize = (height) => {
-		this.setState({ height: height + (Platform.OS === 'ios' ? 20 : 0) });
-	}
-
 	editCancel() {
 		this.props.editCancel();
 		this.component.setNativeProps({ text: '' });
 	}
-
+	openEmoji() {
-	renderLeftButton() {
+		this.setState({ emoji: !this.state.emoji });
-		const { editing } = this.props;
+	}
-		if (editing) {
+	submit(message) {
-			return <Icon style={styles.actionButtons} name='close' onPress={() => this.editCancel()} />;
+		this.component.setNativeProps({ text: '' });
-		}
+		this.props.clearInput();
-		return <Icon style={styles.actionButtons} name='add-circle-outline' onPress={this.addFile} />;
+		this.setState({ text: '' });
+		requestAnimationFrame(() => {
+			this.props.typing(false);
+			if (message.trim() === '') {
+				return;
+			}
+			// if is editing a message
+			const { editing } = this.props;
+			if (editing) {
+				const { _id, rid } = this.props.message;
+				this.props.editRequest({ _id, msg: message, rid });
+			} else {
+				// if is submiting a new message
+				this.props.onSubmit(message);
+			}
+		});
 	}
 
 	render() {
 		const { height } = this.state;
 		return (
-			<View style={[styles.textBox, (this.props.editing ? styles.editing : null)]}>
+			<SafeAreaView style={[styles.textBox, (this.props.editing ? styles.editing : null)]}>
-				<SafeAreaView style={styles.safeAreaView}>
+				<View style={styles.textArea}>
-					{this.renderLeftButton()}
+					{this.leftButtons}
 					<TextInput
 						ref={component => this.component = component}
 						style={[styles.textBoxInput, { height }]}
 						returnKeyType='default'
 						blurOnSubmit={false}
-						placeholder='New message'
+						placeholder='New Message'
-						onChangeText={text => this.props.typing(text.length > 0)}
+						onChangeText={text => this.onChangeText(text)}
 						underlineColorAndroid='transparent'
 						defaultValue=''
 						multiline
+						placeholderTextColor='#9EA2A8'
 						onContentSizeChange={e => this.updateSize(e.nativeEvent.contentSize.height)}
 					/>
-					<Icon
+					{this.rightButtons}
-						style={styles.actionButtons}
+				</View>
-						name='send'
+			</SafeAreaView>
-						onPress={() => this.submit(this.component._lastNativeText)}
-					/>
-				</SafeAreaView>
-			</View>
 		);
 	}
 }

app/containers/MessageBox/style.js

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native';
+
+
+export default StyleSheet.create({
+	textBox: {
+		backgroundColor: '#fff',
+		flex: 0,
+		alignItems: 'center',
+		borderTopWidth: 1,
+		borderTopColor: '#D8D8D8',
+		paddingHorizontal: 15,
+		paddingVertical: 15
+	},
+	safeAreaView: {
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	textArea: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		backgroundColor: 'white',
+		flexGrow: 0
+	},
+	textBoxInput: {
+		paddingVertical: 0,
+		paddingHorizontal: 10,
+		textAlignVertical: 'top',
+		maxHeight: 120,
+		flexGrow: 1,
+		width: 1,
+		paddingTop: 0,
+		paddingBottom: 0
+	},
+	editing: {
+		backgroundColor: '#fff5df'
+	},
+	actionButtons: {
+		color: '#2F343D',
+		fontSize: 20,
+		textAlign: 'center',
+		paddingHorizontal: 5,
+		flex: 0
+	},
+	actionRow: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		alignContent: 'center'
+	},
+	actionContent: {
+		borderBottomWidth: 1,
+		borderBottomColor: '#ECECEC',
+
+		borderTopWidth: 1,
+		borderTopColor: '#ECECEC',
+
+		backgroundColor: '#F7F8FA'
+	},
+	actionTitle: {
+		flex: 1,
+		fontSize: 17,
+		padding: 14,
+		textAlign: 'right',
+		borderBottomWidth: 1,
+		borderBottomColor: '#ECECEC',
+		color: '#2F343D'
+	}
+});

app/containers/icons.js

@@ -0,0 +1,4 @@
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import iconConfig from '../icons.json';
+
+export default createIconSetFromIcoMoon(iconConfig);

app/icons.json

@@ -0,0 +1,370 @@
+{
+  "IcoMoonType": "selection",
+  "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M438.857 0v1024h146.286v-1024z",
+          "M1024 438.857h-1024v146.286h1024z"
+        ],
+        "attrs": [
+          {},
+          {}
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "plus"
+        ],
+        "colorPermutations": {
+          "47526116572821": [
+            {},
+            {}
+          ]
+        }
+      },
+      "attrs": [
+        {},
+        {}
+      ],
+      "properties": {
+        "order": 28,
+        "id": 2,
+        "name": "plus",
+        "prevSize": 32,
+        "code": 59648
+      },
+      "setIdx": 2,
+      "setId": 6,
+      "iconIdx": 0
+    },
+    {
+      "icon": {
+        "paths": [
+          "M192 256.3v511.4c0 35.542 28.768 64.3 64.3 64.3h511.4c35.542 0 64.3-28.768 64.3-64.3v-511.4c0-35.542-28.768-64.3-64.3-64.3h-511.4c-35.542 0-64.3 28.768-64.3 64.3zM115.2 256.3c0-77.942 63.136-141.1 141.1-141.1h511.4c77.942 0 141.1 63.136 141.1 141.1v511.4c0 77.942-63.136 141.1-141.1 141.1h-511.4c-77.942 0-141.1-63.136-141.1-141.1v-511.4z",
+          "M384 499.2c-63.623 0-115.2-51.577-115.2-115.2s51.577-115.2 115.2-115.2c63.623 0 115.2 51.577 115.2 115.2s-51.577 115.2-115.2 115.2zM384 422.4c21.208 0 38.4-17.192 38.4-38.4s-17.192-38.4-38.4-38.4c-21.208 0-38.4 17.192-38.4 38.4s17.192 38.4 38.4 38.4z",
+          "M362.1 661.315l142.276 97.378 216.661-204.97 119.31 88.168 45.643-61.765-171.023-126.383-218.354 206.571-141.706-96.989-215.826 199.756 52.167 56.364z"
+        ],
+        "attrs": [
+          {
+            "fill": "rgb(29, 116, 245)"
+          },
+          {
+            "fill": "rgb(29, 116, 245)"
+          },
+          {
+            "fill": "rgb(29, 116, 245)"
+          }
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "image--dark"
+        ],
+        "colorPermutations": {
+          "2372372371291162451461152331": [
+            {
+              "f": 0
+            },
+            {
+              "f": 0
+            },
+            {
+              "f": 0
+            }
+          ]
+        }
+      },
+      "attrs": [
+        {
+          "fill": "rgb(29, 116, 245)"
+        },
+        {
+          "fill": "rgb(29, 116, 245)"
+        },
+        {
+          "fill": "rgb(29, 116, 245)"
+        }
+      ],
+      "properties": {
+        "order": 27,
+        "id": 7,
+        "name": "image",
+        "prevSize": 32,
+        "code": 59649
+      },
+      "setIdx": 3,
+      "setId": 5,
+      "iconIdx": 1
+    },
+    {
+      "icon": {
+        "paths": [
+          "M536.525 899.948l-24.525 20.355-24.525-20.355c-2.383-1.978-6.519-5.545-12.158-10.619-9.205-8.281-19.41-17.9-30.368-28.777-31.205-30.973-62.381-65.972-91.538-104.393-84.606-111.487-135.811-228.912-135.811-347.961 0-161.866 131.854-292.999 294.4-292.999s294.4 131.133 294.4 292.999c0 119.049-51.205 236.473-135.811 347.961-29.157 38.421-60.333 73.42-91.538 104.393-10.958 10.877-21.164 20.496-30.368 28.777-5.639 5.073-9.775 8.64-12.158 10.619zM524.949 806.045c28.795-28.581 57.619-60.94 84.462-96.312 75.394-99.349 120.189-202.073 120.189-301.534 0-119.356-97.376-216.199-217.6-216.199s-217.6 96.843-217.6 216.199c0 99.46 44.795 202.185 120.189 301.534 26.843 35.372 55.667 67.731 84.462 96.312 4.618 4.584 8.948 8.792 12.949 12.611 4.001-3.819 8.33-8.027 12.949-12.611z",
+          "M512 550.4c-77.762 0-140.8-63.038-140.8-140.8s63.038-140.8 140.8-140.8c77.762 0 140.8 63.038 140.8 140.8s-63.038 140.8-140.8 140.8zM512 473.6c35.346 0 64-28.654 64-64s-28.654-64-64-64c-35.346 0-64 28.654-64 64s28.654 64 64 64z"
+        ],
+        "attrs": [
+          {
+            "fill": "rgb(29, 116, 245)"
+          },
+          {
+            "fill": "rgb(29, 116, 245)"
+          }
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "locaiton--dark"
+        ],
+        "colorPermutations": {
+          "2372372371291162451461152331": [
+            {
+              "f": 0
+            },
+            {
+              "f": 0
+            }
+          ]
+        }
+      },
+      "attrs": [
+        {
+          "fill": "rgb(29, 116, 245)"
+        },
+        {
+          "fill": "rgb(29, 116, 245)"
+        }
+      ],
+      "properties": {
+        "order": 26,
+        "id": 6,
+        "name": "locaiton",
+        "prevSize": 32,
+        "code": 59650
+      },
+      "setIdx": 3,
+      "setId": 5,
+      "iconIdx": 2
+    },
+    {
+      "icon": {
+        "paths": [
+          "M192 396.8v384h435.2v-384h-435.2zM704 320v537.6h-588.8v-537.6h588.8z",
+          "M704 669.575l179.2 58.183v-226.793l-179.2 58.183v110.427zM860.987 427.431c51.738-16.799 99.013 17.465 99.013 71.914v230.034c0 54.383-47.285 88.709-99.013 71.914l-233.787-75.907v-222.049l233.787-75.907z",
+          "M243.2 243.2h332.8v-76.8h-332.8z"
+        ],
+        "attrs": [
+          {
+            "fill": "rgb(29, 116, 245)"
+          },
+          {
+            "fill": "rgb(29, 116, 245)"
+          },
+          {
+            "fill": "rgb(29, 116, 245)"
+          }
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "video--dark"
+        ],
+        "colorPermutations": {
+          "2372372371291162451461152331": [
+            {
+              "f": 0
+            },
+            {
+              "f": 0
+            },
+            {
+              "f": 0
+            }
+          ]
+        }
+      },
+      "attrs": [
+        {
+          "fill": "rgb(29, 116, 245)"
+        },
+        {
+          "fill": "rgb(29, 116, 245)"
+        },
+        {
+          "fill": "rgb(29, 116, 245)"
+        }
+      ],
+      "properties": {
+        "order": 25,
+        "id": 5,
+        "name": "video",
+        "prevSize": 32,
+        "code": 59652
+      },
+      "setIdx": 3,
+      "setId": 5,
+      "iconIdx": 3
+    },
+    {
+      "icon": {
+        "paths": [
+          "M512 179.2c-56.554 0-102.4 45.846-102.4 102.4v153.6c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4v-153.6c0-56.554-45.846-102.4-102.4-102.4zM512 102.4c98.969-0 179.2 80.231 179.2 179.2v153.6c0 98.969-80.231 179.2-179.2 179.2s-179.2-80.231-179.2-179.2v-153.6c0-98.969 80.231-179.2 179.2-179.2z",
+          "M473.6 716.8v153.6h76.8v-153.6z",
+          "M358.4 870.4h307.2v51.2h-307.2v-51.2z",
+          "M217.603 410.070c2.746 224.36 103.388 345.13 294.397 345.13s291.651-120.77 294.397-345.13l-76.794-0.94c-2.268 185.24-72.292 269.27-217.603 269.27s-215.335-84.030-217.603-269.27l-76.794 0.94z"
+        ],
+        "attrs": [
+          {
+            "fill": "rgb(29, 116, 245)"
+          },
+          {
+            "fill": "rgb(29, 116, 245)"
+          },
+          {
+            "fill": "rgb(29, 116, 245)"
+          },
+          {
+            "fill": "rgb(29, 116, 245)"
+          }
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "volume--dark"
+        ],
+        "colorPermutations": {
+          "2372372371291162451461152331": [
+            {
+              "f": 0
+            },
+            {
+              "f": 0
+            },
+            {
+              "f": 0
+            },
+            {
+              "f": 0
+            }
+          ]
+        }
+      },
+      "attrs": [
+        {
+          "fill": "rgb(29, 116, 245)"
+        },
+        {
+          "fill": "rgb(29, 116, 245)"
+        },
+        {
+          "fill": "rgb(29, 116, 245)"
+        },
+        {
+          "fill": "rgb(29, 116, 245)"
+        }
+      ],
+      "properties": {
+        "order": 24,
+        "id": 4,
+        "name": "audio",
+        "prevSize": 32,
+        "code": 59653
+      },
+      "setIdx": 3,
+      "setId": 5,
+      "iconIdx": 4
+    },
+    {
+      "icon": {
+        "paths": [
+          "M4.676 67.568c-7.948-17.050-4.542-38.646 10.218-53.423 13.625-13.64 34.062-18.186 53.363-10.23l1080.886 463.755c17.031 7.957 28.385 26.143 28.385 44.33 1.135 19.323-11.354 36.373-28.385 44.33l-1080.886 463.755c-19.302 7.957-39.738 3.41-53.363-10.23-14.76-14.777-19.302-35.236-10.218-53.423l196.421-444.432-196.421-444.432zM1007.221 512l-864.028-371.686 148.735 335.313 238.431 2.273c26.114-1.137 47.686 20.46 47.686 47.74 1.135 26.143-20.437 47.74-47.686 47.74h-249.785l-137.382 310.307 864.028-371.686z"
+        ],
+        "attrs": [
+          {
+            "fill": "rgb(46, 115, 233)"
+          }
+        ],
+        "width": 1178,
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "grid": 0,
+        "tags": [
+          "teste"
+        ],
+        "colorPermutations": {
+          "2372372371291162451461152331": [
+            {
+              "f": 1
+            }
+          ]
+        }
+      },
+      "attrs": [
+        {
+          "fill": "rgb(46, 115, 233)"
+        }
+      ],
+      "properties": {
+        "order": 15,
+        "id": 0,
+        "name": "send",
+        "prevSize": 32,
+        "code": 59651
+      },
+      "setIdx": 3,
+      "setId": 5,
+      "iconIdx": 8
+    }
+  ],
+  "height": 1024,
+  "metadata": {
+    "name": "icomoon"
+  },
+  "preferences": {
+    "showGlyphs": true,
+    "showQuickUse": true,
+    "showQuickUse2": true,
+    "showSVGs": true,
+    "fontPref": {
+      "prefix": "icon-",
+      "metadata": {
+        "fontFamily": "icomoon",
+        "majorVersion": 1,
+        "minorVersion": 0
+      },
+      "metrics": {
+        "emSize": 1024,
+        "baseline": 6.25,
+        "whitespace": 50
+      },
+      "embed": false,
+      "autoHost": false,
+      "noie8": false,
+      "ie7": true,
+      "showSelector": false,
+      "showMetrics": false,
+      "showMetadata": false,
+      "showVersion": false
+    },
+    "imagePref": {
+      "prefix": "icon-",
+      "png": true,
+      "useClassSelector": true,
+      "color": 0,
+      "bgColor": 16777215,
+      "classSelector": ".icon"
+    },
+    "historySize": 50,
+    "showCodes": false,
+    "gridSize": 16,
+    "quickUsageToken": {
+      "UntitledProject": "NTdjODdjYjc0ZDI5MGY2MWFiYjIxMjg0ZmJlZTE1OTgjMSMxNTEyMTU3MDcxIyMj"
+    },
+    "showLiga": false
+  }
+}

icons/20x20/at.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>20x20/at--dark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="20x20/at--dark">
+            <g id="24x24/at--dark">
+                <rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
+                <circle id="Oval" stroke="#1D74F5" stroke-width="1.5" cx="10" cy="10" r="3"></circle>
+                <path d="M12.6793983,16.4688846 C11.8540758,16.8111147 10.9490962,17 10,17 C6.13400675,17 3,13.8659932 3,10 C3,6.13400675 6.13400675,3 10,3 C13.8659932,3 17,6.13400675 17,10 L17,10.5418084" id="Oval" stroke="#1D74F5" stroke-width="1.5"></path>
+                <path d="M17,10.4906996 C17,11.876548 16.2185011,13 15,13 C13.7814989,13 13,11.8876343 13,10.4906996 L13,6" id="Rectangle-7" stroke="#1D74F5" stroke-width="1.5"></path>
+            </g>
+        </g>
+    </g>
+</svg>

icons/20x20/image.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>20x20/image--dark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="20x20/image--dark">
+            <g id="20x20/customize--grey">
+                <rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
+            </g>
+            <path d="M3.75,5.00585866 L3.75,14.9941413 C3.75,15.6883258 4.31186644,16.25 5.00585866,16.25 L14.9941413,16.25 C15.6883258,16.25 16.25,15.6881336 16.25,14.9941413 L16.25,5.00585866 C16.25,4.31167423 15.6881336,3.75 14.9941413,3.75 L5.00585866,3.75 C4.31167423,3.75 3.75,4.31186644 3.75,5.00585866 Z M2.25,5.00585866 C2.25,3.48355418 3.4831322,2.25 5.00585866,2.25 L14.9941413,2.25 C16.5164458,2.25 17.75,3.4831322 17.75,5.00585866 L17.75,14.9941413 C17.75,16.5164458 16.5168678,17.75 14.9941413,17.75 L5.00585866,17.75 C3.48355418,17.75 2.25,16.5168678 2.25,14.9941413 L2.25,5.00585866 Z" id="Rectangle-8" fill="#1D74F5" fill-rule="nonzero"></path>
+            <path d="M7.5,9.75 C6.25735931,9.75 5.25,8.74264069 5.25,7.5 C5.25,6.25735931 6.25735931,5.25 7.5,5.25 C8.74264069,5.25 9.75,6.25735931 9.75,7.5 C9.75,8.74264069 8.74264069,9.75 7.5,9.75 Z M7.5,8.25 C7.91421356,8.25 8.25,7.91421356 8.25,7.5 C8.25,7.08578644 7.91421356,6.75 7.5,6.75 C7.08578644,6.75 6.75,7.08578644 6.75,7.5 C6.75,7.91421356 7.08578644,8.25 7.5,8.25 Z" id="Oval-4" fill="#1D74F5" fill-rule="nonzero"></path>
+            <polygon id="Path-2" fill="#1D74F5" fill-rule="nonzero" points="7.07225957 12.9163101 9.85108036 14.8182261 14.0827401 10.8149106 16.4130159 12.5369513 17.3044896 11.3306037 13.9641985 8.86217609 9.69947618 12.89677 6.93177209 11.0024627 2.71642406 14.9039559 3.73531014 16.004806"></polygon>
+        </g>
+    </g>
+</svg>

icons/20x20/location.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>20x20/locaiton--dark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="20x20/locaiton--dark">
+            <g id="24x24/locaiton--grey" transform="translate(5.000000, 3.000000)"></g>
+            <path d="M10.4789968,17.5771153 L10,17.9746752 L9.52100321,17.5771153 C9.47445061,17.5384774 9.39367812,17.468811 9.28353674,17.369721 C9.10375527,17.2079784 8.9044283,17.0201045 8.6904022,16.8076695 C8.08092817,16.2027264 7.47202864,15.5191569 6.9025566,14.7687473 C5.25010104,12.5912592 4.25,10.2978106 4.25,7.97263622 C4.25,4.81118736 6.82528125,2.25 10,2.25 C13.1747188,2.25 15.75,4.81118736 15.75,7.97263622 C15.75,10.2978106 14.749899,12.5912592 13.0974434,14.7687473 C12.5279714,15.5191569 11.9190718,16.2027264 11.3095978,16.8076695 C11.0955717,17.0201045 10.8962447,17.2079784 10.7164633,17.369721 C10.6063219,17.468811 10.5255494,17.5384774 10.4789968,17.5771153 Z M10.2529022,15.7430596 C10.8153032,15.1848395 11.3782786,14.5528258 11.9025566,13.8619697 C13.375101,11.9215557 14.25,9.91522264 14.25,7.97263622 C14.25,5.64146278 12.3481287,3.75 10,3.75 C7.65187126,3.75 5.75,5.64146278 5.75,7.97263622 C5.75,9.91522264 6.62489896,11.9215557 8.0974434,13.8619697 C8.62172136,14.5528258 9.18469683,15.1848395 9.7470978,15.7430596 C9.83729995,15.8325911 9.92185693,15.9147868 10,15.9893725 C10.0781431,15.9147868 10.1627,15.8325911 10.2529022,15.7430596 Z" id="Oval" fill="#1D74F5" fill-rule="nonzero"></path>
+            <path d="M10,10.75 C8.48121694,10.75 7.25,9.51878306 7.25,8 C7.25,6.48121694 8.48121694,5.25 10,5.25 C11.5187831,5.25 12.75,6.48121694 12.75,8 C12.75,9.51878306 11.5187831,10.75 10,10.75 Z M10,9.25 C10.6903559,9.25 11.25,8.69035594 11.25,8 C11.25,7.30964406 10.6903559,6.75 10,6.75 C9.30964406,6.75 8.75,7.30964406 8.75,8 C8.75,8.69035594 9.30964406,9.25 10,9.25 Z" id="Oval" fill="#1D74F5" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>

icons/20x20/video.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>20x20/video--dark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="20x20/video--dark" fill-rule="nonzero" fill="#1D74F5">
+            <g id="24x24/video--grey">
+                <path d="M3.75,7.75 L3.75,15.25 L12.25,15.25 L12.25,7.75 L3.75,7.75 Z M13.75,6.25 L13.75,16.75 L2.25,16.75 L2.25,6.25 L13.75,6.25 Z" id="Rectangle"></path>
+                <path d="M13.75,13.0776431 L17.25,14.2140346 L17.25,9.78447755 L13.75,10.9208691 L13.75,13.0776431 Z M16.816159,8.34825467 C17.8266758,8.02015675 18.75,8.68935903 18.75,9.75282741 L18.75,14.2456848 C18.75,15.307855 17.8264557,15.9782839 16.816159,15.6502575 L12.25,14.167702 L12.25,9.8308102 L16.816159,8.34825467 Z" id="Rectangle-3"></path>
+                <polygon id="Line" points="4.75 4.75 11.25 4.75 11.25 3.25 4.75 3.25"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

icons/20x20/volume.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>20x20/volume--dark</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="20x20/volume--dark">
+            <g id="20x20/mute--dark">
+                <rect id="Rectangle-4" x="0" y="0" width="20" height="20"></rect>
+                <g id="Group" transform="translate(5.000000, 2.000000)" fill="#1D74F5">
+                    <path d="M5,1.5 C3.8954305,1.5 3,2.3954305 3,3.5 L3,6.5 C3,7.6045695 3.8954305,8.5 5,8.5 C6.1045695,8.5 7,7.6045695 7,6.5 L7,3.5 C7,2.3954305 6.1045695,1.5 5,1.5 Z M5,-3.5971226e-14 C6.93299662,-3.63263022e-14 8.5,1.56700338 8.5,3.5 L8.5,6.5 C8.5,8.43299662 6.93299662,10 5,10 C3.06700338,10 1.5,8.43299662 1.5,6.5 L1.5,3.5 C1.5,1.56700338 3.06700338,-3.56161498e-14 5,-3.5971226e-14 Z" id="Rectangle-9" fill-rule="nonzero"></path>
+                    <polygon id="Path-2" fill-rule="nonzero" points="4.25 12 4.25 15 5.75 15 5.75 12"></polygon>
+                    <rect id="Rectangle-10" x="2" y="15" width="6" height="1"></rect>
+                    <path d="M-0.749943816,6.00918002 C-0.696303648,10.3912103 1.26935445,12.75 5,12.75 C8.73064555,12.75 10.6963036,10.3912103 10.7499438,6.00918002 L9.25005618,5.99081998 C9.20576883,9.60878972 7.8380936,11.25 5,11.25 C2.1619064,11.25 0.794231165,9.60878972 0.749943816,5.99081998 L-0.749943816,6.00918002 Z" id="Path-3" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -5,7 +5,6 @@
 	};
 	objectVersion = 46;
 	objects = {
-
 /* Begin PBXBuildFile section */
 		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
 		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -51,6 +50,10 @@
 		8ECBD927DDAC4987B98E102E /* libRCTVideo.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 20CE3E407E0D4D9E8C9885F2 /* libRCTVideo.a */; };
 		AE5D35882AE04CC29630FB3D /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = DC6EE17B5550465E98C70FF0 /* Entypo.ttf */; };
 		B88F586F1FBF57F600B352B8 /* libRCTPushNotification.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B88F58461FBF55E200B352B8 /* libRCTPushNotification.a */; };
+		B8C682A81FD850F4003A12C8 /* icomoon.ttf in Resources */ = {isa = PBXBuildFile; fileRef = B8C682611FD84CEF003A12C8 /* icomoon.ttf */; };
+		B8C682AC1FD8511D003A12C8 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1B0746E708284151B8AD1198 /* Ionicons.ttf */; };
+		B8C682AD1FD8511E003A12C8 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1B0746E708284151B8AD1198 /* Ionicons.ttf */; };
+		B8C682AE1FD8511F003A12C8 /* Ionicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 1B0746E708284151B8AD1198 /* Ionicons.ttf */; };
 		B8E79AF41F3CD167005B464F /* Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB61A68108700A75B9A /* Info.plist */; };
 		BED2B77AA660460E8BC9F8E0 /* libRNFetchBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6533FB90166345D29F1B91C0 /* libRNFetchBlob.a */; };
 		C758F0BD5C3244E2BA073E61 /* libRNImagePicker.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B696712EE2345A59F007A88 /* libRNImagePicker.a */; };
@@ -405,7 +408,7 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = RocketChatRN/Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = RocketChatRN/main.m; sourceTree = "<group>"; };
 		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
-		1B0746E708284151B8AD1198 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; };
+		1B0746E708284151B8AD1198 /* Ionicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = file; name = Ionicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Ionicons.ttf"; sourceTree = "<group>"; };
 		20CE3E407E0D4D9E8C9885F2 /* libRCTVideo.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRCTVideo.a; sourceTree = "<group>"; };
 		22A8B76C8EBA443BB97CE82D /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; };
 		2D02E47B1E0B4A5D006451C7 /* RocketChatRN-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "RocketChatRN-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -430,6 +433,7 @@
 		AD0379F2BCE84C968538CDAF /* RCTVideo.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RCTVideo.xcodeproj; path = "../node_modules/react-native-video/ios/RCTVideo.xcodeproj"; sourceTree = "<group>"; };
 		B37C79D9BD0742CE936B6982 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
 		B88F58361FBF55E200B352B8 /* RCTPushNotification.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTPushNotification.xcodeproj; path = "../node_modules/react-native/Libraries/PushNotificationIOS/RCTPushNotification.xcodeproj"; sourceTree = "<group>"; };
+		B8C682611FD84CEF003A12C8 /* icomoon.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = icomoon.ttf; path = ../resources/fonts/icomoon.ttf; sourceTree = "<group>"; };
 		BAAE4B947F5D44959F0A9D5A /* libRNZeroconf.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNZeroconf.a; sourceTree = "<group>"; };
 		C23AEF1D9EBE4A38A1A6B97B /* RNSVG.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNSVG.xcodeproj; path = "../node_modules/react-native-svg/ios/RNSVG.xcodeproj"; sourceTree = "<group>"; };
 		DA50CE47374C4C35BE6D9D58 /* libRNSVG.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNSVG.a; sourceTree = "<group>"; };
@@ -731,6 +735,7 @@
 		AF5E16F0398347E6A80C8CBE /* Resources */ = {
 			isa = PBXGroup;
 			children = (
+				B8C682611FD84CEF003A12C8 /* icomoon.ttf */,
 				DC6EE17B5550465E98C70FF0 /* Entypo.ttf */,
 				A18EFC3B0CFE40E0918A8F0C /* EvilIcons.ttf */,
 				7A30DA4B2D474348824CD05B /* FontAwesome.ttf */,
@@ -1328,6 +1333,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				B8C682AD1FD8511E003A12C8 /* Ionicons.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -1335,6 +1341,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				B8C682A81FD850F4003A12C8 /* icomoon.ttf in Resources */,
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
 				AE5D35882AE04CC29630FB3D /* Entypo.ttf in Resources */,
@@ -1356,6 +1363,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */,
+				B8C682AC1FD8511D003A12C8 /* Ionicons.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -1363,6 +1371,7 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				B8C682AE1FD8511F003A12C8 /* Ionicons.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/RocketChatRN/Info.plist

@@ -40,7 +40,7 @@
 	<key>NSCameraUsageDescription</key>
 	<string>Upload images from camera</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>Upload images from library</string>
 	<key>UIAppFonts</key>
@@ -55,6 +55,7 @@
 		<string>Octicons.ttf</string>
 		<string>SimpleLineIcons.ttf</string>
 		<string>Zocial.ttf</string>
+		<string>icomoon.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>

package-lock.json

@@ -8389,11 +8389,6 @@
       "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
       "integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
     },
-    "keymirror": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/keymirror/-/keymirror-0.1.1.tgz",
-      "integrity": "sha1-kYiJ6hP40KQufFVyUO7nE63JXDU="
-    },
     "kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -12257,6 +12252,11 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-native-card-view": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/react-native-card-view/-/react-native-card-view-0.0.3.tgz",
+      "integrity": "sha1-jbmsSj8B0I+L2feTQwgth/3wmQc="
+    },
     "react-native-compat": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/react-native-compat/-/react-native-compat-1.0.0.tgz",
@@ -12406,14 +12406,6 @@
       "resolved": "https://registry.npmjs.org/react-native-push-notification/-/react-native-push-notification-3.0.1.tgz",
       "integrity": "sha1-DiPbMC0Du0o/KNwHLcryqaEXjtg="
     },
-    "react-native-slider": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/react-native-slider/-/react-native-slider-0.11.0.tgz",
-      "integrity": "sha512-jV9K87eu9uWr0uJIyrSpBLnCKvVlOySC2wynq9TFCdV9oGgjt7Niq8Q1A8R8v+5GHsuBw/s8vEj1AAkkUi+u+w==",
-      "requires": {
-        "prop-types": "15.6.0"
-      }
-    },
     "react-native-svg": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.0.0.tgz",
@@ -12472,23 +12464,6 @@
         }
       }
     },
-    "react-native-video": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-2.0.0.tgz",
-      "integrity": "sha1-8z+m+35+PJOrV4eUTO/Vi/c1WGc=",
-      "requires": {
-        "keymirror": "0.1.1",
-        "prop-types": "15.6.0"
-      }
-    },
-    "react-native-video-controls": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/react-native-video-controls/-/react-native-video-controls-2.0.0.tgz",
-      "integrity": "sha512-dejwvoR0mL3DQtP6BSO/tlGaUzOXfGlj3kWkBJm7q3pTGsHWDGJmEtpwVhyVtJBg95O8Fb5Nz15JwRqsjonagg==",
-      "requires": {
-        "lodash": "4.17.4"
-      }
-    },
     "react-native-zeroconf": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-native-zeroconf/-/react-native-zeroconf-0.8.3.tgz",
@@ -12848,11 +12823,6 @@
         "symbol-observable": "1.0.4"
       }
     },
-    "redux-enhancer-react-native-appstate": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/redux-enhancer-react-native-appstate/-/redux-enhancer-react-native-appstate-0.3.0.tgz",
-      "integrity": "sha1-+5Fwk3WM4J9DLNCytWPRNh6PV28="
-    },
     "redux-immutable-state-invariant": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/redux-immutable-state-invariant/-/redux-immutable-state-invariant-2.1.0.tgz",

package.json

@@ -15,6 +15,11 @@
     "snyk-protect": "snyk protect",
     "prepare": "npm run snyk-protect"
   },
+  "rnpm": {
+    "assets": [
+      "resources/fonts"
+    ]
+  },
   "dependencies": {
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-remove-console": "^6.8.5",

storybook/stories/Avatar.js

@@ -1,13 +1,21 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
+import { Provider } from 'react-redux';
 
+import { createStore, combineReducers } from 'redux';
 import Avatar from '../../app/containers/Avatar';
 
+const reducers = combineReducers({ settings: () => ({}) });
+const store = createStore(reducers);
+
+
 export default (
-	<ScrollView>
+	<Provider store={store}>
-		<Avatar text='test' />
+		<ScrollView>
-		<Avatar size={40} text='aa' />
+			<Avatar text='test' />
-		<Avatar size={30} text='bb' />
+			<Avatar size={40} text='aa' />
-		<Avatar text='test' borderRadius={2} />
+			<Avatar size={30} text='bb' />
-	</ScrollView>
+			<Avatar text='test' borderRadius={2} />
+		</ScrollView>
+	</Provider>
 );

storybook/stories/index.js

@@ -1,6 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 
-// import React from 'react';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { createStore, combineReducers } from 'redux';
+
 
 import { storiesOf } from '@storybook/react-native';
 // import { action } from '@storybook/addon-actions';
@@ -9,8 +13,11 @@ import { storiesOf } from '@storybook/react-native';
 import DirectMessage from './Channels/DirectMessage';
 import Avatar from './Avatar';
 
-storiesOf('Avatar', module).add('avatar', () => Avatar);
+const reducers = combineReducers({ settings: () => ({}) });
-storiesOf('Channel Cell', module).add('Direct Messages', () => DirectMessage);
+const store = createStore(reducers);
+
+storiesOf('Avatar', module).addDecorator(story => <Provider store={store}>{story()}</Provider>).add('avatar', () => Avatar);
+storiesOf('Channel Cell', module).addDecorator(story => <Provider store={store}>{story()}</Provider>).add('Direct Messages', () => DirectMessage);
 
 // storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);