From 2626e4a7bb64fed48331355e03f80dce3022b067 Mon Sep 17 00:00:00 2001
From: Rodrigo Nascimento <rodrigoknascimento@gmail.com>
Date: Sat, 12 Aug 2017 17:52:55 -0300
Subject: [PATCH] Change the navigator by a better one

---
 .eslintrc                                     |   1 +
 android/app/build.gradle                      |   5 +-
 .../java/com/rocketchatrn/MainActivity.java   |  12 +-
 .../com/rocketchatrn/MainApplication.java     |  26 ++--
 android/settings.gradle                       |   2 +
 app/navigation.js                             |  68 ++--------
 app/views/Main.js                             |  43 -------
 app/views/login.js                            |  23 ++--
 app/views/room.js                             |  23 ++--
 app/views/roomsList.js                        |  69 ++++++++--
 app/views/serverList.js                       |  59 ++++++---
 app/views/serverNew.js                        |  34 ++++-
 index.android.js                              |   7 +-
 index.ios.js                                  |   7 +-
 ios/RocketChatRN.xcodeproj/project.pbxproj    | 119 +++++++++++++++++-
 ios/RocketChatRN/AppDelegate.m                |  32 +++--
 package.json                                  |   1 +
 17 files changed, 330 insertions(+), 201 deletions(-)
 delete mode 100644 app/views/Main.js

diff --git a/.eslintrc b/.eslintrc
index c8d864c5a..11327145f 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -78,6 +78,7 @@
 			"vars": "all",
 			"args": "after-used"
 		}],
+		"max-len": 0,
 		"react/jsx-uses-vars": 2,
 		"no-void": 2,
 		"no-var": 2,
diff --git a/android/app/build.gradle b/android/app/build.gradle
index cb1425889..704e8266f 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -90,8 +90,8 @@ def enableSeparateBuildPerCPUArchitecture = false
 def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    compileSdkVersion 25
+    buildToolsVersion "25.0.1"
 
     defaultConfig {
         applicationId "com.rocketchatrn"
@@ -133,6 +133,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-navigation')
     compile project(':react-native-svg')
     compile project(':react-native-image-picker')
     compile project(':react-native-vector-icons')
diff --git a/android/app/src/main/java/com/rocketchatrn/MainActivity.java b/android/app/src/main/java/com/rocketchatrn/MainActivity.java
index 460d2b783..57a754e0b 100644
--- a/android/app/src/main/java/com/rocketchatrn/MainActivity.java
+++ b/android/app/src/main/java/com/rocketchatrn/MainActivity.java
@@ -1,15 +1,7 @@
 package com.rocketchatrn;
 
-import com.facebook.react.ReactActivity;
+import com.reactnativenavigation.controllers.SplashActivity;
 
-public class MainActivity extends ReactActivity {
+public class MainActivity extends SplashActivity {
 
-    /**
-     * Returns the name of the main component registered from JavaScript.
-     * This is used to schedule rendering of the component.
-     */
-    @Override
-    protected String getMainComponentName() {
-        return "RocketChatRN";
-    }
 }
diff --git a/android/app/src/main/java/com/rocketchatrn/MainApplication.java b/android/app/src/main/java/com/rocketchatrn/MainApplication.java
index f55f4fcc1..277cfd500 100644
--- a/android/app/src/main/java/com/rocketchatrn/MainApplication.java
+++ b/android/app/src/main/java/com/rocketchatrn/MainApplication.java
@@ -3,6 +3,7 @@ package com.rocketchatrn;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+// import com.reactnativenavigation.NavigationReactPackage;
 import com.horcrux.svg.SvgPackage;
 import com.imagepicker.ImagePickerPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
@@ -13,22 +14,20 @@ import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
 import com.facebook.soloader.SoLoader;
+import com.reactnativenavigation.NavigationApplication;
 
 import java.util.Arrays;
 import java.util.List;
 
-public class MainApplication extends Application implements ReactApplication {
-
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+public class MainApplication extends NavigationApplication {
     @Override
-    public boolean getUseDeveloperSupport() {
+    public boolean isDebug() {
+      // Make sure you are using BuildConfig from your own application
       return BuildConfig.DEBUG;
     }
 
-    @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage(),
             new SvgPackage(),
             new ImagePickerPackage(),
             new VectorIconsPackage(),
@@ -37,16 +36,9 @@ public class MainApplication extends Application implements ReactApplication {
             new RealmReactPackage()
       );
     }
-  };
 
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-    return mReactNativeHost;
-  }
-
-  @Override
-  public void onCreate() {
-    super.onCreate();
-    SoLoader.init(this, /* native exopackage */ false);
-  }
+    @Override
+    public List<ReactPackage> createAdditionalReactPackages() {
+      return getPackages();
+    }
 }
diff --git a/android/settings.gradle b/android/settings.gradle
index fcc9db102..aacf704b9 100644
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -1,4 +1,6 @@
 rootProject.name = 'RocketChatRN'
+include ':react-native-navigation'
+project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')
 include ':react-native-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-image-picker'
diff --git a/app/navigation.js b/app/navigation.js
index 6733ca1a3..67ae8149d 100644
--- a/app/navigation.js
+++ b/app/navigation.js
@@ -1,68 +1,22 @@
-import React from 'react';
-import { Button, Platform } from 'react-native';
-import { StackNavigator } from 'react-navigation';
+import { Navigation } from 'react-native-navigation';
 import LoginView from './views/login';
 import NewServerView from './views/serverNew';
 import ListServerView from './views/serverList';
-import Main from './views/Main';
 import RoomsListView from './views/roomsList';
 import RoomView from './views/room';
 import CreateChannel from './views/CreateChannel';
 
 
-const MainCardNavigator = StackNavigator({
-	Main: {
-		screen: Main
-	},
-	Rooms: {
-		screen: RoomsListView
-	},
-	Room: {
-		screen: RoomView
-	},
-	ListServerModal: {
-		screen: ListServerView,
-		navigationOptions: ({ navigation }) =>
-			(Platform.OS === 'ios' ? ({
-				headerLeft: Platform.OS === 'ios' && (<Button title='Close' onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })} />)
-			}) : {})
-	}
-}, {
-	initialRouteName: 'Main',
-	cardStyle: {
-		backgroundColor: '#fff'
-	}
-});
+Navigation.registerComponent('Rooms', () => RoomsListView);
+Navigation.registerComponent('Room', () => RoomView);
+Navigation.registerComponent('ListServer', () => ListServerView);
+Navigation.registerComponent('Login', () => LoginView);
+Navigation.registerComponent('NewServer', () => NewServerView);
+Navigation.registerComponent('CreateChannel', () => CreateChannel);
 
