(fix) add nav to messenger screen and android tweaks

src/messenger/MessengerScreen.js

@@ -23,6 +23,12 @@ import {ComponentsStyle} from '../styles/Components';
 import MessengerTabIcon from './MessengerTabIcon';
 import ErrorLoading from '../common/components/ErrorLoading';
 import i18n from '../common/services/i18n.service';
+import featuresService from '../common/services/features.service';
+
+const tabBarIcon = !featuresService.has('navigation-2020')
+  ? ({tintColor}) => <MessengerTabIcon tintColor={tintColor} />
+  : null;
+
 
 /**
  * Messenger Conversarion List Screen
@@ -36,7 +42,8 @@ class MessengerScreen extends Component {
   };
 
   static navigationOptions = {
-    tabBarIcon: ({tintColor}) => <MessengerTabIcon tintColor={tintColor} />,
+    tabBarIcon: tabBarIcon,
+    header: null,
   };
 
   /**
@@ -227,6 +234,7 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingLeft: 5,
     paddingRight: 5,
+    paddingTop: 5,
     backgroundColor: '#FFF',
   },
   body: {

src/messenger/MessengerTabIconNew.js

+import React, { Component } from 'react';
+
+import {
+  StyleSheet,
+  View,
+  Platform,
+} from 'react-native';
+
+import colors from '../styles/Colors';
+import { observer, inject } from 'mobx-react/native';
+import FAIcon from 'react-native-vector-icons/FontAwesome';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+import { CommonStyle as CS } from '../styles/Common';
+
+@inject('messengerList')
+@observer
+export default class MessengerTabIconNew extends Component {
+
+  navToMessenger = () => this.props.navigation.push('Messenger');
+
+  /**
+   * Render
+   */
+  render() {
+    const tintColor = this.props.tintColor;
+    return (
+      <View>
+        <Icon name="chat-bubble-outline" size={24}  style={[styles.button, CS.colorIcon]} onPress={this.navToMessenger}/>
+        { this.props.messengerList.unread ? <FAIcon name="circle" size={10} color='rgba(70, 144, 223, 1)' style={styles.unread} /> : null}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  unread: {
+    zIndex: 9999,
+    opacity: 1,
+    position: 'absolute',
+    top: 0,
+    left: 15
+  },
+  button: {
+    paddingHorizontal: 8,
+  },
+});

src/navigation/NavigationStack.js

@@ -56,6 +56,7 @@ import EmailConfirmationScreen from '../onboarding/EmailConfirmationScreen';
 import featuresService from '../common/services/features.service';
 import ThemedStyles from '../styles/ThemedStyles';
 import { View } from 'react-native';
+import MessengerScreen from '../messenger/MessengerScreen';
 
 
 const hideHeader = {headerShown: false};
@@ -109,6 +110,7 @@ const AppStack = function(props) {
       <Stack.Screen name="NotSupported" component={NotSupportedScreen} />
       <Stack.Screen name="OnboardingScreen" component={OnboardingScreen} />
       <Stack.Screen name="OnboardingScreenNew" component={OnboardingScreenNew} />
+      <Stack.Screen name="Messenger" component={MessengerScreen} />
     </Stack.Navigator>
   );
 };

src/topbar/SearchComponent.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { observer } from 'mobx-react/native'
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import { StyleSheet, View, SafeAreaView } from 'react-native';
+import { StyleSheet, View, SafeAreaView, Platform } from 'react-native';
 import i18n from '../common/services/i18n.service';
 import TextInput from '../common/components/TextInput';
 import SearchResult from './SearchResultComponent';
@@ -63,12 +63,12 @@ class SearchComponent extends Component {
           backdropOpacity={ 1 }
         >
           <SafeAreaView style={[CS.flexContainer, CS.backgroundSecondary]}>
-            <View style={[styles.header, CS.marginTop4x, CS.marginBottom4x]}>
+            <View style={[styles.header, CS.marginBottom4x, Platform.OS === 'android' ? CS.marginTop2x : CS.marginTop4x]}>
               <View style={[CS.rowJustifyStart, CS.paddingLeft2x]}>
                 <Icon 
                   name="search"
                   size={24}
-                  style={[CS.colorIcon, CS.marginRight2x]}
+                  style={[CS.colorIcon, CS.marginRight2x, Platform.OS === 'android' ? CS.centered : null]}
                 />
                 <TextInput
                   placeholder={i18n.t('discovery.search')}
@@ -82,7 +82,7 @@ class SearchComponent extends Component {
                 onPress={this.toggleSearching} 
                 name="close" 
                 size={18} 
-                style={[styles.button, CS.colorIcon]}
+                style={[styles.button, CS.colorIcon, Platform.OS === 'android' ? CS.centered : null]}
               />
             </View>
 

src/topbar/TopbarNew.js

@@ -23,6 +23,7 @@ import SearchComponent from './SearchComponent';
 import navigation from '../navigation/NavigationService';
 import ThemedStyles from '../styles/ThemedStyles';
 import { SafeAreaConsumer } from 'react-native-safe-area-context';
+import MessengerTabIcon from '../messenger/MessengerTabIconNew';
 
 const forceInset = isIphoneX ? {top: 10} : null
 
@@ -54,7 +55,7 @@ export default class TopbarNew extends Component {
                 <Text style={[CS.titleText, CS.colorPrimaryText, styles.lineHeight0]} >{this.props.title}</Text>
               </View>
               <View style={styles.topbarRight}>
-                <Icon name="chat-bubble-outline" size={24} style={[styles.button, CS.colorIcon]}/>
+                <MessengerTabIcon navigation={navigation}/>
                 <SearchComponent user={this.props.user} navigation={navigation} />
               </View>
             </View>