[NEW] Changed navigation library to react-navigation. (#41)

* Changed navigation library to react-navigation. Refactoring on sagas to remove navigation navigation flow do it in views. Added new modal library. Renamed view files to the same name of their classes. Added support to redux-devtools using the chrome extension through Remote devtools menu. Some components was refactored to reduce complexity and more legibility. * Remove react-native-navigation from Android * Adding servers to drawer menu, allowing server switch. * Sidebar component * opss :x fix add server * opss :x fix add server * Fixed add server navigation issues, fixed empty and slow Rooms List and Chat Messages * Disable cleanup everytime * some fixes * some fixes * fix? * . * Fixed logo not displaying when app is loading or signing to server * Fixed logo in loading and login * Update LoginView.js * Update PublicRoutes.js
RocketChat · Sep 21, 2017 · 3c6c266 · 3c6c266
1 parent 909f31b
commit 3c6c266
Show file tree

Hide file tree

Showing 46 changed files with 984 additions and 804 deletions.
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -235,6 +235,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
                 "position": "absolute",
               },
               Object {
+                "borderRadius": 20,
                 "height": 40,
                 "width": 40,
               },
@@ -338,6 +339,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
                 "position": "absolute",
               },
               Object {
+                "borderRadius": 20,
                 "height": 40,
                 "width": 40,
               },
@@ -441,6 +443,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
                 "position": "absolute",
               },
               Object {
+                "borderRadius": 20,
                 "height": 40,
                 "width": 40,
               },
@@ -565,6 +568,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
                 "position": "absolute",
               },
               Object {
+                "borderRadius": 20,
                 "height": 40,
                 "width": 40,
               },
@@ -689,6 +693,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
                 "position": "absolute",
               },
               Object {
+                "borderRadius": 20,
                 "height": 40,
                 "width": 40,
               },
@@ -813,6 +818,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
                 "position": "absolute",
               },
               Object {
+                "borderRadius": 20,
                 "height": 40,
                 "width": 40,
               },