-export default new StackNavigator({
-	Main: {
-		screen: MainCardNavigator,
-		navigationOptions: {
-			header: null
-		}
-	},
-	Login: {
-		screen: LoginView,
-		navigationOptions: ({ navigation }) => ({
-			headerLeft: Platform.OS === 'ios' && (<Button title='Cancel' onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })} />)
-		})
-	},
-	NewServerModal: {
-		screen: NewServerView,
-		navigationOptions: ({ navigation }) => ({
-			headerLeft: Platform.OS === 'ios' && (<Button title='Close' onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })} />)
-		})
-	},
-	CreateChannel: {
-		screen: CreateChannel,
-		navigationOptions: ({ navigation }) => ({
-			headerLeft: Platform.OS === 'ios' && (<Button title='Cancel' onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })} />)
-		})
+Navigation.startSingleScreenApp({
+	screen: {
+		screen: 'Rooms',
+		title: 'Channels'
 	}
-}, {
-	initialRouteName: 'Main',
-	cardStyle: {
-		backgroundColor: '#fff'
-	}
-	// mode: 'modal'
 });
diff --git a/app/views/Main.js b/app/views/Main.js
deleted file mode 100644
index 1e1a8d02d..000000000
--- a/app/views/Main.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { NavigationActions } from 'react-navigation';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import realm from '../lib/realm';
-import RocketChat from '../lib/rocketchat';
-
-
-class App extends React.Component {
-	static propTypes = {
-		navigation: PropTypes.object.isRequired
-	}
-	constructor(...args) {
-		super(...args);
-		const navigation = this.props.navigation;
-		realm.objects('servers').addListener(() => {
-			if (RocketChat.currentServer) {
-				const resetAction = NavigationActions.reset({
-					index: 0,
-					actions: [
-						NavigationActions.navigate({ routeName: 'Rooms' })
-					]
-				});
-				navigation.dispatch(resetAction);
-			}
-		});
-		if (RocketChat.currentServer) {
-			RocketChat.connect();
-		} else {
-			const resetAction = NavigationActions.reset({
-				index: 0,
-				actions: [
-					NavigationActions.navigate({ routeName: 'ListServerModal' })
-				]
-			});
-			navigation.dispatch(resetAction);
-		}
-	}
-	render() {
-		return null;
-	}
-}
-export default App;
diff --git a/app/views/login.js b/app/views/login.js
index 962d733ab..cb2ed6d3a 100644
--- a/app/views/login.js
+++ b/app/views/login.js
@@ -10,7 +10,8 @@ const styles = StyleSheet.create({
 		flex: 1,
 		flexDirection: 'column',
 		justifyContent: 'center',
-		alignItems: 'stretch'
+		alignItems: 'stretch',
+		backgroundColor: '#fff'
 	},
 	input: {
 		height: 40,
@@ -26,7 +27,7 @@ const styles = StyleSheet.create({
 
 export default class LoginView extends React.Component {
 	static propTypes = {
-		navigation: PropTypes.object.isRequired
+		navigator: PropTypes.object.isRequired
 	}
 
 	static navigationOptions = () => ({
@@ -41,11 +42,19 @@ export default class LoginView extends React.Component {
 			password: ''
 		};
 
-		this.submit = () => {
-			RocketChat.loginWithPassword({ username: this.state.username }, this.state.password, () => {
-				this.props.navigation.dispatch({ type: 'Navigation/BACK' });
-			});
-		};
+		this.props.navigator.setTitle({
+			title: 'Login'
+		});
+
+		this.props.navigator.setSubTitle({
+			subtitle: RocketChat.currentServer
+		});
+	}
+
+	submit = () => {
+		RocketChat.loginWithPassword({ username: this.state.username }, this.state.password, () => {
+			this.props.navigator.dismissModal();
+		});
 	}
 
 	render() {
diff --git a/app/views/room.js b/app/views/room.js
index 09c8d232c..66a7207b4 100644
--- a/app/views/room.js
+++ b/app/views/room.js
@@ -39,26 +39,29 @@ const styles = StyleSheet.create({
 
 export default class RoomView extends React.Component {
 	static propTypes = {
-		navigation: PropTypes.object.isRequired
+		navigator: PropTypes.object.isRequired,
+		rid: PropTypes.string,
+		sid: PropTypes.string,
+		name: PropTypes.string
 	}
 
-	static navigationOptions = ({ navigation }) => ({
-		title: navigation.state.params.name || realm.objectForPrimaryKey('subscriptions', navigation.state.params.sid).name
-	});
-
-
 	constructor(props) {
 		super(props);
-		this.rid = props.navigation.state.params.rid || realm.objectForPrimaryKey('subscriptions', props.navigation.state.params.sid).rid;
+		this.rid = props.rid || realm.objectForPrimaryKey('subscriptions', props.sid).rid;
 		// this.rid = 'GENERAL';
+
 		this.data = realm.objects('messages').filtered('_server.id = $0 AND rid = $1', RocketChat.currentServer, this.rid).sorted('ts', true);
 		this.state = {
 			dataSource: ds.cloneWithRows(this.data.slice(0, 10)),
 			loaded: true,
-			joined: typeof props.navigation.state.params.rid === 'undefined'
+			joined: typeof props.rid === 'undefined'
 		};
 		// console.log(this.messages);
 		this.url = realm.objectForPrimaryKey('settings', 'Site_Url').value;
+
+		this.props.navigator.setTitle({
+			title: this.props.name || realm.objectForPrimaryKey('subscriptions', this.props.sid).name
+		});
 	}
 
 	componentWillMount() {
@@ -74,9 +77,11 @@ export default class RoomView extends React.Component {
 		});
 		this.updateState();
 	}
+
 	componentDidMount() {
 		return RocketChat.readMessages(this.rid);
 	}
+
 	componentWillUnmount() {
 		this.data.removeListener(this.updateState);
 	}
@@ -110,7 +115,7 @@ export default class RoomView extends React.Component {
 	sendMessage = message => RocketChat.sendMessage(this.rid, message);
 
 	joinRoom = () => {
-		RocketChat.joinRoom(this.props.navigation.state.params.rid)
+		RocketChat.joinRoom(this.props.rid)
 			.then(() => {
 				this.setState({
 					joined: true
diff --git a/app/views/roomsList.js b/app/views/roomsList.js
index 02f533f16..d594a3b37 100644
--- a/app/views/roomsList.js
+++ b/app/views/roomsList.js
@@ -1,4 +1,5 @@
 import ActionButton from 'react-native-action-button';
+import { Navigation } from 'react-native-navigation';
 import { ListView } from 'realm/react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import React from 'react';
@@ -58,14 +59,16 @@ const styles = StyleSheet.create({
 	}
 });
 
-let navigation;
 let setInitialData;
 
 Meteor.getData().on('loggingIn', () => {
 	setTimeout(() => {
 		if (Meteor._isLoggingIn === false && Meteor.userId() == null) {
 			console.log('loggingIn', Meteor.userId());
-			navigation.navigate('Login');
+			Navigation.showModal({
+				screen: 'Login',
+				animationType: 'slide-up'
+			});
 		}
 	}, 100);
 });
@@ -98,7 +101,7 @@ class RoomsListItem extends React.PureComponent {
 }
 export default class RoomsListView extends React.Component {
 	static propTypes = {
-		navigation: PropTypes.object.isRequired
+		navigator: PropTypes.object.isRequired
 	}
 
 	static navigationOptions = (props) => {
@@ -127,19 +130,37 @@ export default class RoomsListView extends React.Component {
 			searchText: ''
 		};
 		this.data.addListener(this.updateState);
+		this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
 	}
 
 	componentWillMount() {
 		setInitialData = this.setInitialData;
 
-		navigation = this.props.navigation;
+		if (RocketChat.currentServer) {
+			this.props.navigator.setSubTitle({
+				subtitle: RocketChat.currentServer
+			});
+		}
+
+		this.props.navigator.setButtons({
+			leftButtons: [{
+				id: 'servers',
+				title: 'Servers'
+			}],
+			// rightButtons: [], // see "Adding buttons to the navigator" below for format (optional)
+			animated: true
+		});
 
 		// this.setInitialData();
 		if (RocketChat.currentServer) {
 			RocketChat.connect();
 		} else {
-			navigation.navigate('ListServerModal', {
-				onSelect: this.setInitialData
+			Navigation.showModal({
+				screen: 'ListServer',
+				passProps: {},
+				navigatorStyle: {},
+				navigatorButtons: {},
+				animationType: 'none'
 			});
 		}
 	}
@@ -148,6 +169,21 @@ export default class RoomsListView extends React.Component {
 		this.data.removeListener(this.updateState);
 	}
 
+	onNavigatorEvent = (event) => {
+		if (event.type === 'NavBarButtonPress') {
+			if (event.id === 'servers') {
+				Navigation.showModal({
+					screen: 'ListServer',
+					passProps: {},
+					navigatorStyle: {},
+					navigatorButtons: {},
+					animationType: 'slide-up'
+					// animationType: 'none'
+				});
+			}
+		}
+	}
+
 	onSearchChangeText = (text) => {
 		const searchText = text.trim();
 		this.setState({
@@ -211,7 +247,12 @@ export default class RoomsListView extends React.Component {
 	}, 500);
 
 	_onPressItem = (id, item = {}) => {
-		const { navigate } = this.props.navigation;
+		const navigateToRoom = (room) => {
+			this.props.navigator.push({
+				screen: 'Room',
+				passProps: room
+			});
+		};
 
 		const clearSearch = () => {
 			this.setState({
@@ -226,22 +267,25 @@ export default class RoomsListView extends React.Component {
 			if (item.t === 'd') {
 				RocketChat.createDirectMessage(item.username)
 					.then(room => realm.objects('subscriptions').filtered('_server.id = $0 AND rid = $1', RocketChat.currentServer, room.rid))
-					.then(subs => navigate('Room', { sid: subs[0]._id }))
+					.then(subs => navigateToRoom({ sid: subs[0]._id }))
 					.then(() => clearSearch());
 			} else {
 				clearSearch();
-				navigate('Room', { rid: item._id, name: item.name });
+				navigateToRoom({ rid: item._id, name: item.name });
 			}
 			return;
 		}
 
-		navigate('Room', { sid: id });
+		navigateToRoom({ sid: id });
 		clearSearch();
 	}
+
 	_createChannel = () => {
-		const { navigate } = this.props.navigation;
-		navigate('CreateChannel');
+		this.props.navigator.showModal({
+			screen: 'CreateChannel'
+		});
 	}
+
 	renderBanner = () => {
 		const status = Meteor.getData() && Meteor.getData().ddp && Meteor.getData().ddp.status;
 
@@ -300,6 +344,7 @@ export default class RoomsListView extends React.Component {
 			dataSource={this.state.dataSource}
 			style={styles.list}
 			renderRow={item => this.renderItem({ item })}
+			enableEmptySections
 		/>
 	)
 
diff --git a/app/views/serverList.js b/app/views/serverList.js
index 2a5fe23d7..d8c3c2924 100644
--- a/app/views/serverList.js
+++ b/app/views/serverList.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Navigation } from 'react-native-navigation';
 import Zeroconf from 'react-native-zeroconf';
-import { View, Text, SectionList, Button, StyleSheet } from 'react-native';
+import { View, Text, SectionList, StyleSheet } from 'react-native';
 
 import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
@@ -11,7 +12,8 @@ const styles = StyleSheet.create({
 		flex: 1,
 		flexDirection: 'column',
 		justifyContent: 'center',
-		alignItems: 'stretch'
+		alignItems: 'stretch',
+		backgroundColor: '#fff'
 	},
 	input: {
 		height: 40,
@@ -49,19 +51,9 @@ const zeroconf = new Zeroconf();
 
 export default class ListServerView extends React.Component {
 	static propTypes = {
-		navigation: PropTypes.object.isRequired
+		navigator: PropTypes.object.isRequired
 	}
 
-	static navigationOptions = ({ navigation }) => ({
-		title: 'Servers',
-		headerRight: (
-			<Button
-				title='Add'
-				onPress={() => navigation.navigate('NewServerModal')}
-			/>
-		)
-	});
-
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -76,6 +68,20 @@ export default class ListServerView extends React.Component {
 		zeroconf.scan('http', 'tcp', 'local.');
 
 		this.state = this.getState();
+
+		this.props.navigator.setTitle({
+			title: 'Servers'
+		});
+
+		this.props.navigator.setButtons({
+			rightButtons: [{
+				id: 'add',
+				title: 'Add'
+			}],
+			animated: true
+		});
+
+		this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
 	}
 
 	componentWillUnmount() {
@@ -84,12 +90,33 @@ export default class ListServerView extends React.Component {
 		zeroconf.removeListener('update', this.updateState);
 	}
 
-	onPressItem(item) {
+	onNavigatorEvent = (event) => {
+		if (event.type === 'NavBarButtonPress') {
+			if (event.id === 'add') {
+				Navigation.showModal({
+					screen: 'NewServer',
+					animationType: 'slide-up'
+					// animationType: 'none'
+				});
+			}
+			if (event.id === 'close') {
+				Navigation.dismissModal({
+					animationType: 'slide-down'
+				});
+			}
+		}
+	}
+
+	onPressItem = (item) => {
 		RocketChat.currentServer = item.id;
 
 		RocketChat.connect();
-		this.props.navigation.state.params.onSelect();
-		this.props.navigation.dispatch({ type: 'Navigation/BACK' });
+
+		Navigation.dismissModal({
+			animationType: 'slide-down'
+		});
+		// this.props.navigation.state.params.onSelect();
+		// this.props.navigation.dispatch({ type: 'Navigation/BACK' });
 	}
 
 	getState = () => {
diff --git a/app/views/serverNew.js b/app/views/serverNew.js
index 7c859c3ac..772168e1a 100644
--- a/app/views/serverNew.js
+++ b/app/views/serverNew.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Navigation } from 'react-native-navigation';
 import { Text, TextInput, View, StyleSheet } from 'react-native';
 import _ from 'underscore';
 
@@ -11,7 +12,8 @@ const styles = StyleSheet.create({
 	view: {
 		flex: 1,
 		flexDirection: 'column',
-		alignItems: 'stretch'
+		alignItems: 'stretch',
+		backgroundColor: '#fff'
 	},
 	input: {
 		height: 40,
@@ -49,7 +51,7 @@ const styles = StyleSheet.create({
 
 export default class NewServerView extends React.Component {
 	static propTypes = {
-		navigation: PropTypes.object.isRequired
+		navigator: PropTypes.object.isRequired
 	}
 
 	static navigationOptions = () => ({
@@ -79,7 +81,9 @@ export default class NewServerView extends React.Component {
 			this.inputElement.blur();
 			this.validateServer(url).then(() => {
 				RocketChat.currentServer = url;
-				this.props.navigation.dispatch({ type: 'Navigation/BACK' });
+				Navigation.dismissModal({
+					animationType: 'slide-down'
+				});
 			}).catch(() => {
 				this.setState({
 					editable: true
@@ -91,12 +95,36 @@ export default class NewServerView extends React.Component {
 
 	componentDidMount() {
 		this._mounted = true;
+
+		this.props.navigator.setTitle({
+			title: 'New server'
+		});
+
+		this.props.navigator.setButtons({
+			rightButtons: [{
+				id: 'close',
+				title: 'Cancel'
+			}],
+			animated: true
+		});
+
+		this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
 	}
 
 	componentWillUnmount() {
 		this._mounted = false;
 	}
 
+	onNavigatorEvent = (event) => {
+		if (event.type === 'NavBarButtonPress') {
+			if (event.id === 'close') {
+				Navigation.dismissModal({
+					animationType: 'slide-down'
+				});
+			}
+		}
+	}
+
 	onChangeText = (text) => {
 		this.setState({ text });
 
diff --git a/index.android.js b/index.android.js
index b40fcb877..0db019b3d 100644
--- a/index.android.js
+++ b/index.android.js
@@ -1,6 +1 @@
-
-import { AppRegistry } from 'react-native';
-// import { App } from './app/index';
-import navigation from './app/navigation';
-
-AppRegistry.registerComponent('RocketChatRN', () => navigation);
+import './app/navigation';
diff --git a/index.ios.js b/index.ios.js
index b40fcb877..0db019b3d 100644
--- a/index.ios.js
+++ b/index.ios.js
@@ -1,6 +1 @@
-
-import { AppRegistry } from 'react-native';
-// import { App } from './app/index';
-import navigation from './app/navigation';
-
-AppRegistry.registerComponent('RocketChatRN', () => navigation);
+import './app/navigation';
diff --git a/ios/RocketChatRN.xcodeproj/project.pbxproj b/ios/RocketChatRN.xcodeproj/project.pbxproj
index 960d9faf5..3f744f76e 100644
--- a/ios/RocketChatRN.xcodeproj/project.pbxproj
+++ b/ios/RocketChatRN.xcodeproj/project.pbxproj
@@ -5,6 +5,7 @@
 	};
 	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 */; };
@@ -50,10 +51,12 @@
 		AE5D35882AE04CC29630FB3D /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = DC6EE17B5550465E98C70FF0 /* Entypo.ttf */; };
 		B8E79AF41F3CD167005B464F /* Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB61A68108700A75B9A /* Info.plist */; };
 		BED2B77AA660460E8BC9F8E0 /* libRNFetchBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6533FB90166345D29F1B91C0 /* libRNFetchBlob.a */; };
+		C03BD55E219B47C9BCA9CABE /* libReactNativeNavigation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 841151A0236F49EBBC246374 /* libReactNativeNavigation.a */; };
+		C758F0BD5C3244E2BA073E61 /* libRNImagePicker.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B696712EE2345A59F007A88 /* libRNImagePicker.a */; };
 		CBD0E0A35B174C4DBFED3B31 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E528DE3A405E43B4A37ABA68 /* Zocial.ttf */; };
+		D584DAA0EC56473197D4F6BD /* libAutoGrowTextInput.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 91CD29A0CB114F3E9D50596E /* libAutoGrowTextInput.a */; };
 		D6408D9E4A864FF6BA986857 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 8A2DD67ADD954AD9873F45FC /* SimpleLineIcons.ttf */; };
 		EF736EF520A64AE8820E684A /* libRealmReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = DF26CC845883492D8AC8869B /* libRealmReact.a */; };
-		C758F0BD5C3244E2BA073E61 /* libRNImagePicker.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B696712EE2345A59F007A88 /* libRNImagePicker.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -274,6 +277,27 @@
 			remoteGlobalIDString = F60690131CA2766F0003FB26;
 			remoteInfo = RealmReact;
 		};
+		60B837611F3F6F4C00677E56 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 09FBCE5FF9B547D69122C25F /* AutoGrowTextInput.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = D81C36501CDB667F00777FB9;
+			remoteInfo = AutoGrowTextInput;
+		};
+		60B837831F3F6F4C00677E56 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 4B38C7E37A8748E0BC665078 /* RNImagePicker.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 014A3B5C1C6CF33500B6D375;
+			remoteInfo = RNImagePicker;
+		};
+		60B8378C1F3F6F4C00677E56 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 6F85FE1D97EC4DDBA7286733 /* ReactNativeNavigation.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = D8AFADBD1BEE6F3F00A4592D;
+			remoteInfo = ReactNativeNavigation;
+		};
 		78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
@@ -329,6 +353,7 @@
 		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		00E356F21AD99517003FC87E /* RocketChatRNTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RocketChatRNTests.m; sourceTree = "<group>"; };
 		06BB44DD4855498082A744AD /* libz.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libz.tbd; path = usr/lib/libz.tbd; sourceTree = SDKROOT; };
+		09FBCE5FF9B547D69122C25F /* AutoGrowTextInput.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = AutoGrowTextInput.xcodeproj; path = "../node_modules/react-native-autogrow-textinput/ios/AutoGrowTextInput.xcodeproj"; sourceTree = "<group>"; };
 		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
 		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = "<group>"; };
 		13B07F961A680F5B00A75B9A /* RocketChatRN.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = RocketChatRN.app; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -345,16 +370,21 @@
 		2D02E4901E0B4A5D006451C7 /* RocketChatRN-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "RocketChatRN-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
 		2EADB1731B5E47D093292B59 /* MaterialCommunityIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialCommunityIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf"; sourceTree = "<group>"; };
 		2F5CA2CDA66D46E99B8C184A /* MaterialIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = MaterialIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf"; sourceTree = "<group>"; };
+		3B696712EE2345A59F007A88 /* libRNImagePicker.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNImagePicker.a; sourceTree = "<group>"; };
 		41FE03CD3B554249859F01BA /* RNZeroconf.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNZeroconf.xcodeproj; path = "../node_modules/react-native-zeroconf/ios/RNZeroconf.xcodeproj"; sourceTree = "<group>"; };
+		4B38C7E37A8748E0BC665078 /* RNImagePicker.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNImagePicker.xcodeproj; path = "../node_modules/react-native-image-picker/ios/RNImagePicker.xcodeproj"; sourceTree = "<group>"; };
 		4CD38E4891ED4601B7481448 /* RNFetchBlob.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNFetchBlob.xcodeproj; path = "../node_modules/react-native-fetch-blob/ios/RNFetchBlob.xcodeproj"; sourceTree = "<group>"; };
 		5A0EEFAF8AB14F5B9E796CDD /* libRNVectorIcons.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNVectorIcons.a; sourceTree = "<group>"; };
 		5A8684E7C27E426C9206E980 /* RealmReact.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RealmReact.xcodeproj; path = "../node_modules/realm/react-native/ios/RealmReact.xcodeproj"; sourceTree = "<group>"; };
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
 		6533FB90166345D29F1B91C0 /* libRNFetchBlob.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNFetchBlob.a; sourceTree = "<group>"; };
+		6F85FE1D97EC4DDBA7286733 /* ReactNativeNavigation.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = ReactNativeNavigation.xcodeproj; path = "../node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj"; sourceTree = "<group>"; };
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		7A30DA4B2D474348824CD05B /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
+		841151A0236F49EBBC246374 /* libReactNativeNavigation.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libReactNativeNavigation.a; sourceTree = "<group>"; };
 		8A2DD67ADD954AD9873F45FC /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = SimpleLineIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; };
+		91CD29A0CB114F3E9D50596E /* libAutoGrowTextInput.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libAutoGrowTextInput.a; sourceTree = "<group>"; };
 		9A1E1766CCB84C91A62BD5A6 /* Foundation.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Foundation.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Foundation.ttf"; sourceTree = "<group>"; };
 		A18EFC3B0CFE40E0918A8F0C /* EvilIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = EvilIcons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf"; 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; };
@@ -365,8 +395,6 @@
 		DF26CC845883492D8AC8869B /* libRealmReact.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRealmReact.a; sourceTree = "<group>"; };
 		E528DE3A405E43B4A37ABA68 /* Zocial.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Zocial.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; };
 		F88C6541BD764BEEABB87272 /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; };
-		4B38C7E37A8748E0BC665078 /* RNImagePicker.xcodeproj */ = {isa = PBXFileReference; name = "RNImagePicker.xcodeproj"; path = "../node_modules/react-native-image-picker/ios/RNImagePicker.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
-		3B696712EE2345A59F007A88 /* libRNImagePicker.a */ = {isa = PBXFileReference; name = "libRNImagePicker.a"; path = "libRNImagePicker.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -401,6 +429,8 @@
 				77C35F50C01C43668188886C /* libRNVectorIcons.a in Frameworks */,
 				8A159EDB97C44E52AF62D69C /* libRNSVG.a in Frameworks */,
 				C758F0BD5C3244E2BA073E61 /* libRNImagePicker.a in Frameworks */,
+				C03BD55E219B47C9BCA9CABE /* libReactNativeNavigation.a in Frameworks */,
+				D584DAA0EC56473197D4F6BD /* libAutoGrowTextInput.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -564,6 +594,30 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		60B8375C1F3F6F4B00677E56 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				60B837841F3F6F4C00677E56 /* libRNImagePicker.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		60B8375E1F3F6F4B00677E56 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				60B837621F3F6F4C00677E56 /* libAutoGrowTextInput.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		60B837891F3F6F4C00677E56 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				60B8378D1F3F6F4C00677E56 /* libReactNativeNavigation.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		78C398B11ACF4ADC00677621 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -593,6 +647,8 @@
 				22A8B76C8EBA443BB97CE82D /* RNVectorIcons.xcodeproj */,
 				C23AEF1D9EBE4A38A1A6B97B /* RNSVG.xcodeproj */,
 				4B38C7E37A8748E0BC665078 /* RNImagePicker.xcodeproj */,
+				6F85FE1D97EC4DDBA7286733 /* ReactNativeNavigation.xcodeproj */,
+				09FBCE5FF9B547D69122C25F /* AutoGrowTextInput.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -813,6 +869,10 @@
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
 			projectDirPath = "";
 			projectReferences = (
+				{
+					ProductGroup = 60B8375E1F3F6F4B00677E56 /* Products */;
+					ProjectRef = 09FBCE5FF9B547D69122C25F /* AutoGrowTextInput.xcodeproj */;
+				},
 				{
 					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
 					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
@@ -857,6 +917,10 @@
 					ProductGroup = 146834001AC3E56700842450 /* Products */;
 					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
 				},
+				{
+					ProductGroup = 60B837891F3F6F4C00677E56 /* Products */;
+					ProjectRef = 6F85FE1D97EC4DDBA7286733 /* ReactNativeNavigation.xcodeproj */;
+				},
 				{
 					ProductGroup = 607D60ED1F325B7D00F639C4 /* Products */;
 					ProjectRef = 5A8684E7C27E426C9206E980 /* RealmReact.xcodeproj */;
@@ -865,6 +929,10 @@
 					ProductGroup = B8E79A881F3CCC6C005B464F /* Products */;
 					ProjectRef = 4CD38E4891ED4601B7481448 /* RNFetchBlob.xcodeproj */;
 				},
+				{
+					ProductGroup = 60B8375C1F3F6F4B00677E56 /* Products */;
+					ProjectRef = 4B38C7E37A8748E0BC665078 /* RNImagePicker.xcodeproj */;
+				},
 				{
 					ProductGroup = B8E79AC41F3CCCA7005B464F /* Products */;
 					ProjectRef = C23AEF1D9EBE4A38A1A6B97B /* RNSVG.xcodeproj */;
@@ -1092,6 +1160,27 @@
 			remoteRef = 607D61151F325B7E00F639C4 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		60B837621F3F6F4C00677E56 /* libAutoGrowTextInput.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libAutoGrowTextInput.a;
+			remoteRef = 60B837611F3F6F4C00677E56 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		60B837841F3F6F4C00677E56 /* libRNImagePicker.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRNImagePicker.a;
+			remoteRef = 60B837831F3F6F4C00677E56 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		60B8378D1F3F6F4C00677E56 /* libReactNativeNavigation.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libReactNativeNavigation.a;
+			remoteRef = 60B8378C1F3F6F4C00677E56 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -1292,12 +1381,16 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)/../node_modules/react-native-navigation/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-autogrow-textinput/ios",
 				);
 				INFOPLIST_FILE = RocketChatRNTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1322,12 +1415,16 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)/../node_modules/react-native-navigation/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-autogrow-textinput/ios",
 				);
 				INFOPLIST_FILE = RocketChatRNTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1354,6 +1451,8 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)/../node_modules/react-native-navigation/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-autogrow-textinput/ios",
 				);
 				INFOPLIST_FILE = RocketChatRN/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1385,6 +1484,8 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)/../node_modules/react-native-navigation/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-autogrow-textinput/ios",
 				);
 				INFOPLIST_FILE = RocketChatRN/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1421,11 +1522,15 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)/../node_modules/react-native-navigation/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-autogrow-textinput/ios",
 				);
 				INFOPLIST_FILE = "RocketChatRN-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1460,11 +1565,15 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
+					"$(SRCROOT)/../node_modules/react-native-navigation/ios/**",
+					"$(SRCROOT)/../node_modules/react-native-autogrow-textinput/ios",
 				);
 				INFOPLIST_FILE = "RocketChatRN-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1494,6 +1603,8 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.RocketChatRN-tvOSTests";
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1519,6 +1630,8 @@
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = (
 					"$(inherited)",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "com.facebook.REACT.RocketChatRN-tvOSTests";
 				PRODUCT_NAME = "$(TARGET_NAME)";
diff --git a/ios/RocketChatRN/AppDelegate.m b/ios/RocketChatRN/AppDelegate.m
index 58d7eca6f..e697abcee 100644
--- a/ios/RocketChatRN/AppDelegate.m
+++ b/ios/RocketChatRN/AppDelegate.m
@@ -9,6 +9,11 @@
 
 #import "AppDelegate.h"
 
+// **********************************************
+// *** DON'T MISS: THE NEXT LINE IS IMPORTANT ***
+// **********************************************
+#import "RCCManager.h"
+
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 
@@ -20,17 +25,24 @@
 
   jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
 
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
-                                                      moduleName:@"RocketChatRN"
-                                               initialProperties:nil
-                                                   launchOptions:launchOptions];
-  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
-
+  // **********************************************
+  // *** DON'T MISS: THIS IS HOW WE BOOTSTRAP *****
+  // **********************************************
   self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
-  rootViewController.view = rootView;
-  self.window.rootViewController = rootViewController;
-  [self.window makeKeyAndVisible];
+  self.window.backgroundColor = [UIColor whiteColor];
+  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation launchOptions:launchOptions];
+
+//  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
+//                                                      moduleName:@"RocketChatRN"
+//                                               initialProperties:nil
+//                                                   launchOptions:launchOptions];
+//  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
+//
+//  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+//  UIViewController *rootViewController = [UIViewController new];
+//  rootViewController.view = rootView;
+//  self.window.rootViewController = rootViewController;
+//  [self.window makeKeyAndVisible];
   return YES;
 }
 
diff --git a/package.json b/package.json
index bd8f8ba14..5c5d9b9b7 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "react-native-image-picker": "^0.26.3",
     "react-native-img-cache": "^1.4.0",
     "react-native-meteor": "^1.1.0",
+    "react-native-navigation": "^1.1.193",
     "react-native-optimized-flatlist": "^1.0.1",
     "react-native-svg": "^5.4.1",
     "react-native-svg-image": "^1.1.4",