[FIX] Few fixes on themes (#1477)

android/app/src/main/AndroidManifest.xml

@@ -20,14 +20,21 @@
 		android:networkSecurityConfig="@xml/network_security_config"
 	>
 		<activity
+      android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
+      android:theme="@style/BootTheme">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
+    </activity>
+		<activity
 			android:name=".MainActivity"
 			android:label="@string/app_name"
 			android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
 			android:launchMode="singleTask"
-			android:windowSoftInputMode="adjustResize">
+			android:windowSoftInputMode="adjustResize"
+			android:exported="true">
 			<intent-filter>
-				<action android:name="android.intent.action.MAIN" />
-				<category android:name="android.intent.category.LAUNCHER" />
 				<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
 			</intent-filter>
 			<intent-filter android:label="@string/app_name">

android/app/src/main/java/chat/rocket/reactnative/MainActivity.java

@@ -5,16 +5,16 @@
 import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 import android.os.Bundle;
 import com.facebook.react.ReactFragmentActivity;
-import org.devio.rn.splashscreen.SplashScreen;
 import android.content.Intent;
 import android.content.res.Configuration;
+import com.zoontek.rnbootsplash.RNBootSplash;
 
 public class MainActivity extends ReactFragmentActivity {
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
-        SplashScreen.show(this);
-        super.onCreate(null);
+        super.onCreate(savedInstanceState);
+        RNBootSplash.show(R.drawable.launch_screen, MainActivity.this);
     }
 
     /**

android/app/src/main/res/drawable/launch_screen.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
+  <!-- the background color. it can be a system color or a custom one defined in colors.xml -->
+  <item android:drawable="@color/splashBackground" />
+  <item>
+    <!-- the app logo, centered horizontally and vertically -->
+    <bitmap
+      android:src="@drawable/splash"
+      android:gravity="center" />
+  </item>
+</layer-list>

android/app/src/main/res/values-night/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+	<item name="splashBackground" type="color">#000000</item>
+</resources>

android/app/src/main/res/values/colors.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 	<color name="primary_dark">#660B0B0B</color>
-	<item name="splashBackground" type="color">#FFFFFF</item>
+	<item name="splashBackground" type="color">#eeeff1</item>
 	<item name="notification_text" type="color">#CC3333</item>
 </resources>

android/app/src/main/res/values/styles.xml

@@ -1,7 +1,8 @@
 <resources>
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <item name="android:colorEdgeEffect">#aaaaaa</item>
-        <item name="android:textColor">#000000</item>
+        <item name="colorPrimaryDark">@color/splashBackground</item>
+        <item name="android:navigationBarColor">@color/splashBackground</item>
     </style>
 
     <style name="Share.Window" parent="android:Theme">
@@ -18,4 +19,10 @@
         <item name="android:backgroundDimEnabled">true</item>
         <item name="android:windowAnimationStyle">@style/Share.Window</item>
     </style>
+
+    <style name="BootTheme" parent="AppTheme">
+        <item name="android:background">@drawable/launch_screen</item>
+        <item name="colorPrimaryDark">@color/splashBackground</item>
+        <item name="android:navigationBarColor">@color/splashBackground</item>
+    </style>
 </resources>

app/containers/Status/Status.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from 'react-native';
-import { STATUS_COLORS } from '../../constants/colors';
+import { STATUS_COLORS, themes } from '../../constants/colors';
 
-const Status = React.memo(({ status, size, style }) => (
+const Status = React.memo(({
+	status, size, style, theme
+}) => (
 	<View
 		style={
 			[
@@ -12,19 +14,22 @@ const Status = React.memo(({ status, size, style }) => (
 					borderRadius: size,
 					width: size,
 					height: size,
-					backgroundColor: STATUS_COLORS[status]
+					backgroundColor: STATUS_COLORS[status],
+					borderColor: themes[theme].backgroundColor
 				}
 			]}
 	/>
 ));
 Status.propTypes = {
 	status: PropTypes.string,
 	size: PropTypes.number,
-	style: PropTypes.any
+	style: PropTypes.any,
+	theme: PropTypes.string
 };
 Status.defaultProps = {
 	status: 'offline',
-	size: 16
+	size: 16,
+	theme: 'light'
 };
 
 export default Status;

app/containers/Status/index.js

@@ -3,26 +3,30 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
 import Status from './Status';
+import { withTheme } from '../../theme';
 
 class StatusContainer extends React.PureComponent {
 	static propTypes = {
 		style: PropTypes.any,
 		size: PropTypes.number,
-		status: PropTypes.string
+		status: PropTypes.string,
+		theme: PropTypes.string
 	};
 
 	static defaultProps = {
 		size: 16
 	}
 
 	render() {
-		const { style, size, status } = this.props;
-		return <Status size={size} style={style} status={status} />;
+		const {
+			style, size, status, theme
+		} = this.props;
+		return <Status size={size} style={style} status={status} theme={theme} />;
 	}
 }
 
 const mapStateToProps = (state, ownProps) => ({
 	status: state.meteor.connected ? state.activeUsers[ownProps.id] : 'offline'
 });
 
-export default connect(mapStateToProps)(StatusContainer);
+export default connect(mapStateToProps)(withTheme(StatusContainer));

app/containers/markdown/AtMention.js

@@ -40,7 +40,7 @@ const AtMention = React.memo(({
 
 	return (
 		<Text
-			style={[preview ? { ...styles.text, color: themes[theme].titleText } : mentionStyle, ...style]}
+			style={[preview ? { ...styles.text, color: themes[theme].bodyText } : mentionStyle, ...style]}
 			onPress={preview ? undefined : handlePress}
 		>
 			{`@${ mention }`}

app/containers/markdown/Emoji.js

@@ -25,7 +25,7 @@ const Emoji = React.memo(({
 	return (
 		<Text
 			style={[
-				{ color: themes[theme].titleText },
+				{ color: themes[theme].bodyText },
 				isMessageContainsOnlyEmoji ? styles.textBig : styles.text,
 				...style
 			]}

app/containers/markdown/Hashtag.js

@@ -21,15 +21,15 @@ const Hashtag = React.memo(({
 	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
 		return (
 			<Text
-				style={[preview ? { ...styles.text, color: themes[theme].titleText } : styles.mention, ...style]}
+				style={[preview ? { ...styles.text, color: themes[theme].bodyText } : styles.mention, ...style]}
 				onPress={preview ? undefined : handlePress}
 			>
 				{`#${ hashtag }`}
 			</Text>
 		);
 	}
 	return (
-		<Text style={[preview ? { ...styles.text, color: themes[theme].titleText } : styles.mention, ...style]}>
+		<Text style={[preview ? { ...styles.text, color: themes[theme].bodyText } : styles.mention, ...style]}>
 			{`#${ hashtag }`}
 		</Text>
 	);

app/containers/markdown/Link.js

@@ -25,7 +25,7 @@ const Link = React.memo(({
 			style={
 				!preview
 					? { ...styles.link, color: themes[theme].actionTintColor }
-					: { color: themes[theme].titleText }
+					: { color: themes[theme].bodyText }
 			}
 		>
 			{ childLength !== 0 ? children : link }

app/containers/markdown/ListItem.js

@@ -39,7 +39,7 @@ const ListItem = React.memo(({
 	return (
 		<View style={style.container}>
 			<View style={[{ width: bulletWidth }, style.bullet]}>
-				<Text style={{ color: themes[theme].titleText }}>
+				<Text style={{ color: themes[theme].bodyText }}>
 					{bullet}
 				</Text>
 			</View>

app/containers/markdown/TableCell.js

@@ -25,7 +25,7 @@ const TableCell = React.memo(({
 
 	return (
 		<View style={[...cellStyle, { width: CELL_WIDTH }]}>
-			<Text style={[textStyle, { color: themes[theme].titleText }]}>
+			<Text style={[textStyle, { color: themes[theme].bodyText }]}>
 				{children}
 			</Text>
 		</View>

app/containers/markdown/index.js

@@ -171,11 +171,11 @@ class Markdown extends PureComponent {
 					!preview
 						? {
 							...styles.codeInline,
-							color: themes[theme].titleText,
+							color: themes[theme].bodyText,
 							backgroundColor: themes[theme].bannerBackground,
 							borderColor: themes[theme].bannerBackground
 						}
-						: { ...styles.text, color: themes[theme].titleText },
+						: { ...styles.text, color: themes[theme].bodyText },
 					...style
 				]}
 			>
@@ -192,11 +192,11 @@ class Markdown extends PureComponent {
 					!preview
 						? {
 							...styles.codeBlock,
-							color: themes[theme].titleText,
+							color: themes[theme].bodyText,
 							backgroundColor: themes[theme].bannerBackground,
 							borderColor: themes[theme].bannerBackground
 						}
-						: { ...styles.text, color: themes[theme].titleText },
+						: { ...styles.text, color: themes[theme].bodyText },
 					...style
 				]}
 			>
@@ -216,7 +216,7 @@ class Markdown extends PureComponent {
 			return null;
 		}
 		return (
-			<Text style={[style, { color: themes[theme].titleText }]} numberOfLines={numberOfLines}>
+			<Text style={[style, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>
 				{children}
 			</Text>
 		);
@@ -297,7 +297,7 @@ class Markdown extends PureComponent {
 		const { numberOfLines, theme } = this.props;
 		const textStyle = styles[`heading${ level }Text`];
 		return (
-			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].titleText }]}>
+			<Text numberOfLines={numberOfLines} style={[textStyle, { color: themes[theme].bodyText }]}>
 				{children}
 			</Text>
 		);
@@ -390,7 +390,7 @@ class Markdown extends PureComponent {
 		}
 
 		if (!useMarkdown && !preview) {
-			return <Text style={[styles.text, { color: themes[theme].titleText }]} numberOfLines={numberOfLines}>{m}</Text>;
+			return <Text style={[styles.text, { color: themes[theme].bodyText }]} numberOfLines={numberOfLines}>{m}</Text>;
 		}
 
 		const ast = this.parser.parse(m);

app/containers/message/Content.js

@@ -16,7 +16,7 @@ const Content = React.memo((props) => {
 	let content = null;
 
 	if (props.tmid && !props.msg) {
-		content = <Text style={[styles.text, { color: themes[props.theme].titleText }]}>{I18n.t('Sent_an_attachment')}</Text>;
+		content = <Text style={[styles.text, { color: themes[props.theme].bodyText }]}>{I18n.t('Sent_an_attachment')}</Text>;
 	} else {
 		content = (
 			<Markdown

app/containers/message/Discussion.js

@@ -18,7 +18,7 @@ const Discussion = React.memo(({
 	return (
 		<>
 			<Text style={[styles.startedDiscussion, { color: themes[theme].auxiliaryText }]}>{I18n.t('Started_discussion')}</Text>
-			<Text style={[styles.text, { color: themes[theme].titleText }]}>{msg}</Text>
+			<Text style={[styles.text, { color: themes[theme].bodyText }]}>{msg}</Text>
 			<View style={styles.buttonContainer}>
 				<Touchable
 					onPress={onDiscussionPress}
@@ -28,7 +28,7 @@ const Discussion = React.memo(({
 				>
 					<>
 						<CustomIcon name='chat' size={20} style={styles.buttonIcon} color={themes[theme].buttonText} />
-						<Text style={[styles.buttonText, { color: themes[theme].titleText }]}>{buttonText}</Text>
+						<Text style={[styles.buttonText, { color: themes[theme].buttonText }]}>{buttonText}</Text>
 					</>
 				</Touchable>
 				<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>

app/containers/message/Reply.js

@@ -72,7 +72,7 @@ const Title = React.memo(({ attachment, timeFormat, theme }) => {
 	const time = attachment.ts ? moment(attachment.ts).format(timeFormat) : null;
 	return (
 		<View style={styles.authorContainer}>
-			{attachment.author_name ? <Text style={[styles.author, { color: themes[theme].titleText }]}>{attachment.author_name}</Text> : null}
+			{attachment.author_name ? <Text style={[styles.author, { color: themes[theme].bodyText }]}>{attachment.author_name}</Text> : null}
 			{time ? <Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{ time }</Text> : null}
 		</View>
 	);
@@ -116,8 +116,8 @@ const Fields = React.memo(({ attachment, theme }) => {
 		<View style={styles.fieldsContainer}>
 			{attachment.fields.map(field => (
 				<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-					<Text style={[styles.fieldTitle, { color: themes[theme].titleText }]}>{field.title}</Text>
-					<Text style={[styles.fieldValue, { color: themes[theme].titleText }]}>{field.value}</Text>
+					<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
+					<Text style={[styles.fieldValue, { color: themes[theme].bodyText }]}>{field.value}</Text>
 				</View>
 			))}
 		</View>

app/sagas/init.js

@@ -1,8 +1,8 @@
 import { AsyncStorage } from 'react-native';
 import { put, takeLatest, all } from 'redux-saga/effects';
-import SplashScreen from 'react-native-splash-screen';
 import RNUserDefaults from 'rn-user-defaults';
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
+import RNBootSplash from 'react-native-bootsplash';
 
 import * as actions from '../actions';
 import { selectServerRequest } from '../actions/server';
@@ -122,7 +122,7 @@ const start = function* start({ root }) {
 	} else if (root === 'outside') {
 		yield Navigation.navigate('OutsideStack');
 	}
-	SplashScreen.hide();
+	RNBootSplash.hide();
 };
 
 const root = function* root() {