@@ -937,6 +943,7 @@ exports[`Storyshots Channel Cell Direct Messages 1`] = `
                 "position": "absolute",
               },
               Object {
+                "borderRadius": 20,
                 "height": 40,
                 "width": 40,
               },

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -144,7 +144,6 @@ 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
@@ -1,7 +1,15 @@
 package com.rocketchatrn;
 
-import com.reactnativenavigation.controllers.SplashActivity;
+import com.facebook.react.ReactActivity;
 
-public class MainActivity extends SplashActivity {
+public class MainActivity extends ReactActivity {
 
+    /**
+     * 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
@@ -3,7 +3,6 @@
 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;
@@ -14,31 +13,40 @@
 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 NavigationApplication {
+public class MainApplication extends Application implements ReactApplication {
+
+  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
     @Override
-    public boolean isDebug() {
-      // Make sure you are using BuildConfig from your own application
+    public boolean getUseDeveloperSupport() {
       return BuildConfig.DEBUG;
     }
 
+    @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-            new SvgPackage(),
-            new ImagePickerPackage(),
-            new VectorIconsPackage(),
-            new RNFetchBlobPackage(),
-            new ZeroconfReactPackage(),
-            new RealmReactPackage()
+			  new MainReactPackage(),
+        new SvgPackage(),
+        new ImagePickerPackage(),
+        new VectorIconsPackage(),
+        new RNFetchBlobPackage(),
+        new ZeroconfReactPackage(),
+        new RealmReactPackage()
       );
     }
+  };
 
-    @Override
-    public List<ReactPackage> createAdditionalReactPackages() {
-      return getPackages();
-    }
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+      return mReactNativeHost;
+  }
+
+	@Override
+ 	public void onCreate() {
+   	super.onCreate();
+   	SoLoader.init(this, /* native exopackage */ false);
+ 	}
 }
diff --git a/android/settings.gradle b/android/settings.gradle
@@ -1,6 +1,4 @@
 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/containers/Avatar.js b/app/containers/Avatar.js
@@ -36,7 +36,8 @@ class Avatar extends React.PureComponent {
 
 		const avatarStyle = {
 			width: size,
-			height: size
+			height: size,
+			borderRadius
 		};
 
 		const uri = avatar || `${ baseUrl }/avatar/${ text }`;

diff --git a/app/containers/Banner.js b/app/containers/Banner.js
@@ -30,9 +30,29 @@ export default class Banner extends React.PureComponent {
 		authenticating: PropTypes.bool,
 		offline: PropTypes.bool
 	}
-
+	componentWillMount() {
+		this.state = {
+			slow: false
+		};
+		this.timer = setTimeout(() => this.setState({ slow: true }), 5000);
+	}
+	componentWillUnmount() {
+		clearTimeout(this.timer);
+	}
 	render() {
 		const { connecting, authenticating, offline } = this.props;
+
+		if (!this.state.slow) {
+			return null;
+		}
+
+		if (offline) {
+			return (
+				<View style={[styles.bannerContainer, { backgroundColor: 'red' }]}>
+					<Text style={[styles.bannerText, { color: '#a00' }]}>offline...</Text>
+				</View>
+			);
+		}
 		if (connecting) {
 			return (
 				<View style={[styles.bannerContainer, { backgroundColor: '#0d0' }]}>
@@ -48,13 +68,7 @@ export default class Banner extends React.PureComponent {
 				</View>
 			);
 		}
-		if (offline) {
-			return (
-				<View style={[styles.bannerContainer, { backgroundColor: 'red' }]}>
-					<Text style={[styles.bannerText, { color: '#a00' }]}>offline...</Text>
-				</View>
-			);
-		}
+
 		return null;
 	}
 }
diff --git a/app/containers/Message.js b/app/containers/Message.js
@@ -10,7 +10,8 @@ import User from './message/User';
 
 const styles = StyleSheet.create({
 	content: {
-		flexGrow: 1
+		flexGrow: 1,
+		flexShrink: 1
 	},
 	message: {
 		padding: 12,
@@ -29,7 +30,11 @@ export default class Message extends React.PureComponent {
 	}
 
 	attachments() {
-		return this.props.item.attachments.length ? <Card data={this.props.item.attachments[0]} /> : null;
+		return this.props.item.attachments.length ? (
+			<Card
+				data={this.props.item.attachments[0]}
+			/>
+		) : null;
 	}
 
 	render() {

diff --git a/app/containers/Routes.js b/app/containers/Routes.js
@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { View, Image } from 'react-native';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as Animatable from 'react-native-animatable';
+import { appInit } from '../actions';
+
+import styles from '../views/Styles';
+
+import AuthRoutes from './routes/AuthRoutes';
+import PublicRoutes from './routes/PublicRoutes';
+
+@connect(
+	state => ({
+		login: state.login,
+		app: state.app
+	}),
+	dispatch => bindActionCreators({
+		appInit
+	}, dispatch)
+)
+export default class Routes extends React.Component {
+	static propTypes = {
+		login: PropTypes.object.isRequired,
+		app: PropTypes.object.isRequired,
+		appInit: PropTypes.func.isRequired
+	}
+
+	componentWillMount() {
+		this.props.appInit();
+	}
+	render() {
+		const { login, app } = this.props;
+
+		if (app.starting) {
+			return (
+				<View style={styles.logoContainer}>
+					<Animatable.Text
+						animation='pulse'
+						easing='ease-out'
+						iterationCount='infinite'
+						style={{ textAlign: 'center' }}
+					>
+						<Image style={styles.logo} source={require('../images/logo.png')} />
+					</Animatable.Text>
+				</View>
+			);
+		}
+
+		if ((login.token && !login.failure) || app.ready) {
+			return (<AuthRoutes />);
+		}
+
+		return (<PublicRoutes />);
+	}
+}