App.js

@@ -66,8 +66,6 @@ import {
 
 let deepLinkUrl = '';
 
-const statusBarStyle = Platform.OS === 'ios' ? 'dark-content' : 'default';
-
 // init push service
 pushService.init();
 
@@ -196,18 +194,14 @@ class App extends Component<Props, State> {
     this.setState({appState: nextState})
   }
 
-  /**
-   * contructor
-   */
   constructor(props) {
     super(props);
-
-    if (!Text.defaultProps) {
-      Text.defaultProps = {};
-    }
-    Text.defaultProps.style = {
-      fontFamily: 'Roboto',
-      color: '#444',
+    let oldRender = Text.render;
+    Text.render = function (...args) {
+        let origin = oldRender.call(this, ...args);
+        return React.cloneElement(origin, {
+            style: [ThemedStyles.style.colorPrimaryText, { fontFamily: 'Roboto'}, origin.props.style]
+        });
     };
   }
 
@@ -327,6 +321,8 @@ class App extends Component<Props, State> {
 
     const isLoggedIn = sessionService.userLoggedIn;
 
+    const statusBarStyle = ThemedStyles.theme === 0 ? 'dark-content' : 'light-content';
+
     const app = (
       <SafeAreaProvider>
         <NavigationContainer

android/gradle.properties

@@ -20,8 +20,8 @@
 android.useAndroidX=true
 android.enableJetifier=true
 
-MYAPP_RELEASE_STORE_FILE=minds.keystore
-MYAPP_RELEASE_KEY_ALIAS=alias_name
+# MYAPP_RELEASE_STORE_FILE=minds.keystore
+# MYAPP_RELEASE_KEY_ALIAS=alias_name
 org.gradle.jvmargs=-Xmx2048m
 systemProp.org.gradle.internal.http.connectionTimeout=180000
 systemProp.org.gradle.internal.http.socketTimeout=180000

index.js

@@ -4,8 +4,8 @@ import "./global";
 
 import { AppRegistry, Platform } from 'react-native';
 import App from './App';
-import { useScreens } from 'react-native-screens';
-useScreens();
+import { enableScreens } from 'react-native-screens';
+enableScreens();
 
 // const modules = require.getModules();
 // const moduleIds = Object.keys(modules);

ios/Podfile.lock

@@ -283,7 +283,7 @@ PODS:
     - React
   - RNReanimated (1.7.0):
     - React
-  - RNScreens (2.0.0-beta.2):
+  - RNScreens (2.0.0-beta.4):
     - React
   - RNSentry (1.2.2):
     - React
@@ -539,7 +539,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 911d3b110a7a233a34c4f800e7188a84b75319c6
   RNLocalize: 07eb7a91d10021cdf59d80061ebf3adb8a5b5688
   RNReanimated: 031fe8d9ea93c2bd689a40f05320ef9d96f74d7f
-  RNScreens: 5e4758109c6d35f9a009ce72af873df907548020
+  RNScreens: 6053a007667bea81a69087caadf103bba04c032e
   RNSentry: 9cfa3717b1e6bf9ad4b124683e78e3b98b01d3af
   RNShare: 8b171d4b43c1d886917fdd303bf7a4b87167b05c
   RNSVG: f6177f8d7c095fada7cfee2e4bb7388ba426064c

package.json

@@ -74,7 +74,7 @@
     "react-native-reanimated": "^1.7.0",
     "react-native-redash": "^8.6.0",
     "react-native-safe-area-context": "^0.7.2",
-    "react-native-screens": "^2.0.0-beta.2",
+    "react-native-screens": "^2.0.0-beta.4",
     "react-native-share": "^2.0.0",
     "react-native-snap-carousel": "^3.8.2",
     "react-native-sqlite-storage": "^4.1.0",

src/capture/CaptureGallery.js

@@ -17,6 +17,7 @@ import androidPermissionsService from '../common/services/android-permissions.se
 import logService from '../common/services/log.service';
 import { CommonStyle } from '../styles/Common';
 import { View } from 'react-native-animatable';
+import ThemedStyles from '../styles/ThemedStyles';
 /**
  * Gallery View
  */
@@ -108,14 +109,14 @@ export default class CaptureGallery extends PureComponent {
    */
   render() {
     return (
-      <View style={[CommonStyle.backgroundWhite, CommonStyle.flexContainer]}>
+      <View style={[ThemedStyles.style.backgroundSecondary, CommonStyle.flexContainer]}>
         {this.state.imagesLoaded ? (
           <FlatList
             ref={this.setListRef}
             ListHeaderComponent={this.props.header}
             data={this.state.photos}
             renderItem={this.renderTile}
-            style={CommonStyle.flexContainer}
+            style={[CommonStyle.flexContainer, ThemedStyles.style.backgroundSecondary]}
             onEndReached={this._loadPhotos}
             ListFooterComponent={this.state.loading ? <CenteredLoading /> : null}
             numColumns={3}

src/capture/CapturePoster.js

@@ -13,7 +13,6 @@ import {
   NavigationActions
 } from '@react-navigation/native';
 
-import colors from '../styles/Colors';
 import HashtagService from '../common/services/hashtag.service'
 
 import CaptureGallery from './CaptureGallery';
@@ -22,14 +21,11 @@ import CapturePreview from './CapturePreview';
 import CaptureMetaPreview from './CaptureMetaPreview';
 import CapturePostButton from './CapturePostButton';
 import { CommonStyle as CS } from '../styles/Common';
-import Colors from '../styles/Colors';
 import CapturePosterFlags from './CapturePosterFlags';
 import UserAutocomplete from '../common/components/UserAutocomplete';
 import Activity from '../newsfeed/activity/Activity';
 import BlogCard from '../blogs/BlogCard';
 import ActivityModel from '../newsfeed/ActivityModel';
-import featuresService from '../common/services/features.service';
-import testID from '../common/helpers/testID';
 import logService from '../common/services/log.service';
 import i18n from '../common/services/i18n.service';
 import settingsStore from '../settings/SettingsStore';
@@ -37,8 +33,7 @@ import CaptureTabs from './CaptureTabs';
 
 // workaround for android copy/paste
 import TextInput from '../common/components/TextInput';
-import TabIcon from '../tabs/TabIcon';
-import TopbarNew from '../topbar/TopbarNew';
+import ThemedStyles from '../styles/ThemedStyles';
 
 export default
 @inject('user', 'capture')
@@ -223,7 +218,7 @@ class CapturePoster extends Component {
     const params = this.props.route.params || {};
 
     return (
-      <View style={CS.flexContainer} testID="capturePosterView">
+      <View style={[CS.flexContainer, ThemedStyles.style.backgroundSecondary]}>
         <CaptureGallery
           onSelected={this.onAttachedMedia}
           header={this.getHeader(true)}
@@ -244,7 +239,7 @@ class CapturePoster extends Component {
     const text = this.props.capture.text;
 
     return (
-      <View style={CS.flexContainer}>
+      <View style={[CS.flexContainer, ThemedStyles.style.backgroundSecondary]}>
         <ScrollView style={styles.posterAndPreviewWrapper} keyboardShouldPersistTaps={'always'} removeClippedSubviews={false}>
           {this.getHeader()}
           {this.getRemind()}
@@ -518,13 +513,11 @@ class CapturePoster extends Component {
 
 const styles = StyleSheet.create({
   posterAndPreviewWrapper: {
-    backgroundColor: 'white',
     flex:1
   },
   posterWrapper: {
     minHeight: 100,
     flexDirection: 'row',
-    backgroundColor: '#FFF',
   },
   title: {
     margin:2,

src/capture/CaptureTabs.js

@@ -17,6 +17,7 @@ import { CommonStyle } from '../styles/Common';
 import colors from '../styles/Colors';
 import attachmentService from '../common/services/attachment.service';
 import i18n from '../common/services/i18n.service';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Capture tab
@@ -57,22 +58,22 @@ export default class CaptureTab extends Component {
         { this.state.screen != 'poster' ?
           <View style={{height:125}}>
             <View style={{flex:1, flexDirection:'row', paddingLeft: 1, paddingRight: 1 }}>
-              <TouchableHighlight underlayColor='#FFF' onPress={ this.gallery } style={ styles.buttons}>
+              <TouchableHighlight onPress={ this.gallery } style={ [styles.buttons, ThemedStyles.style.backgroundPrimary] }>
                 <View style={ styles.buttonsWrapper }>
-                  <Icon name="md-photos" size={36} style={ styles.icons }/>
-                  <Text style={ styles.labels }>{i18n.t('capture.gallery')}</Text>
+                  <Icon name="md-photos" size={36} style={ ThemedStyles.style.colorIcon }/>
+                  <Text style={ [styles.labels, ThemedStyles.style.colorIcon] }>{i18n.t('capture.gallery')}</Text>
                 </View>
               </TouchableHighlight>
-              <TouchableHighlight underlayColor='#FFF' onPress={ this.photo } style={ styles.buttons }>
+              <TouchableHighlight onPress={ this.photo } style={ [styles.buttons, ThemedStyles.style.backgroundPrimary] }>
                 <View style={ styles.buttonsWrapper }>
-                  <Icon name="md-camera" size={36} style={ styles.icons }/>
-                  <Text style={ styles.labels }>{i18n.t('capture.photo')}</Text>
+                  <Icon name="md-camera" size={36} style={ ThemedStyles.style.colorIcon }/>
+                  <Text style={ [styles.labels, ThemedStyles.style.colorIcon] }>{i18n.t('capture.photo')}</Text>
                 </View>
               </TouchableHighlight>
-              <TouchableHighlight underlayColor='#FFF' onPress={ this.video } style={ styles.buttons }>
+              <TouchableHighlight onPress={ this.video } style={ [styles.buttons, ThemedStyles.style.backgroundPrimary] }>
                 <View style={ styles.buttonsWrapper }>
-                  <Icon name="md-videocam" size={36} style={ styles.icons }/>
-                  <Text style={ styles.labels }>{i18n.t('capture.video')}</Text>
+                  <Icon name="md-videocam" size={36} style={ ThemedStyles.style.colorIcon }/>
+                  <Text style={ [styles.labels, ThemedStyles.style.colorIcon] }>{i18n.t('capture.video')}</Text>
                 </View>
               </TouchableHighlight>
             </View>
@@ -182,9 +183,6 @@ const styles = StyleSheet.create({
   wrapper: {
     flex: 1,
   },
-  icons: {
-    color: '#444',
-  },
   labels: {
     letterSpacing: 1.25,
     color: '#444',
@@ -195,9 +193,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     alignContent: 'center',
-    backgroundColor: '#FFF',
-    borderWidth: 1,
-    borderColor: '#ECECEC',
     margin: 1,
   },
   buttonsWrapper: {

src/channel/header/ChannelHeader.js

@@ -38,6 +38,7 @@ import Button from '../../common/components/Button';
 import withPreventDoubleTap from '../../common/components/PreventDoubleTap';
 import CompleteProfile from './CompleteProfile';
 import featuresService from '../../common/services/features.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 // prevent accidental double tap in touchables
 const TouchableHighlightCustom = withPreventDoubleTap(TouchableHighlight);
@@ -221,6 +222,7 @@ class ChannelHeader extends Component {
     const isEditable = this.state.edit && !isUploading;
 
     const ImageCmp = this.state.preview_banner ? Image : FastImage;
+    const theme = ThemedStyles.style;
 
     return (
       <View>
@@ -241,13 +243,13 @@ class ChannelHeader extends Component {
           <View style={styles.countercontainer}>
             <TouchableHighlightCustom underlayColor="transparent" style={[styles.counter]} onPress={() => { this._navToSubscribers() }}>
               <View style={styles.counter} testID="SubscribersView">
-                <Text style={styles.countertitle}>{i18n.t('subscribers').toUpperCase()}</Text>
-                <Text style={styles.countervalue}>{abbrev(channel.subscribers_count, 0)}</Text>
+                <Text style={[styles.countertitle, theme.colorPrimaryText]}>{i18n.t('subscribers').toUpperCase()}</Text>
+                <Text style={[styles.countervalue, theme.colorPrimaryText]}>{abbrev(channel.subscribers_count, 0)}</Text>
               </View>
             </TouchableHighlightCustom>
             <View style={styles.counter} testID="ViewsView">
-              <Text style={styles.countertitle}>{i18n.t('views').toUpperCase()}</Text>
-              <Text style={styles.countervalue}>{abbrev(channel.impressions, 0)}</Text>
+              <Text style={[styles.countertitle, theme.colorPrimaryText]}>{i18n.t('views').toUpperCase()}</Text>
+              <Text style={[styles.countervalue, theme.colorPrimaryText]}>{abbrev(channel.impressions, 0)}</Text>
             </View>
           </View>
           <View style={styles.namecontainer}>
@@ -263,7 +265,7 @@ class ChannelHeader extends Component {
               {!isEditable &&
                 <View style={{ flexDirection: 'row', alignItems: 'center' }} testID="ChannelNameView">
                   <Text
-                    style={styles.name}
+                    style={[styles.name, theme.colorPrimaryText]}
                     ellipsizeMode='tail'
                     numberOfLines={1}
                     >

src/channel/subscribers/ChannelSubscribers.js

@@ -28,6 +28,7 @@ import CenteredLoading from '../../common/components/CenteredLoading';
 import { CommonStyle } from '../../styles/Common';
 import colors from '../../styles/Colors';
 import ErrorLoading from '../../common/components/ErrorLoading';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * Discovery screen
@@ -55,7 +56,7 @@ class ChannelSubscribers extends Component {
    * Load data
    */
   _loadData() {
-    const params = this.props.navigation.state.params;
+    const params = this.props.route.params;
     if (params.guid) {
       this.props.channelSubscribersStore.setGuid(params.guid);
     }
@@ -94,7 +95,7 @@ class ChannelSubscribers extends Component {
     }
 
     return (
-      <View style={CommonStyle.flexContainer}>
+      <View style={[CommonStyle.flexContainer, ThemedStyles.style.backgroundSecondary]}>
         <View style={styles.topbar}>
           <View style={[CommonStyle.flexContainer, CommonStyle.rowJustifyCenter]}>
             <TouchableHighlight underlayColor='transparent' onPress={() => store.setFilter('subscribers')} style={store.filter == 'subscribers'? [styles.selectedButton, CommonStyle.flexContainerCenter]: [styles.buttons, CommonStyle.flexContainerCenter]}>
@@ -136,7 +137,6 @@ class ChannelSubscribers extends Component {
 
 const styles = StyleSheet.create({
 	listView: {
-    backgroundColor: '#FFF',
     flex: 1,
   },
   topbar: {

src/channel/toolbar/Toolbar.js

@@ -17,6 +17,7 @@ import FAIcon from 'react-native-vector-icons/FontAwesome5';
 import i18n from '../../common/services/i18n.service';
 import colors from '../../styles/Colors';
 import featuresService from '../../common/services/features.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 const ICON_SIZE = 22;
 
@@ -74,24 +75,26 @@ class Toolbar extends Component {
       )
     }
 
+    const theme = ThemedStyles.style;
+
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, theme.backgroundPrimary]}>
         <View style={styles.topbar}>
           <TouchableOpacity style={styles.button} onPress={this.filterFeed} testID="FeedButton">
-            <Icon name="list" size={ICON_SIZE} color={filter == 'feed' ? colors.primary : color} style={styles.icon} />
-            <Text style={[styles.buttontext, filter == 'feed' ? styles.buttontextSelected : null]}>{i18n.t('feed').toUpperCase()}</Text>
+            <Icon name="list" size={ICON_SIZE} style={[styles.icon, filter == 'feed' ? theme.colorLink : theme.colorIcon]} />
+            <Text style={[styles.buttontext, filter == 'feed' ? theme.colorLink : theme.colorIcon]}>{i18n.t('feed').toUpperCase()}</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.button} onPress={this.filterImages} testID="ImagesButton">
-            <IonIcon name="md-image" size={ICON_SIZE} color={filter == 'images' ? colors.primary : color} style={styles.icon} />
-            <Text style={[styles.buttontext, filter == 'images' ? styles.buttontextSelected : null]}>{i18n.t('images').toUpperCase()}</Text>
+            <IonIcon name="md-image" size={ICON_SIZE} style={[styles.icon, filter == 'images' ? theme.colorLink : theme.colorIcon]} />
+            <Text style={[styles.buttontext, filter == 'images' ? theme.colorLink : theme.colorIcon]}>{i18n.t('images').toUpperCase()}</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.button} onPress={this.filterVideos} testID="VideosButton">
-            <IonIcon name="md-videocam" size={ICON_SIZE} color={filter == 'videos' ? colors.primary : color} style={styles.icon} />
-            <Text style={[styles.buttontext, filter == 'videos' ? styles.buttontextSelected : null]}>{i18n.t('videos').toUpperCase()}</Text>
+            <IonIcon name="md-videocam" size={ICON_SIZE} style={[styles.icon, filter == 'videos' ? theme.colorLink : theme.colorIcon]} />
+            <Text style={[styles.buttontext, filter == 'videos' ? theme.colorLink : theme.colorIcon]}>{i18n.t('videos').toUpperCase()}</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.button} onPress={this.filterBlogs} testID="BlogsButton">
-            <Icon name="subject" size={ICON_SIZE} color={filter == 'blogs' ? colors.primary : color} style={styles.icon} />
-            <Text style={[styles.buttontext, filter == 'blogs' ? styles.buttontextSelected : null]}>{i18n.t('blogs.blogs').toUpperCase()}</Text>
+            <Icon name="subject" size={ICON_SIZE} style={[styles.icon, filter == 'blogs' ? theme.colorLink : theme.colorIcon]} />
+            <Text style={[styles.buttontext, filter == 'blogs' ? theme.colorLink : theme.colorIcon]}>{i18n.t('blogs.blogs').toUpperCase()}</Text>
           </TouchableOpacity>
           {rewards}
           {subscriptionRequests}
@@ -112,10 +115,6 @@ const styles = StyleSheet.create({
     paddingLeft: 0,
     paddingRight: 0,
     paddingBottom: 5,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#EEE',
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#EEE',
   },
   icon: {
     height: 25,
@@ -126,8 +125,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   buttontext: {
-    paddingTop:5,
-    fontSize: 10,
+    paddingTop:3,
+    fontSize: 12,
     color: '#444',
   },
   buttontextSelected: {

src/comments/Comment.js

@@ -31,6 +31,7 @@ import ExplicitOverlay from '../common/components/explicit/ExplicitOverlay';
 import colors from '../styles/Colors';
 import FastImage from 'react-native-fast-image';
 import CommentActionSheet from './CommentActionSheet';
+import ThemedStyles from '../styles/ThemedStyles';
 
 const DoubleTapText = DoubleTap(Text);
 
@@ -93,7 +94,7 @@ class Comment extends Component {
 
         <View style={styles.contentContainer}>
           <View style={styles.content}>
-            <View style={styles.textContainer}>
+            <View style={[styles.textContainer, ThemedStyles.style.backgroundSeparator]}>
               {
                 this.state.editing ?
                   <CommentEditor setEditing={this.setEditing} comment={comment} store={this.props.store}/>
@@ -247,8 +248,6 @@ const styles = StyleSheet.create({
     backgroundColor:'#9A9A9A'
   },
   container: {
-    borderBottomColor: '#EEE',
-    borderBottomWidth: StyleSheet.hairlineWidth,
     padding: 8,
     paddingRight: 0,
     display: 'flex',
@@ -275,7 +274,6 @@ const styles = StyleSheet.create({
     textShadowRadius: 20
   },
   textContainer: {
-    backgroundColor: '#E8E8E8',
     borderRadius: 20,
     marginHorizontal: 5,
     padding: 5,
@@ -311,7 +309,6 @@ const styles = StyleSheet.create({
     // fontWeight: '800',
     fontFamily: 'Roboto-Black',
     paddingRight: 8,
-    color: '#444',
   },
   timestamp: {
     fontSize: 10,

src/comments/CommentList.js

@@ -41,6 +41,7 @@ import blockListService from '../common/services/block-list.service';
 // workaround for android copy/paste issue
 import TextInput from '../common/components/TextInput';
 import { FLAG_CREATE_COMMENT } from '../common/Permissions';
+import ThemedStyles from '../styles/ThemedStyles';
 
 
 import type CommentModel from './CommentModel';
@@ -346,7 +347,7 @@ class CommentList extends React.Component<PropsType, StateType> {
             CS.rowJustifyCenter,
             CS.margin,
             CS.padding,
-            CS.backgroundWhite,
+            ThemedStyles.style.backgroundSecondary,
             CS.borderRadius12x,
             CS.borderGreyed,
             CS.borderHair,
@@ -587,7 +588,7 @@ class CommentList extends React.Component<PropsType, StateType> {
     </View>);
 
     return (
-      <View style={[CS.flexContainer, CS.backgroundWhite, paddingBottom]} onLayout={this.onLayout}>
+      <View style={[CS.flexContainer, ThemedStyles.style.backgroundSecondary, paddingBottom]} onLayout={this.onLayout}>
         <KeyboardAvoidingView style={[CS.flexContainer]} behavior={Platform.OS == 'ios' ? 'padding' : null}
           keyboardVerticalOffset={this.props.keyboardVerticalOffset ? -this.props.keyboardVerticalOffset : vPadding} enabled={!this.props.parent ? (this.state.focused || this.focusedChild !== -1) : false}>
           <View style={CS.flexContainer}>
@@ -604,7 +605,7 @@ class CommentList extends React.Component<PropsType, StateType> {
               onRefresh={this.refresh}
               refreshing={this.props.store.refreshing}
               ListEmptyComponent={this.props.store.loaded && !this.props.store.refreshing ? emptyThread : <CenteredLoading/>}
-              style={[CS.flexContainer, CS.backgroundWhite]}
+              style={[CS.flexContainer, ThemedStyles.style.backgroundSecondary]}
             />
             {this.renderPoster()}
             <UserAutocomplete

src/common/components/CenteredLoading.js

@@ -19,7 +19,7 @@ const styles = {
   activitycontainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'white',
+    backgroundColor: 'transparent',
     minHeight:100,
     flex: 1
   }

src/common/components/FeedList.js

@@ -15,6 +15,7 @@ import { ComponentsStyle } from '../../styles/Components';
 import ErrorLoading from './ErrorLoading';
 import ErrorBoundary from './ErrorBoundary';
 import i18n from '../services/i18n.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * News feed list component
@@ -124,7 +125,7 @@ export default class FeedList extends Component {
         onEndReached={this.loadMore}
         // onEndReachedThreshold={0}
         numColumns={feedStore.isTiled ? 3 : 1}
-        style={styles.listView}
+        style={[ThemedStyles.style.flexContainer, ThemedStyles.style.backgroundSecondary]}
         initialNumToRender={6}
         windowSize={11}
         // removeClippedSubviews={true}
@@ -235,12 +236,4 @@ export default class FeedList extends Component {
       navigation={this.props.navigation}
     />;
   }
-}
-
-const styles = StyleSheet.create({
-  listView: {
-    //paddingTop: 20,
-    backgroundColor: '#FFF',
-    flex: 1,
-  }
-});
\ No newline at end of file
+}
\ No newline at end of file

src/common/components/SearchView.js

@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 
 import Icon from 'react-native-vector-icons/Ionicons';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * Search Component
@@ -40,16 +41,17 @@ export default class SearchView extends PureComponent {
 
     return (
       <View style={[styles.container, containerStyle]}>
-        <Icon size={22} style={styles.icon} name={'md-search'} color={'#444'} />
+        <Icon size={22} style={[styles.icon, ThemedStyles.style.colorIcon]} name={'md-search'} />
         <TextInput
           onFocus={ this.props.onFocus }
           onBlur={ this.props.onBlur }
           selectTextOnFocus={true}
+          placeholderTextColor={ThemedStyles.getColor('secondary_text')}
           {...attributes}
           underlineColorAndroid={
             'transparent'
           }
-          style={styles.input}
+          style={[styles.input, ThemedStyles.style.colorPrimaryText]}
           testID="MessengerContactText"
         />
         {rIcon}
@@ -85,7 +87,6 @@ const styles = StyleSheet.create({
   container: {
     borderBottomColor: '#000',
     borderTopColor: '#000',
-    backgroundColor: '#FFF',
     justifyContent:'center',
     backgroundColor: '#f2f2f2',
     borderRadius: 50,
@@ -110,7 +111,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     backgroundColor: 'transparent',
     fontSize: 14,
-    color: '#444',
     height: 42,
     ...Platform.select({
       ios: {

src/common/components/helper/OnFocus.js

+import React from 'react';
+import { useFocusEffect } from '@react-navigation/native';
+
+/**
+ * Calls the onFocus callback when the container screen is focused in the navigator
+ *
+ * @param {Object} props
+ */
+export default function OnFocus({ onFocus }) {
+  useFocusEffect(
+    React.useCallback(() => {
+      const unsubscribe = onFocus();
+
+      // return a unsubscribe function when the component is destroyed?
+      if (unsubscribe instanceof Function) {
+        return () => unsubscribe();
+      }
+    }, [onFocus])
+  );
+
+  return null;
+};

src/common/components/toolbar/Toolbar.js

@@ -5,6 +5,7 @@ import {
 } from 'react-native';
 
 import ToolbarItem from './ToolbarItem';
+import ThemedStyles from '../../../styles/ThemedStyles';
 
 /**
  * Toolbar component
@@ -75,7 +76,7 @@ export default class Toolbar extends PureComponent {
     });
 
     return (
-      <View style={[styles.container, calcStyle]}>
+      <View style={[styles.container, calcStyle, ThemedStyles.style.backgroundPrimary]}>
         <View style={styles.topbar}>
         {buttons}
         </View>
@@ -84,9 +85,6 @@ export default class Toolbar extends PureComponent {
   }
 }
 
-const selectedcolor = '#0071ff';
-const color = '#444'
-
 const styles = StyleSheet.create({
   container: {
     //height: 65,
@@ -96,7 +94,6 @@ const styles = StyleSheet.create({
     paddingLeft: 0,
     paddingRight: 0,
     borderBottomColor: '#EEE',
-    backgroundColor: '#FFF',
     shadowColor: 'black',
     shadowOpacity: 0.1,
     shadowRadius: StyleSheet.hairlineWidth,
@@ -104,8 +101,6 @@ const styles = StyleSheet.create({
       height: StyleSheet.hairlineWidth
     },
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderTopColor: '#EEE',
   },
   topbar: {
     flex: 1,

src/common/components/toolbar/ToolbarItem.js

@@ -14,6 +14,7 @@ import colors from '../../../styles/Colors';
 import { Badge } from 'react-native-elements';
 import { CommonStyle } from '../../../styles/Common';
 import withPreventDoubleTap from '../../../common/components/PreventDoubleTap';
+import ThemedStyles from '../../../styles/ThemedStyles';
 
 DebouncedTouchableOpacity = withPreventDoubleTap(TouchableOpacity);
 
@@ -37,7 +38,7 @@ export default class ToolbarItem extends PureComponent {
     const iconCmp = this.getIcon(selected);
     const textStyle = this.getTextStyle();
     const subTextStyle = this.getSubTextStyle();
-    const buttonStyle = selected ? [styles.button, styles.buttonSelected] : styles.button;
+    const buttonStyle = selected ? [styles.button, {borderBottomColor: ThemedStyles.getColor('link')}] : styles.button;
 
     return (
       <DebouncedTouchableOpacity style={buttonStyle} onPress={() => onPress(value)}>
@@ -80,10 +81,10 @@ export default class ToolbarItem extends PureComponent {
     } = this.props;
 
     if (selected) {
-      return (selectedTextStyle) ? [styles.buttonSelectedText, CommonStyle.fontXS, selectedTextStyle] : [styles.buttonSelectedText, CommonStyle.fontXS];
+      return (selectedTextStyle) ? [styles.buttonSelectedText, CommonStyle.fontS, ThemedStyles.style.colorLink, selectedTextStyle] : [styles.buttonSelectedText, CommonStyle.fontS, ThemedStyles.style.colorLink];
     }
 
-    return (textStyle) ? [styles.buttonText, CommonStyle.fontXS, textStyle] : [styles.buttonText, CommonStyle.fontXS];
+    return (textStyle) ? [styles.buttonText, CommonStyle.fontS, textStyle] : [styles.buttonText, CommonStyle.fontS];
   }
 
   /**
@@ -103,8 +104,8 @@ export default class ToolbarItem extends PureComponent {
     const size = iconSize || 18;
     const iconContainerStyle = {height: size + 4};
 
+    const style = selected ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon;
     if (!icon) {
-      const style = {color: selected ? colors.primary : color};
       return (
         <View style={iconContainerStyle}>
           <Text style={style}>{badge}</Text>
@@ -120,7 +121,7 @@ export default class ToolbarItem extends PureComponent {
 
     return (
       <View style={iconContainerStyle}>
-        <IconType name={icon} size={size || 18} color={selected ? colors.primary : color} />
+        <IconType name={icon} size={size || 18} style={style} />
       </View>
     )
   }
@@ -136,7 +137,6 @@ const styles = StyleSheet.create({
   buttonSelectedText: {
     paddingTop: 5,
     textAlign: 'center',
-    color: colors.primary
   },
   buttonText: {
     paddingTop:3,
@@ -147,10 +147,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 5,
     borderBottomWidth: 2,
-    borderBottomColor: '#FFF',
-  },
-  buttonSelected: {
-    borderBottomColor: colors.primary,
+    borderBottomColor: 'transparent',
   },
   badgeStyle: {
     backgroundColor: colors.explicit,

src/discovery/DiscoveryFeedScreen.js

@@ -32,6 +32,7 @@ import ErrorBoundary from '../common/components/ErrorBoundary';
 import i18n from '../common/services/i18n.service';
 import FeedList from '../common/components/FeedList';
 import FallbackBoundary from './FallbackBoundary';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Discovery Feed Screen
@@ -87,7 +88,7 @@ export default class DiscoveryFeedScreen extends Component {
         ListFooterComponent={this.getFooter}
         keyExtractor={this.keyExtractor}
         initialNumToRender={3}
-        style={[CS.backgroundWhite, CS.flexContainer]}
+        style={[ThemedStyles.style.backgroundSecondary, CS.flexContainer]}
         navigation={this.props.navigation}
         horizontal={false}
         maxToRenderPerBatch={3}

src/discovery/DiscoveryScreen.js

@@ -49,6 +49,7 @@ import FallbackBoundary from './FallbackBoundary';
 import TabIcon from '../tabs/TabIcon';
 import featuresService from '../common/services/features.service';
 import TopbarNew from '../topbar/TopbarNew';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Discovery screen
@@ -61,7 +62,7 @@ class DiscoveryScreen extends Component {
   iconSize = 28;
 
   state = {
-    active: false,
+    active: true,
     showFeed: false,
     itemHeight: 0,
     q: '',
@@ -244,12 +245,12 @@ class DiscoveryScreen extends Component {
         renderItem={renderRow}
         ListFooterComponent={footer}
         CollapsibleHeaderComponent={this.getHeaders()}
-        headerHeight={(GOOGLE_PLAY_STORE && discovery.filters.type !== 'channels') ? 94 : 146}
+        headerHeight={(GOOGLE_PLAY_STORE && discovery.filters.type !== 'channels') ? 94 : 144}
         ListEmptyComponent={this.getEmptyList()}
         keyExtractor={this.keyExtractor}
         onEndReached={this.loadMore}
-        initialNumToRender={this.cols == 3 ? 12 : 3}
-        style={[CS.backgroundWhite, CS.flexContainer]}
+        initialNumToRender={this.cols === 3 ? 12 : 3}
+        style={[ThemedStyles.style.backgroundSecondary, CS.flexContainer]}
         numColumns={this.cols}
         horizontal={false}
         windowSize={9}
@@ -257,12 +258,12 @@ class DiscoveryScreen extends Component {
         columnWrapperStyle={columnWrapperStyle}
         keyboardShouldPersistTaps={'handled'}
         onViewableItemsChanged={this.onViewableItemsChanged}
-        viewabilityConfig={this.cols == 3 ? undefined : this.viewOptsFeed}
+        viewabilityConfig={this.cols === 3 ? undefined : this.viewOptsFeed}
       />
     );
 
     return (
-      <View style={[CS.flexContainer, CS.backgroundWhite]}>
+      <View style={[CS.flexContainer, ThemedStyles.style.backgroundSecondary]}>
         <TopbarNew title={i18n.t('tabTitleDiscovery')}/>
         {body}
         <CaptureFab navigation={this.props.navigation} />
@@ -328,67 +329,68 @@ class DiscoveryScreen extends Component {
    */
   getHeaders() {
     const filtersStore = this.props.discovery.filters;
+
     const navigation = (
-      <View style={[styles.navigation]}>
+      <View style={[styles.navigation, ThemedStyles.style.backgroundSecondary]}>
 
-        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeActivities } underlayColor='#fff' {...testID('Discovery All')}>
+        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeActivities } {...testID('Discovery All')}>
           <View style={CS.columnAlignCenter}>
             <IonIcon
               name="ios-infinite"
-              style={[styles.icon, filtersStore.type == 'activities' ? styles.iconActive : null ]}
+              style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'activities' ? ThemedStyles.style.colorLink : null ]}
               size={ this.iconSize }
             />
-            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'activities' ? CS.colorPrimary : CS.colorDark]}>{i18n.t('discovery.all')}</Text>
+            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'activities' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.all')}</Text>
           </View>
         </TouchableHighlight>
-        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeChannels } underlayColor='#fff' {...testID('Discovery Channels')}>
+        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeChannels } {...testID('Discovery Channels')}>
           <View style={CS.columnAlignCenter}>
             <Icon
               name="people"
-              style={[styles.icon, filtersStore.type == 'channels' ? styles.iconActive : null ]}
+              style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'channels' ? ThemedStyles.style.colorLink : null ]}
               size={ this.iconSize }
             />
-            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'channels' ? CS.colorPrimary : CS.colorDark]}>{i18n.t('discovery.channels')}</Text>
+            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'channels' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.channels')}</Text>
           </View>
         </TouchableHighlight>
-        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeVideos } underlayColor='#fff' {...testID('Discovery Videos')}>
+        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeVideos } {...testID('Discovery Videos')}>
           <View style={CS.columnAlignCenter}>
             <IonIcon
               name={this.state.showFeed !== false &&  filtersStore.type == 'videos' ? 'md-apps' : 'md-videocam'}
-              style={[styles.icon, filtersStore.type == 'videos' ? styles.iconActive : null ]}
+              style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'videos' ? ThemedStyles.style.colorLink : null ]}
               size={this.iconSize}
             />
-            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'videos' ? CS.colorPrimary : CS.colorDark]}>{i18n.t('discovery.videos')}</Text>
+            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'videos' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.videos')}</Text>
           </View>
         </TouchableHighlight>
-        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeImages } underlayColor='#fff' {...testID('Discovery Images')}>
+        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeImages } {...testID('Discovery Images')}>
           <View style={CS.columnAlignCenter}>
             <IonIcon
               name={this.state.showFeed !== false &&  filtersStore.type == 'images' ? 'md-apps' : 'md-photos'}
-              style={[styles.icon, filtersStore.type == 'images' ? styles.iconActive : null ]}
+              style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'images' ? ThemedStyles.style.colorLink : null ]}
               size={ this.iconSize }
             />
-            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'images' ? CS.colorPrimary : CS.colorDark]}>{i18n.t('discovery.images')}</Text>
+            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'images' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.images')}</Text>
           </View>
         </TouchableHighlight>
-        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeBlogs } underlayColor='#fff' {...testID('Discovery Blogs')}>
+        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeBlogs } {...testID('Discovery Blogs')}>
           <View style={CS.columnAlignCenter}>
             <Icon
               name="subject"
-              style={[styles.icon, filtersStore.type == 'blogs' ? styles.iconActive : null ]}
+              style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'blogs' ? ThemedStyles.style.colorLink : null ]}
               size={ this.iconSize }
             />
-            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'blogs' ? CS.colorPrimary : CS.colorDark]}>{i18n.t('discovery.blogs')}</Text>
+            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'blogs' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.blogs')}</Text>
           </View>
         </TouchableHighlight>
-        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeGroups } underlayColor='#fff' {...testID('Discovery Groups')}>
+        <TouchableHighlight style={styles.iconContainer} onPress={ this.setTypeGroups } {...testID('Discovery Groups')}>
           <View style={CS.columnAlignCenter}>
             <Icon
               name="group-work"
-              style={[styles.icon, filtersStore.type == 'groups' ? styles.iconActive : null ]}
+              style={[styles.icon, ThemedStyles.style.colorIcon, filtersStore.type == 'groups' ? ThemedStyles.style.colorLink : null ]}
               size={ this.iconSize }
             />
-            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'groups' ? CS.colorPrimary : CS.colorDark]}>{i18n.t('discovery.groups')}</Text>
+            <Text numberOfLines={1} style={[CS.fontS, filtersStore.type == 'groups' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]}>{i18n.t('discovery.groups')}</Text>
           </View>
         </TouchableHighlight>
       </View>
@@ -407,7 +409,7 @@ class DiscoveryScreen extends Component {
           placeholder={i18n.t('discovery.search')}
           onChangeText={this.setQ}
           value={this.state.q}
-          containerStyle={[CS.marginTop, CS.marginBottom]}
+          containerStyle={[CS.marginTop, CS.marginBottom, ThemedStyles.style.backgroundPrimary]}
           iconRight={ iconRight }
           iconRightOnPress={this.clearSearch}
           {...testID('Discovery Search Input')}
@@ -418,7 +420,7 @@ class DiscoveryScreen extends Component {
       <Text style={[CS.fontM, CS.backgroundPrimary, CS.colorWhite, CS.textCenter, CS.padding]}>{i18n.t('discovery.recentlyVisited')}</Text>;
 
     return (
-      <View style={[CS.shadow, CS.backgroundWhite]}>
+      <View style={[CS.shadow, ThemedStyles.style.backgroundSecondary]}>
         {navigation}
         {headerBody}
       </View>
@@ -647,7 +649,6 @@ const styles = StyleSheet.create({
   },
   navigation: {
     flexDirection: 'row',
-    backgroundColor: '#FFF',
     ...Platform.select({
       android: {
         paddingTop: 2,
@@ -665,11 +666,11 @@ const styles = StyleSheet.create({
   iconContainer: {
     flex: 1,
     paddingVertical: 5,
-    height: 50
+    height: 50,
+    backgroundColor: 'transparent',
   },
   icon: {
     alignSelf: 'center',
-    color: '#444',
     height: 28
   },
   iconActive: {

src/discovery/DiscoveryUser.js

@@ -22,6 +22,7 @@ import {
 import { CommonStyle } from '../styles/Common';
 import { FLAG_SUBSCRIBE, FLAG_VIEW } from '../common/Permissions';
 import SubscriptionButton from '../channel/subscription/SubscriptionButton';
+import ThemedStyles from '../styles/ThemedStyles';
 
 export default
 @observer
@@ -90,7 +91,7 @@ class DiscoveryUser extends Component {
     const {row, ...otherProps} = this.props;
 
     return (
-      <TouchableOpacity style={styles.row} onPress={this._navToChannel} {...otherProps}>
+      <TouchableOpacity style={[styles.row, {borderBottomColor: ThemedStyles.getColor('separator')}]} onPress={this._navToChannel} {...otherProps}>
         <Image source={this.state.source} style={styles.avatar} />
         <View style={[CommonStyle.flexContainerCenter]}>
           <Text style={[styles.body, CommonStyle.fontXL]}>{row.item.name}</Text>
@@ -111,7 +112,6 @@ const styles = {
     paddingLeft: 12,
     paddingBottom: 10,
     paddingRight: 12,
-    borderBottomColor: '#EEE',
     borderBottomWidth: StyleSheet.hairlineWidth,
   },
   body: {

src/discovery/NewsfeedFilters.js

@@ -31,6 +31,7 @@ import testID from '../common/helpers/testID';
 import { GOOGLE_PLAY_STORE } from '../config/Config';
 import i18n from '../common/services/i18n.service';
 import settingsStore from '../settings/SettingsStore';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Newsfeed filters
@@ -104,6 +105,8 @@ export default class NewsfeedFilters extends Component {
     const hashActive = !this.props.hashtag.all || this.props.hashtag.hashtag;
     const disableHotLatest = store.type === 'channels' || store.type === 'groups';
 
+    const themed = ThemedStyles.style;
+
     return (
       <View style={CS.rowJustifyStart}>
         <TouchableHighlight
@@ -132,10 +135,10 @@ export default class NewsfeedFilters extends Component {
             <View style={[CS.rowJustifyCenter, CS.centered]}>
               <Icon
                 name="whatshot"
-                style={[CS.centered, store.filter == 'hot' ? CS.colorPrimary : (disableHotLatest ? CS.colorGreyed : null), {paddingTop:2}  ]}
+                style={[CS.centered, store.filter == 'hot' ? themed.colorLink : (disableHotLatest ? CS.colorGreyed : null), {paddingTop:2}  ]}
                 size={ 22 }
               />
-              {!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'hot' ? CS.colorPrimary : (disableHotLatest ? CS.colorGreyed : CS.colorDark), CS.paddingLeft]}>{i18n.t('newsfeedFilters.hot')}</Text> : null}
+              {!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'hot' ? themed.colorLink : (disableHotLatest ? CS.colorGreyed : themed.colorIcon), CS.paddingLeft]}>{i18n.t('newsfeedFilters.hot')}</Text> : null}
             </View>
           </TouchableHighlight>
           <View style={CS.rowJustifyCenter}>
@@ -143,10 +146,10 @@ export default class NewsfeedFilters extends Component {
               <View style={[CS.rowJustifyCenter, CS.centered]}>
                 <Icon
                   name="trending-up"
-                  style={[CS.centered, store.filter == 'top' ? CS.colorPrimary : null, {paddingTop:2}  ]}
+                  style={[CS.centered, store.filter == 'top' ? themed.colorLink : themed.colorIcon, {paddingTop:2}  ]}
                   size={ 22 }
                 />
-                {!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'top' ? CS.colorPrimary : CS.colorDark, CS.paddingLeft]}>{i18n.t('newsfeedFilters.top')}</Text> : null}
+                {!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'top' ? themed.colorLink : themed.colorIcon, CS.paddingLeft]}>{i18n.t('newsfeedFilters.top')}</Text> : null}
               </View>
             </TouchableHighlight>
             {store.filter == 'top' &&
@@ -155,10 +158,10 @@ export default class NewsfeedFilters extends Component {
                 button={
                   <TouchableHighlight style={[CS.padding]} onPress={this.showMenu} >
                     <View style={[CS.rowJustifyCenter, CS.centered]}>
-                      <Text style={[CS.fontM, store.filter == 'top' ? CS.colorPrimary : CS.colorDark, CS.paddingLeft, CS.paddingRight]}>{store.period}</Text>
+                      <Text style={[CS.fontM, store.filter == 'top' ? themed.colorLink : themed.colorIcon, CS.paddingLeft, CS.paddingRight]}>{store.period}</Text>
                       <IonIcon
                         name="ios-arrow-down"
-                        style={[CS.centered, store.filter == 'top' ? CS.colorPrimary : null, {paddingTop:2}  ]}
+                        style={[CS.centered, store.filter == 'top' ? themed.colorLink : themed.colorIcon, {paddingTop:2}  ]}
                         size={ 22 }
                       />
                     </View>
@@ -183,10 +186,10 @@ export default class NewsfeedFilters extends Component {
             <View style={[CS.rowJustifyCenter, CS.centered]}>
               <Icon
                 name="timelapse"
-                style={[CS.centered, store.filter == 'latest' ? CS.colorPrimary : (disableHotLatest ? CS.colorGreyed : null), {paddingTop:2} ]}
+                style={[CS.centered, store.filter == 'latest' ? themed.colorLink : (disableHotLatest ? CS.colorGreyed : themed.colorIcon), {paddingTop:2} ]}
                 size={ 22 }
               />
-              {!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'latest' ? CS.colorPrimary : (disableHotLatest ? CS.colorGreyed : CS.colorDark), CS.paddingLeft]}>{i18n.t('newsfeedFilters.latest')}</Text> : null}
+              {!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'latest' ? themed.colorLink : (disableHotLatest ? CS.colorGreyed : themed.colorIcon), CS.paddingLeft]}>{i18n.t('newsfeedFilters.latest')}</Text> : null}
             </View>
           </TouchableHighlight>
         </View>

src/gathering/Gathering.js

@@ -41,7 +41,7 @@ class Gathering extends React.Component {
    */
   async init() {
     if (!gatheringService.isActive) {
-      const entity = this.props.navigation.getParam('entity');
+      const entity = this.props.route.params.entity;
       this.timer = setTimeout(async () => {
         const url = await gatheringService.getRoomName(entity);
         const user = sessionService.getUser();

src/messenger/ConversationScreen.js

@@ -35,6 +35,7 @@ import ErrorLoading from '../common/components/ErrorLoading';
 import logService from '../common/services/log.service';
 import TextInput from '../common/components/TextInput';
 import i18n from '../common/services/i18n.service';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Messenger Conversation Screen
@@ -50,8 +51,8 @@ export default class ConversationScreen extends Component {
   topAvatar = false;
   store;
 
-  static navigationOptions = ({ navigation }) => {
-    const conversation = navigation.state.params.conversation;
+  setNavigationOptions = ({ route }) => {
+    const conversation = route.params.conversation;
     let title = '';
 
     if (conversation) {
@@ -60,14 +61,14 @@ export default class ConversationScreen extends Component {
 
     return {
       title,
-      headerRight: navigation.state.params && navigation.state.params.headerRight,
+      headerRight: route.params && route.params.headerRight,
     }
   };
 
   componentWillMount() {
 
     this.store = new MessengerConversationStore();
-    const params = this.props.navigation.state.params;
+    const params = this.props.route.params;
     let conversation;
     if (params.conversation) {
       conversation = params.conversation;
@@ -89,8 +90,19 @@ export default class ConversationScreen extends Component {
     this.store.setGuid(conversation.guid);
     this.store.load()
       .then(conversation => {
+
+        let title = '';
+
+        if (conversation) {
+          title = conversation.name ? conversation.name : conversation.username;
+        }
+
         // we send the conversation to update the topbar (in case we only receive the guid)
-        conversation && this.props.navigation.setParams({ conversation });
+        conversation && this.props.navigation.setOptions({
+          title,
+          conversation,
+          headerRight: route.params && route.params.headerRight,
+        });
       });
   }
 
@@ -106,8 +118,8 @@ export default class ConversationScreen extends Component {
       const participant = UserModel.checkOrCreate(conversation.participants[0]);
       const avatarImg = participant.getAvatarSource();
 
-      this.props.navigation.setParams({
-        headerRight: (
+      this.props.navigation.setOptions({
+        headerRight: () => (
           <TouchableOpacity style={[CommonStyle.rowJustifyEnd, CommonStyle.paddingRight2x]}  onPress={() => this.props.navigation.push('Channel', { guid: participant.guid})}>
             <Image source={avatarImg} style={styles.avatar} />
           </TouchableOpacity>)
@@ -181,10 +193,10 @@ export default class ConversationScreen extends Component {
 
     const footer = this.getFooter();
     const messages = this.store.messages.slice();
-    const conversation = this.props.navigation.state.params.conversation;
+    const conversation = this.props.route.params.conversation;
     const avatarImg    = { uri: MINDS_CDN_URI + 'icon/' + this.props.user.me.guid + '/medium/' + this.props.user.me.icontime };
     return (
-      <KeyboardAvoidingView style={styles.container} behavior={Platform.OS == 'ios' ? 'padding' : null} keyboardVerticalOffset={64}>
+      <KeyboardAvoidingView style={[styles.container, ThemedStyles.style.backgroundSecondary]} behavior={Platform.OS == 'ios' ? 'padding' : null} keyboardVerticalOffset={64}>
         <FlatList
           inverted={true}
           data={messages}
@@ -202,10 +214,11 @@ export default class ConversationScreen extends Component {
         <View style={styles.messagePoster} >
           <Image source={avatarImg} style={styles.avatar} />
           <TextInput
-            style={styles.input}
+            style={[styles.input, ThemedStyles.style.colorPrimaryText]}
             editable={true}
             underlineColorAndroid='transparent'
             placeholder={i18n.t('messenger.typeYourMessage')}
+            placeholderTextColor={ThemedStyles.getColor('secondary_text')}
             onChangeText={(text) => this.textChanged(text)}
             multiline={true}
             autogrow={true}
@@ -213,7 +226,7 @@ export default class ConversationScreen extends Component {
             value={this.state.text}
             testID='ConversationTextInput'
           />
-          <TouchableOpacity onPress={this.send} style={styles.sendicon} testID='ConversationSendButton'><Icon name="md-send" size={24} style={{ color: '#444' }}/></TouchableOpacity>
+          <TouchableOpacity onPress={this.send} style={styles.sendicon} testID='ConversationSendButton'><Icon name="md-send" size={24} style={ThemedStyles.style.colorIcon}/></TouchableOpacity>
         </View>
       </KeyboardAvoidingView>
     );
@@ -290,7 +303,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingHorizontal: 5,
-    backgroundColor: '#FFF',
   },
   messagePoster: {
     borderTopWidth: StyleSheet.hairlineWidth,

src/messenger/MessengerScreen.js

@@ -20,11 +20,9 @@ import ConversationView from './conversation/ConversationView';
 
 import SearchView from '../common/components/SearchView';
 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';
-
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Messenger Conversarion List Screen
@@ -45,13 +43,8 @@ class MessengerScreen extends Component {
    * On component will mount
    */
   componentDidMount() {
-    // load list
-    this.props.messengerList.loadList();
 
-    // listen socket on app start
-    this.props.messengerList.listen();
-
-    // load data on enter
+    // // load data on enter
     this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
       this.props.messengerList.loadList(true);
       //this.setState({ active: true });
@@ -67,7 +60,7 @@ class MessengerScreen extends Component {
    * Dispose reactions of navigation store on unmount
    */
   componentWillUnmount() {
-    this.props.messengerList.unlisten();
+    // this.props.messengerList.unlisten();
     if (this.disposeEnter) {
       this.disposeEnter();
     }
@@ -99,16 +92,12 @@ class MessengerScreen extends Component {
     const messengerList = this.props.messengerList;
     const conversations = messengerList.conversations;
     const loading = messengerList.loading;
-    let loadingCmp   = null;
+    let loadingCmp = null;
 
     if (loading && !messengerList.refreshing) {
       loadingCmp = <ActivityIndicator style={styles.loading} />
     }
 
-    //if (!this.state.active) {
-    //  return <View/>
-    //}
-
     let empty;
 
     if (messengerList.loaded && !messengerList.refreshing) {
@@ -131,7 +120,7 @@ class MessengerScreen extends Component {
     const footer = this.getFooter();
 
     return (
-      <View style={styles.container}>
+      <View style={[styles.container, ThemedStyles.style.backgroundSecondary]}>
         <SearchView
           placeholder={i18n.t('discovery.search')}
           onChangeText={this.searchChange}
@@ -230,7 +219,6 @@ const styles = StyleSheet.create({
     paddingLeft: 5,
     paddingRight: 5,
     paddingTop: 5,
-    backgroundColor: '#FFF',
   },
   body: {
     marginLeft: 8,

src/messenger/MessengerSetup.js

@@ -40,7 +40,7 @@ export default class MessengerSetup extends Component {
   confirm  = '';
 
   componentWillMount() {
-    const { setParams } = this.props.navigation;
+    const { setOptions } = this.props.navigation;
     let button;
 
     if (this.props.user.me.chat && !this.props.rekey) {
@@ -61,13 +61,13 @@ export default class MessengerSetup extends Component {
       );
     }
 
-    const headerRight = (
+    const headerRight = () => (
       <Observer>
         {() => this.props.messengerList.unlocking ? <ActivityIndicator style={CommonStyle.marginRight2x}/> : button }
       </Observer>
     )
 
-    setParams({ headerRight: headerRight });
+    setOptions({ headerRight: headerRight });
   }
 
   unlock = async () => {

src/messenger/MessengerTabIconNew.js

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

src/messenger/conversation/Message.js

@@ -24,6 +24,7 @@ import { MINDS_CDN_URI } from '../../config/Config';
 import crypto from '../../common/services/crypto.service';
 import Tags from '../../common/components/Tags';
 import i18n from '../../common/services/i18n.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * Message Component
@@ -95,7 +96,7 @@ export default class Message extends PureComponent {
       return (
         <View>
           <View style={[styles.messageContainer, styles.right]}>
-            <View style={[CommonStyle.rowJustifyCenter, styles.textContainer, CommonStyle.backgroundPrimary]}>
+            <View style={[CommonStyle.rowJustifyCenter, styles.textContainer, ThemedStyles.style.backgroundLink]}>
               <Text selectable={true} style={[styles.message, CommonStyle.colorWhite]} onLongPress={() => this.showDate()}>
                 <Tags color={'#fff'} style={{ color: '#FFF' }} navigation={this.props.navigation}>{this.state.msg}</Tags>
               </Text>
@@ -117,7 +118,7 @@ export default class Message extends PureComponent {
           <TouchableOpacity onPress={this._navToChannel}>
             <Image source={avatarImg} style={[styles.avatar, styles.smallavatar]} />
           </TouchableOpacity>
-          <View style={[CommonStyle.rowJustifyCenter, styles.textContainer]}>
+          <View style={[CommonStyle.rowJustifyCenter, styles.textContainer, , ThemedStyles.style.backgroundSeparator]}>
             <Text selectable={true} style={[styles.message]} onLongPress={() => this.showDate()}>
               <Tags style={[styles.message]} navigation={this.props.navigation}>{this.state.msg}</Tags>
             </Text>
@@ -142,16 +143,14 @@ export default class Message extends PureComponent {
 // styles
 const styles = StyleSheet.create({
   smallavatar: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
+    height: 30,
+    width: 30,
+    borderRadius: 15,
   },
   avatar: {
     height: 36,
     width: 36,
     borderRadius: 18,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderColor: '#EEE',
   },
   textContainer: {
     flexWrap: 'wrap',

src/newsfeed/ActivityScreen.js

@@ -135,7 +135,7 @@ class ActivityScreen extends Component {
     }
 
     return (
-      <View style={[CS.flexContainer, CS.backgroundWhite]}>
+      <View style={[CS.flexContainer]}>
         {
           !this.entityStore.errorLoading ?
             <CommentList

src/newsfeed/NewsfeedList.js

@@ -16,6 +16,7 @@ import { ComponentsStyle } from '../styles/Components';
 import ErrorLoading from '../common/components/ErrorLoading';
 import ErrorBoundary from '../common/components/ErrorBoundary';
 import i18n from '../common/services/i18n.service';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * News feed list component
@@ -140,6 +141,7 @@ export default class NewsfeedList extends Component {
     }
 
     const footer = this.getFooter();
+    const theme = ThemedStyles.style;
 
     return (
       <ListComponent
@@ -155,7 +157,7 @@ export default class NewsfeedList extends Component {
         onEndReached={this.loadFeed}
         // onEndReachedThreshold={0}
         numColumns={newsfeed.isTiled ? 3 : 1}
-        style={styles.listView}
+        style={[theme.flexContainer, theme.backgroundSecondary]}
         initialNumToRender={6}
         windowSize={11}
         //getItemLayout={getItemLayout}
@@ -269,10 +271,3 @@ export default class NewsfeedList extends Component {
   }
 }
 
-const styles = StyleSheet.create({
-  listView: {
-    //paddingTop: 20,
-    backgroundColor: '#FFF',
-    flex: 1,
-  }
-});

src/newsfeed/NewsfeedScreen.js

@@ -27,7 +27,7 @@ import i18n from '../common/services/i18n.service';
 /**
  * News Feed Screen
  */
-@inject('newsfeed', 'user', 'discovery')
+@inject('newsfeed', 'user', 'discovery', 'messengerList')
 @observer
 export default class NewsfeedScreen extends Component {
 
@@ -85,17 +85,22 @@ export default class NewsfeedScreen extends Component {
     // load groups after the feed
     await this.groupsBar.initialLoad();
     // load discovery after the feed is loaded
-    // setTimeout(() => {
-      console.log('ahora')
-      this.props.discovery.init();
-      this.props.discovery.fetch();
-    // }, 1000)
+    this.props.discovery.init();
+    this.props.discovery.fetch();
+
+    // load messenger
+    this.props.messengerList.loadList();
+
+    // listen socket on app start
+    this.props.messengerList.listen();
+
   }
 
   /**
    * Component will unmount
    */
   componentWillUnmount() {
+    this.props.messengerList.unlisten();
     if (this.disposeEnter) {
       this.disposeEnter();
     }

src/newsfeed/activity/Activity.js

@@ -34,6 +34,7 @@ import blockListService from '../../common/services/block-list.service';
 import i18n from '../../common/services/i18n.service';
 import ActivityModel from '../ActivityModel';
 import BlockedChannel from '../../common/components/BlockedChannel';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * Activity
@@ -212,7 +213,7 @@ export default class Activity extends Component {
 
     return (
       <View>
-        <Text onPress={this.navToGroup} style={styles.groupNameLabel}>{this.props.entity.containerObj.name}</Text>
+        <Text onPress={this.navToGroup} style={[styles.groupNameLabel, ThemedStyles.style.colorPrimaryText]}>{this.props.entity.containerObj.name}</Text>
       </View>
     );
   }
@@ -252,18 +253,18 @@ export default class Activity extends Component {
           rightToolbar={this.props.hideTabs ? null : rightToolbar}
           >
           <TouchableOpacity onPress={() => this.navToActivity()} style={{ flexDirection: 'row' }}>
-            <Text style={[styles.timestamp, CommonStyle.paddingRight]}>{
+            <Text style={[styles.timestamp, CommonStyle.paddingRight, ThemedStyles.style.colorSecondaryText]}>{
               formatDate(this.props.entity.time_created)
             }</Text>
             { this.props.entity.boosted &&
               <View style={styles.boostTagContainer}>
-                <Icon name="md-trending-up" style={styles.boostTagIcon}/>
-                <Text style={styles.boostTagLabel}>{i18n.t('boosted').toUpperCase()}</Text>
+                <Icon name="md-trending-up" style={ThemedStyles.style.colorSecondaryText}/>
+                <Text style={[styles.boostTagLabel, ThemedStyles.style.colorSecondaryText]}>{i18n.t('boosted').toUpperCase()}</Text>
               </View>
             }
             { !!this.props.entity.edited &&
               <View style={styles.boostTagContainer}>
-                <Text style={styles.boostTagLabel}>· {i18n.t('edited').toUpperCase()}</Text>
+                <Text style={[styles.boostTagLabel, ThemedStyles.style.colorSecondaryText]}>· {i18n.t('edited').toUpperCase()}</Text>
               </View>
             }
           </TouchableOpacity>
@@ -374,12 +375,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  boostTagIcon: {
-    color: '#777',
-  },
   boostTagLabel: {
-    color: '#777',
-    fontWeight: '200',
+    fontWeight: '400',
     marginLeft: 2,
     fontSize:10,
   },

src/newsfeed/activity/OwnerBlock.js

@@ -16,6 +16,7 @@ import {
 import FastImage from 'react-native-fast-image';
 
 import withPreventDoubleTap from '../../common/components/PreventDoubleTap';
+import ThemedStyles from '../../styles/ThemedStyles';
 const DebouncedTouchableOpacity = withPreventDoubleTap(TouchableOpacity);
 
 /**
@@ -54,7 +55,7 @@ export default class OwnerBlock extends PureComponent {
 
     return (
       <DebouncedTouchableOpacity onPress={this._navToGroup} style={styles.groupContainer}>
-        <Text style={styles.groupName} lineBreakMode='tail' numberOfLines={1}>
+        <Text style={[styles.groupName, ThemedStyles.style.colorPrimaryText]} lineBreakMode='tail' numberOfLines={1}>
           > { this.props.entity.containerObj.name }
         </Text>
       </DebouncedTouchableOpacity>
@@ -78,7 +79,7 @@ export default class OwnerBlock extends PureComponent {
         <View style={styles.body}>
           <View style={styles.nameContainer}>
             <DebouncedTouchableOpacity onPress={this._navToChannel}>
-              <Text style={styles.username}>
+              <Text style={[styles.username, ThemedStyles.style.colorPrimaryText]}>
                 { channel.username }
               </Text>
             </DebouncedTouchableOpacity>
@@ -127,6 +128,5 @@ const styles = StyleSheet.create({
   groupName: {
     fontWeight: 'bold',
     fontFamily: 'Roboto',
-    color: '#888',
   }
 });

src/newsfeed/activity/RemindOwnerBlock.js

@@ -18,6 +18,7 @@ import FastImage from 'react-native-fast-image';
 
 import { CommonStyle } from '../../styles/Common';
 import i18n from '../../common/services/i18n.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * Remind Owner Block
@@ -44,14 +45,14 @@ export default class RemindOwnerBlock extends PureComponent {
           <FastImage source={avatarSrc} style={styles.avatar}/>
         </TouchableOpacity>
         <View style={styles.body}>
-          <TouchableOpacity onPress={this._navToChannel} style={[CommonStyle.flexContainer, CommonStyle.columnAlignStart]}>
-            <Text style={styles.username}>
+          <TouchableOpacity onPress={this._navToChannel} style={[CommonStyle.flexContainer]}>
+            <Text style={[styles.username, ThemedStyles.style.colorSecondaryText]}>
               { entity.username }
             </Text>
             { this.props.entity.boosted &&
               <View style={styles.boostTagContainer}>
-                <Icon name="md-trending-up" type='ionicon' size={13} iconStyle={styles.boostTagIcon} />
-                <Text style={styles.boostTagLabel}>{i18n.t('boosted')}</Text>
+                <Icon name="md-trending-up" type='ionicon' size={13} iconStyle={ThemedStyles.style.colorSecondaryText} />
+                <Text style={[styles.boostTagLabel, ThemedStyles.style.colorSecondaryText]}>{i18n.t('boosted').toUpperCase()}</Text>
               </View>
             }
           </TouchableOpacity>
@@ -74,8 +75,7 @@ const styles = StyleSheet.create({
     color: '#777',
   },
   boostTagLabel: {
-    color: '#777',
-    fontWeight: '200',
+    fontWeight: '400',
     marginLeft: 2,
     fontSize: 9,
   },
@@ -85,6 +85,7 @@ const styles = StyleSheet.create({
     paddingLeft: 8,
     paddingTop: 8,
     alignItems: 'center',
+    // justifyContent: 'center',
     flexDirection: 'row',
   },
   icon: {
@@ -100,13 +101,14 @@ const styles = StyleSheet.create({
     borderColor: '#EEE',
   },
   body: {
+    justifyContent: 'center',
     marginLeft: 8,
     flex:1
   },
   username: {
     fontWeight: 'bold',
     fontFamily: 'Roboto',
-    color: '#444',
     fontSize: 13,
+    lineHeight: 25,
   },
 });

src/newsfeed/activity/actions/CommentsAction.js

@@ -14,6 +14,7 @@ import { CommonStyle as CS } from '../../../styles/Common';
 import Counter from './Counter';
 import withPreventDoubleTap from '../../../common/components/PreventDoubleTap';
 import { FLAG_CREATE_COMMENT } from '../../../common/Permissions';
+import ThemedStyles from '../../../styles/ThemedStyles';
 
 // prevent double tap in touchable
 const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity);
@@ -36,7 +37,7 @@ class CommentsAction extends Component {
 
     const canComment = this.props.entity.allow_comments && this.props.entity.can(FLAG_CREATE_COMMENT);
 
-    const color = canComment ? (this.props.entity['comments:count'] > 0 ? CS.colorPrimary : CS.colorAction) : CS.colorLightGreyed;
+    const color = canComment ? (this.props.entity['comments:count'] > 0 ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon) : CS.colorLightGreyed;
 
     return (
       <TouchableOpacityCustom style={[CS.flexContainer, CS.centered, CS.rowJustifyCenter]} onPress={this.openComments} testID={this.props.testID}>

src/newsfeed/activity/actions/Counter.js

@@ -10,6 +10,7 @@ import {
 
 import { CommonStyle as CS } from '../../../styles/Common';
 import abbrev from '../../../common/helpers/abbrev';
+import ThemedStyles from '../../../styles/ThemedStyles';
 
 import type {
   TextStyleProp,
@@ -33,7 +34,6 @@ export default class Counter extends PureComponent<PropsType> {
    */
   static defaultProps = {
     size: 15,
-    style: CS.colorAction
   };
 
   /**
@@ -51,7 +51,7 @@ export default class Counter extends PureComponent<PropsType> {
     return (
       <View style={[CS.columnAlignCenter]}>
         <Text
-          style={[style, { fontSize: size}]}
+          style={[ThemedStyles.style.colorIcon, style, { fontSize: size}]}
           {...otherProps}
         >
           {count > 0 ? abbrev(count,0) : ''}

src/newsfeed/activity/actions/RemindAction.js

@@ -13,6 +13,7 @@ import withPreventDoubleTap from '../../../common/components/PreventDoubleTap';
 import testID from '../../../common/helpers/testID';
 import { FLAG_REMIND } from '../../../common/Permissions';
 import { useRoute, useNavigation } from '@react-navigation/native';
+import ThemedStyles from '../../../styles/ThemedStyles';
 
 // prevent double tap in touchable
 const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity);
@@ -23,8 +24,8 @@ const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity);
 export default function({ entity, size = 20, vertical = false }) {
   const color = entity.can(FLAG_REMIND)
     ? entity.reminds > 0
-      ? CS.colorPrimary
-      : CS.colorAction
+      ? ThemedStyles.style.colorLink
+      : ThemedStyles.style.colorIcon
     : CS.colorLightGreyed;
 
   const route = useRoute();

src/newsfeed/activity/actions/ThumbUpAction.js

@@ -23,6 +23,7 @@ import i18n from '../../../common/services/i18n.service';
 import logService from '../../../common/services/log.service';
 import { FLAG_VOTE } from '../../../common/Permissions';
 import remoteAction from '../../../common/RemoteAction';
+import ThemedStyles from '../../../styles/ThemedStyles';
 
 // prevent double tap in touchable
 const TouchableOpacityCustom = withPreventDoubleTap(TouchableOpacity);
@@ -61,7 +62,7 @@ class ThumbUpAction extends Component {
 
     const canVote = entity.can(FLAG_VOTE);
 
-    const color = canVote ? (this.voted ? CS.colorPrimary : CS.colorAction) : CS.colorLightGreyed;
+    const color = canVote ? (this.voted ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon) : CS.colorLightGreyed;
 
     return (
       <TouchableOpacityCustom

src/newsfeed/activity/metrics/ActivityMetrics.js

@@ -22,6 +22,7 @@ import colors from '../../../styles/Colors';
 import abbrev from '../../../common/helpers/abbrev';
 import token from '../../../common/helpers/token';
 import number from '../../../common/helpers/number';
+import ThemedStyles from '../../../styles/ThemedStyles';
 
 /**
  * Activity metrics component
@@ -49,15 +50,15 @@ export default class ActivityMetrics extends Component {
           CommonStyle.borderGreyed,
           CommonStyle.paddingLeft,
           CommonStyle.paddingRight,
-          CommonStyle.backgroundLight,
+          ThemedStyles.style.backgroundSeparator,
           styles.container
         ]}>
           <View style={[CommonStyle.rowJustifyCenter, CommonStyle.alignCenter]}>
-            <Text style={styles.counter}>{abbrev(token(entity.wire_totals.tokens), 0)} <Icon name="ios-flash" color={'#777'}/></Text>
+            <Text style={styles.counter}>{abbrev(token(entity.wire_totals.tokens), 0)} <Icon name="ios-flash" /></Text>
           </View>
           <View style={[CommonStyle.rowJustifyCenter, CommonStyle.alignCenter]}>
             <Text style={[styles.counter]}> · </Text>
-            <Text style={styles.counter}>{number(entity.impressions, 0)} <McIcon name="eye" color={'#777'}/></Text>
+            <Text style={styles.counter}>{number(entity.impressions, 0)} <McIcon name="eye" /></Text>
           </View>
         </View>
       </View>
@@ -67,7 +68,6 @@ export default class ActivityMetrics extends Component {
 
 const styles = StyleSheet.create({
   counter: {
-    color: '#777',
     alignItems: 'center',
     fontSize: 11,
   },

src/newsfeed/topbar/Topbar.js

@@ -17,6 +17,7 @@ import {
 import { CommonStyle } from '../../styles/Common';
 import colors from '../../styles/Colors';
 import i18n from '../../common/services/i18n.service';
+import ThemedStyles from '../../styles/ThemedStyles';
 
 /**
  * Newsfeed top bar
@@ -40,13 +41,13 @@ export default class Topbar extends Component {
   render() {
     return (
       <View>
-        <View style={[styles.container, CommonStyle.shadow]}>
+        <View style={[styles.container, CommonStyle.shadow, ThemedStyles.style.backgroundSecondary]}>
           <View style={styles.topbar}>
-            <TouchableOpacity style={[styles.tab, this.selected('subscribed')]} onPress={() => this.props.newsfeed.setFilter('subscribed')}>
-              <Text style={CommonStyle.fontXS}>{i18n.t('newsfeed.subscribed')}</Text>
+            <TouchableOpacity style={[styles.tab, {borderBottomColor: ThemedStyles.getColor('secondary_background')}, this.selected('subscribed')]} onPress={() => this.props.newsfeed.setFilter('subscribed')}>
+              <Text style={CommonStyle.fontM}>{i18n.t('newsfeed.subscribed')}</Text>
             </TouchableOpacity>
-            <TouchableOpacity style={[styles.tab, this.selected('boostfeed')]} onPress={() => this.props.newsfeed.setFilter('boostfeed')}>
-              <Text style={CommonStyle.fontXS}>{i18n.t('newsfeed.boostfeed')}</Text>
+            <TouchableOpacity style={[styles.tab,  {borderBottomColor: ThemedStyles.getColor('secondary_background')}, this.selected('boostfeed')]} onPress={() => this.props.newsfeed.setFilter('boostfeed')}>
+              <Text style={CommonStyle.fontM}>{i18n.t('newsfeed.boostfeed')}</Text>
             </TouchableOpacity>
           </View>
         </View>
@@ -64,7 +65,6 @@ const styles = StyleSheet.create({
     paddingTop: 5,
     borderBottomWidth: StyleSheet.hairlineWidth,
     borderBottomColor: '#EEE',
-    backgroundColor: '#FFF',
   },
   topbar: {
     flex: 1,
@@ -79,7 +79,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     borderBottomWidth: 2,
-    borderBottomColor: '#FFF',
   },
   tabSelected: {
     borderBottomColor: colors.primary,

src/notifications/NotificationsScreen.js

-import React, {
-  Component
-} from 'react';
-
-import {
-  Text,
-  View,
-  FlatList,
-} from 'react-native';
-
-import {
-  observer,
-  inject
-} from 'mobx-react'
-
-import Icon from 'react-native-vector-icons/Ionicons';
+import React, { Component } from 'react';
+
+import { Text, View, FlatList } from 'react-native';
+
+import { observer, inject } from 'mobx-react';
+
 import MIcon from 'react-native-vector-icons/MaterialIcons';
 
-import stores from '../../AppStores';
 import CaptureFab from '../capture/CaptureFab';
 import { CommonStyle as CS } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
 import Notification from './notification/Notification';
 import NotificationsTopbar from './NotificationsTopbar';
-import NotificationsTabIcon from './NotificationsTabIcon';
 import ErrorBoundary from '../common/components/ErrorBoundary';
-import CenteredLoading from '../common/components/CenteredLoading';
 import i18n from '../common/services/i18n.service';
-import featuresService from '../common/services/features.service';
-import TabIcon from '../tabs/TabIcon';
 import TopbarNew from '../topbar/TopbarNew';
+import ThemedStyles from '../styles/ThemedStyles';
+import OnFocus from '../common/components/helper/OnFocus';
 
 /**
  * Notification Screen
  */
+export default
 @inject('notifications', 'user')
 @observer
-export default class NotificationsScreen extends Component {
+class NotificationsScreen extends Component {
+  /**
+   * On screen focus
+   */
+  onFocus = () => {
+    this.props.notifications.list.clearList();
+    this.props.notifications.refresh();
+    this.props.notifications.setUnread(0);
+  };
 
   /**
    * On component mount
    */
   componentDidMount() {
-    this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
-      // ignore back navigation
-      if (s.action.type === 'Navigation/NAVIGATE' && s.action.routeName === 'Notifications') {
-        //this.props.notifications.loadList(true);
-        this.props.notifications.setUnread(0);
-        this.props.notifications.refresh();
-      }
-    });
-
     this.initialLoad();
   }
 
@@ -57,7 +44,6 @@ export default class NotificationsScreen extends Component {
    * Initial load
    */
   async initialLoad() {
-
     try {
       await this.props.notifications.readLocal();
     } finally {
@@ -71,9 +57,6 @@ export default class NotificationsScreen extends Component {
   componentWillUnmount() {
     // clear data to free memory
     this.props.notifications.list.clearList();
-    if (this.disposeEnter) {
-      this.disposeEnter();
-    }
   }
 
   /**
@@ -132,12 +115,13 @@ export default class NotificationsScreen extends Component {
         stickyHeaderIndices={[0]}
         windowSize={8}
         refreshing={list.refreshing}
-        style={[CS.backgroundWhite, CS.flexContainer]}
+        style={[ThemedStyles.style.backgroundSecondary, CS.flexContainer]}
       />
     );
 
     return (
       <View style={CS.flexContainer}>
+        <OnFocus onFocus={this.onFocus}/>
         <TopbarNew title={i18n.t('tabTitleNotifications')}/>
         {body}
         <CaptureFab navigation={this.props.navigation} />
@@ -148,21 +132,24 @@ export default class NotificationsScreen extends Component {
   /**
    * Key extractor
    */
-  keyExtractor = (item, index) => `${item.time_created}:${item.from.guid}:${item.entity ? item.entity.guid + index : index}`
+  keyExtractor = (item, index) =>
+    `${item.time_created}:${item.from.guid}:${
+      item.entity ? item.entity.guid + index : index
+    }`;
 
   /**
    * Clear and reload
    */
   refresh = () => {
     this.props.notifications.refresh();
-  }
+  };
 
   /**
    * Load more rows
    */
   loadMore = () => {
-    this.props.notifications.loadList()
-  }
+    this.props.notifications.loadList();
+  };
 
   /**
    * render row

src/notifications/NotificationsTopbar.js

@@ -14,6 +14,7 @@ import MIcon from 'react-native-vector-icons/MaterialIcons';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import colors from '../styles/Colors';
 import { CommonStyle } from '../styles/Common';
+import ThemedStyles from '../styles/ThemedStyles';
 
 @inject('notifications')
 @observer
@@ -27,23 +28,25 @@ export default class NotificacionsTopbar extends Component {
   render() {
     const filter = this.props.notifications.filter;
 
+    const bstyle = {borderBottomColor: ThemedStyles.getColor('secondary_background')};
+
     return (
-      <View style={[styles.container, CommonStyle.shadow]}>
+      <View style={[styles.container, CommonStyle.shadow, ThemedStyles.style.backgroundSecondary]}>
         <View style={styles.topbar}>
-          <View style={[styles.tab, this.selected('all')]}>
-            <Icon name="bell" size={22} color={filter=='all' ? colors.primary : color} onPress={()=> this.props.notifications.setFilter('all')} style={styles.button} />
+          <View style={[styles.tab, bstyle, this.selected('all')]}>
+            <Icon name="bell" size={22} style={[styles.button, filter=='all' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]} onPress={()=> this.props.notifications.setFilter('all')} />
           </View>
-          <View style={[styles.tab, this.selected('tags')]}>
-            <Icon name="tag" size={22} color={filter == 'tags' ? colors.primary : color} onPress={() => this.props.notifications.setFilter('tags')} style={styles.button} />
+          <View style={[styles.tab, bstyle, this.selected('tags')]}>
+            <Icon name="tag" size={22} style={[styles.button, filter == 'tags' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('tags')} />
           </View>
-          <View style={[styles.tab, this.selected('comments')]}>
-           <MIcon name="chat-bubble" size={22} color={filter == 'comments' ? colors.primary : color} onPress={() => this.props.notifications.setFilter('comments')} style={styles.button} />
+          <View style={[styles.tab, bstyle, this.selected('comments')]}>
+           <MIcon name="chat-bubble" size={22} style={[styles.button, filter == 'comments' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('comments')} />
           </View>
-          <View style={[styles.tab, this.selected('boosts')]}>
-            <Icon name="trending-up" size={22} color={filter =='boosts' ? colors.primary : color} onPress={() => this.props.notifications.setFilter('boosts')} style={styles.button} />
+          <View style={[styles.tab, bstyle, this.selected('boosts')]}>
+            <Icon name="trending-up" size={22} style={[styles.button, filter =='boosts' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon]} onPress={() => this.props.notifications.setFilter('boosts')} />
           </View>
-          <View style={[styles.tab, this.selected('votes')]}>
-            <IonIcon name="md-thumbs-up" size={22} color={filter =='votes' ? colors.primary : color } onPress={() => this.props.notifications.setFilter('votes')} style={styles.button} />
+          <View style={[styles.tab, bstyle, this.selected('votes')]}>
+            <IonIcon name="md-thumbs-up" size={22} style={[styles.button, filter =='votes' ? ThemedStyles.style.colorLink : ThemedStyles.style.colorIcon ]} onPress={() => this.props.notifications.setFilter('votes')} />
           </View>
         </View>
       </View>
@@ -59,9 +62,6 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     paddingTop:5,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: '#EEE',
-    backgroundColor: '#FFF',
   },
   topbar: {
     flex: 1,
@@ -76,7 +76,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     borderBottomWidth: 2,
-    borderBottomColor: '#FFF',
   },
   tabSelected: {
     borderBottomColor: colors.primary,

src/styles/Colors.js

@@ -21,6 +21,7 @@ export const LIGHT_THEME = {
   secondary_text: '#939397',
   button_backgound: '#5DBAC0',
   button_border: '#D8D8D8',
+  separator: '#E6E6E6',
   done: '#4C92A4',
   action: '#A5A5A5',
   icon: '#777777',
@@ -35,6 +36,7 @@ export const DARK_THEME = {
   secondary_text: '#AEB0B8',
   button_backgound: '#5DBAC0',
   button_border: '#404A4E',
+  separator: '#323C3F',
   done: '#4C92A4',
   action: '#A5A5A5',
   icon: '#BEC0C1',

src/styles/ThemedStyles.js

@@ -207,6 +207,9 @@ class ThemedStylesStore {
       colorIcon: {
         color: theme.icon
       },
+      colorSeparator: {
+        color: theme.separator
+      },
       // backgrounds
       backgroundWhite: {
         backgroundColor: 'white'
@@ -214,12 +217,22 @@ class ThemedStylesStore {
       backgroundBlack: {
         backgroundColor: 'black'
       },
+      backgroundLink: {
+        backgroundColor: theme.link,
+      },
       backgroundPrimary: {
         backgroundColor: theme.primary_background,
       },
       backgroundSecondary: {
         backgroundColor: theme.secondary_background,
       },
+      backgroundButton: {
+        backgroundColor: theme.button_backgound,
+      },
+      backgroundSeparator: {
+        backgroundColor: theme.separator,
+      },
+
       // fonts
       fontXS: {
         fontSize: 10

src/tabs/TabsScreenNew.js

 import React, { useCallback } from 'react';
 
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-
-const Tab = createBottomTabNavigator();
 import { View, Platform, TouchableOpacity } from 'react-native';
+import { Avatar } from 'react-native-elements';
 
 import NewsfeedScreen from '../newsfeed/NewsfeedScreen';
 import NotificationsScreen from '../notifications/NotificationsScreen';
 import DiscoveryScreen from '../discovery/DiscoveryScreen';
-import isIphoneX from '../common/helpers/isIphoneX';
 import MoreScreenNew from './MoreScreenNew';
 import ThemedStyles from '../styles/ThemedStyles';
 import TabIcon from './TabIcon';
 import NotificationIcon from '../notifications/NotificationsTabIcon';
 import AppStores from '../../AppStores';
 import { MINDS_CDN_URI } from '../config/Config';
-import { Avatar } from 'react-native-elements';
+
+const Tab = createBottomTabNavigator();
 
 /**
  * Main tabs
  * @param {Object} props
  */
-const Tabs = function({navigation}) {
+const Tabs = function({ navigation }) {
   const isIOS = Platform.OS === 'ios';
 
   const navToCapture = useCallback(() => navigation.push('Capture'), [

yarn.lock

@@ -8197,10 +8197,10 @@ react-native-safe-area-context@^0.7.2:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-0.7.2.tgz#bec7f339eb1fd52716fd0ebe4ccc12645c7385ee"
   integrity sha512-xdPFBt7usIKa4QYxRzNWFKeMbukRltFOAoFK0mqURm7wzxWH9Kg0rPyGzXXdgmAFTrT7Nz98h7Pc9/9Ue0TSJQ==
 
-react-native-screens@^2.0.0-beta.2:
-  version "2.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-beta.2.tgz#317e844e02134b42aa0e3551da925c511cc58d64"
-  integrity sha512-N+k4S/Wr+YGjzuGF49fB4VjIG6Fcaj4md3uxTsyeshEILGptPWAlgb5hAgn6C9xOj1x/rrAoXwZmrPNxPw6CSg==
+react-native-screens@^2.0.0-beta.4:
+  version "2.0.0-beta.4"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-beta.4.tgz#650e61d238a92b8a173e695124365f7181767870"
+  integrity sha512-wrbhTSNVcgdNcdby3h4CzrYKAA3bf/86UR2vEUIcp8gydzVxi2FQiopBavIrcwFJ9PvwXrERB5rF0VYUkzHpIw==
   dependencies:
     debounce "^1.2.0"