App.js

@@ -17,6 +17,7 @@ import {
   Clipboard,
   StatusBar,
   UIManager,
+  RefreshControl,
 } from 'react-native';
 import { Provider, observer } from 'mobx-react';
 import RNBootSplash from 'react-native-bootsplash';
@@ -203,6 +204,11 @@ class App extends Component<Props, State> {
             style: [ThemedStyles.style.colorPrimaryText, { fontFamily: 'Roboto'}, origin.props.style]
         });
     };
+
+    RefreshControl.defaultProps = {
+      tintColor: ThemedStyles.getColor('icon_active'),
+      colors: ThemedStyles.getColor('icon_active')
+    }
   }
 
   /**

src/channel/ChannelScreen.js

@@ -54,7 +54,7 @@ class ChannelScreen extends Component {
    * Load data on mount
    */
   async componentWillMount() {
-    this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
+    this.disposeEnter = this.props.navigation.addListener('focus', (s) => {
       const params = this.props.route.params;
       const store = this.props.channel.store(this.guid);
       if (params && params.prepend) {

src/discovery/DiscoveryFeedScreen.js

@@ -41,12 +41,6 @@ import ThemedStyles from '../styles/ThemedStyles';
 @inject('discovery')
 export default class DiscoveryFeedScreen extends Component {
 
-  static navigationOptions = ({ navigation }) => {
-    return {
-      'title': navigation.state.params.title || ''
-    }
-  }
-
   /**
    * Render activity
    */

src/discovery/DiscoveryScreen.js

@@ -111,7 +111,7 @@ class DiscoveryScreen extends Component {
    */
   componentDidMount() {
     // load data on enter
-    this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
+    this.disposeEnter = this.props.navigation.addListener('focus', (s) => {
       setTimeout(() => {
         this.setState({active: true});
         const params = this.props.route.params;
@@ -123,8 +123,15 @@ class DiscoveryScreen extends Component {
       }, 50);
     });
 
+    this.disposeTabPress = this.props.navigation.addListener('tabPress', e => {
+      if (this.props.navigation.isFocused()) {
+        stores.discovery.reload();
+        e.preventDefault();
+      }
+    });
+
     // clear data on leave
-    this.disposeLeave = this.props.navigation.addListener('didBlur', (s) => {
+    this.disposeLeave = this.props.navigation.addListener('blur', (s) => {
       setTimeout(() => {
         this.setState({active: false});
       }, 50);
@@ -138,10 +145,12 @@ class DiscoveryScreen extends Component {
     if (this.disposeEnter) {
       this.disposeEnter();
     }
-
     if (this.disposeLeave) {
       this.disposeLeave();
     }
+    if (this.disposeTabPress) {
+      this.disposeTabPress();
+    }
   }
 
   /**

src/discovery/DiscoveryViewScreen.js

-import React, {
-  Component
-} from 'react';
-
-import {
-  StyleSheet,
-  FlatList,
-  Text,
-  View,
-  ScrollView,
-  Image,
-  Dimensions
-} from 'react-native';
-
-import OwnerBlock from '../newsfeed/activity/OwnerBlock';
-import Actions from '../newsfeed/activity/Actions';
-import logService from '../common/services/log.service';
-
-/**
- * Discovery View screen
- */
-export default class DiscoveryViewScreen extends Component {
-
-  state = {
-    height: 400
-  };
-
-  getEntity() {
-    return this.props.navigation.state.params.entity;
-  }
-
-  formatDate(timestamp) {
-    const t = new Date(timestamp * 1000);
-    return t.toDateString();
-  }
-
-  render() {
-    const entity = this.getEntity();
-
-    const view = this.getView(entity);
-
-    return (
-      <ScrollView>
-        <OwnerBlock entity={entity.ownerObj} navigation={this.props.navigation}>
-          <Text style={styles.timestamp}>{this.formatDate(entity.time_created)}</Text>
-        </OwnerBlock>
-        <View style={styles.textcontainer}>
-          <Text>{entity.title}</Text>
-        </View>
-        {view}
-        <Actions entity={entity}></Actions>
-      </ScrollView>
-    )
-  }
-
-  getView(entity) {
-    Image.getSize(entity.thumbnail_src, (width, height) => {
-      this.setState({height})
-    }, (error) => {
-      logService.exception(`Couldn't get the image size: ${error.message}`);
-    });
-
-    switch (entity.subtype) {
-      case 'image':
-        const imguri = { uri: entity.thumbnail_src };
-        return  <Image
-                  source={imguri}
-                  style={{ height: this.state.height }}
-                  resizeMode="contain"
-                />;
-
-      default:
-        return <Text>Not Implemented</Text>
-    }
-  }
-}
-
-const styles = StyleSheet.create({
-  textcontainer: {
-    paddingLeft: 10,
-  },
-  image: {
-    flex:1
-  },
-  timestamp: {
-    fontSize: 11,
-    color: '#888',
-  },
-});
-

src/discovery/NewsfeedFilters.js

@@ -7,7 +7,7 @@ import {
   Text,
   View,
   LayoutAnimation,
-  TouchableHighlight,
+  TouchableOpacity,
   UIManager,
   StyleSheet,
   Platform,
@@ -110,10 +110,10 @@ class NewsfeedFilters extends Component {
 
     return (
       <View style={CS.rowJustifyStart}>
-        <TouchableHighlight
+        <TouchableOpacity
           style={[CS.padding, CS.paddingLeft2x, CS.paddingRight2x, hashActive ? CS.backgroundPrimary : themed.backgroundTertiary, {borderBottomRightRadius:25, borderTopRightRadius:25}]}
           onPress={this.showDrawer}
-          underlayColor='#fff'
+
           {...testID('Filter hashtags selector button')}
         >
           <View style={[CS.rowJustifyStart, CS.centered]}>
@@ -122,15 +122,15 @@ class NewsfeedFilters extends Component {
               style={[CS.centered, (hashActive ? themed.colorWhite : themed.colorTertiaryText), {paddingTop:2}]}
               size={ 20 }
             />
-            {this.props.hashtag.hashtag ? <Text style={[CS.colorIcon, CS.fontM]}>{this.props.hashtag.hashtag}</Text> : null}
+            {this.props.hashtag.hashtag ? <Text style={[CS.colorWhite, CS.fontM]}>{this.props.hashtag.hashtag}</Text> : null}
           </View>
-        </TouchableHighlight>
+        </TouchableOpacity>
         <View style={[CS.rowJustifySpaceEvenly, CS.flexContainer]}>
-          <TouchableHighlight
+          <TouchableOpacity
             style={[CS.padding]}
             onPress={ () => store.setFilter('hot') }
             disabled={disableHotLatest}
-            underlayColor='#fff'
+
             {...testID('Filter hot button')}
           >
             <View style={[CS.rowJustifyCenter, CS.centered]}>
@@ -156,9 +156,9 @@ class NewsfeedFilters extends Component {
                 </Text>
               ) : null}
             </View>
-          </TouchableHighlight>
+          </TouchableOpacity>
           <View style={CS.rowJustifyCenter}>
-            <TouchableHighlight style={[CS.padding]} onPress={ () => store.setFilter('top') } underlayColor='#fff' {...testID('Filter top button')}>
+            <TouchableOpacity style={[CS.padding]} onPress={ () => store.setFilter('top') } {...testID('Filter top button')}>
               <View style={[CS.rowJustifyCenter, CS.centered]}>
                 <Icon
                   name="trending-up"
@@ -167,12 +167,12 @@ class NewsfeedFilters extends Component {
                 />
                 {!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'top' ? themed.colorIconActive : themed.colorIcon, CS.paddingLeft]}>{i18n.t('newsfeedFilters.top')}</Text> : null}
               </View>
-            </TouchableHighlight>
+            </TouchableOpacity>
             {store.filter == 'top' &&
               <Menu
                 ref={this.setMenuRef}
                 button={
-                  <TouchableHighlight style={[CS.padding]} onPress={this.showMenu} >
+                  <TouchableOpacity style={[CS.padding]} onPress={this.showMenu} >
                     <View style={[CS.rowJustifyCenter, CS.centered]}>
                       <Text style={[CS.fontM, store.filter == 'top' ? themed.colorIconActive : themed.colorIcon, CS.paddingLeft, CS.paddingRight]}>{store.period}</Text>
                       <IonIcon
@@ -181,7 +181,7 @@ class NewsfeedFilters extends Component {
                         size={ 22 }
                       />
                     </View>
-                  </TouchableHighlight>
+                  </TouchableOpacity>
                 }
               >
                 <MenuItem onPress={this.setPeriod12}>{i18n.t('newsfeedFilters.topPeriod12')}</MenuItem>
@@ -192,11 +192,11 @@ class NewsfeedFilters extends Component {
               </Menu>
             }
           </View>
-          <TouchableHighlight
+          <TouchableOpacity
             style={[CS.padding]}
             onPress={ () => store.setFilter('latest') }
             disabled={disableHotLatest}
-            underlayColor='#fff'
+
             {...testID('Filter latest button')}
           >
             <View style={[CS.rowJustifyCenter, CS.centered]}>
@@ -207,7 +207,7 @@ class NewsfeedFilters extends Component {
               />
               {!this.props.hashtag.hashtag ? <Text style={[CS.fontM, store.filter == 'latest' ? themed.colorIconActive : (disableHotLatest ? themed.colorSeparator : themed.colorIcon), CS.paddingLeft]}>{i18n.t('newsfeedFilters.latest')}</Text> : null}
             </View>
-          </TouchableHighlight>
+          </TouchableOpacity>
         </View>
         {(!GOOGLE_PLAY_STORE && Platform.OS !== 'ios') && <View style={[CS.padding, CS.paddingLeft2x, CS.paddingRight2x]}>
           <NsfwToggle

src/groups/GroupViewScreen.js

@@ -119,7 +119,7 @@ export default class GroupViewScreen extends Component {
     // load data async
     this.initialLoad();
 
-    this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
+    this.disposeEnter = this.props.navigation.addListener('focus', (s) => {
       const params = this.props.route.params;
       if (params && params.prepend) {
         this.props.groupView.prepend(params.prepend);

src/media/MindsVideo.js

@@ -86,7 +86,7 @@ class MindsVideo extends Component {
       onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
     });
 
-    this.onScreenBlur = NavigationService.addListener('didBlur', () => {
+    this.onScreenBlur = NavigationService.addListener('blur', () => {
       this.pause();
     });
   }

src/media/ViewImageScreen.js

@@ -31,7 +31,7 @@ export default class ViewImageScreen extends Component {
   constructor(props) {
     super(props);
 
-    const custom_data = this.props.navigation.state.params.entity.custom_data;
+    const custom_data = this.props.route.params.entity.custom_data;
 
     const width = Dimensions.get('window').width;
 
@@ -49,7 +49,7 @@ export default class ViewImageScreen extends Component {
   }
 
   getSource() {
-    return this.props.navigation.state.params.source;
+    return this.props.route.params.source;
   }
 
   render() {

src/messenger/MessengerScreen.js

@@ -45,7 +45,7 @@ class MessengerScreen extends Component {
   componentDidMount() {
 
     // // load data on enter
-    this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
+    this.disposeEnter = this.props.navigation.addListener('focus', (s) => {
       this.props.messengerList.loadList(true);
       //this.setState({ active: true });
     });

src/navigation/NavigationStack.js

@@ -92,7 +92,11 @@ const AppStack = function(props) {
       <AppStackNav.Screen name="Capture" component={CapturePoster} />
       <AppStackNav.Screen name="Activity" component={ActivityScreen}/>
       <AppStackNav.Screen name="Conversation" component={ConversationScreen}/>
-      <AppStackNav.Screen name="DiscoveryFeed" component={DiscoveryFeedScreen}/>
+      <AppStackNav.Screen
+        name="DiscoveryFeed"
+        component={DiscoveryFeedScreen}
+        options={({ route }) => ({ title: route.params.title || '' })}
+      />
       <AppStackNav.Screen name="Subscribers" component={ChannelSubscribers}/>
       <AppStackNav.Screen name="Settings" component={SettingsScreen}/>
       <AppStackNav.Screen name="SettingsBlockedChannels" component={BlockedChannelsScreen}/>

src/newsfeed/NewsfeedScreen.js

@@ -64,11 +64,23 @@ export default class NewsfeedScreen extends Component {
    */
   componentDidMount() {
 
+    this.disposeTabPress = this.props.navigation.addListener('tabPress', e => {
+      if (this.props.navigation.isFocused()) {
+        if (stores.newsfeed.filter == 'subscribed') {
+          stores.newsfeed.scrollToTop();
+          stores.newsfeed.feedStore.refresh(true)
+        } else {
+          stores.newsfeed.refresh();
+        }
+        e.preventDefault();
+      }
+    });
+
     this.loadFeed();
     // this.props.newsfeed.loadBoosts();
 
-    this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
-      const params = this.props.navigation.state.params;
+    this.disposeEnter = this.props.navigation.addListener('focus', (s) => {
+      const params = this.props.route.params;
       if (params && params.prepend) {
 
         this.props.newsfeed.prepend(params.prepend);
@@ -106,6 +118,9 @@ export default class NewsfeedScreen extends Component {
     if (this.disposeEnter) {
       this.disposeEnter();
     }
+    if (this.disposeTabPress) {
+      this.disposeTabPress();
+    }
   }
 
   setGroupsBarRef = (r) => this.groupsBar = r;

src/newsfeed/activity/ActivityActionSheet.js

@@ -192,7 +192,7 @@ export default class ActivityActionSheet extends Component {
         { cancelable: false }
       );
 
-      if (this.props.navigation.state.routeName == 'Activity') {
+      if (this.props.route.routeName == 'Activity') {
         this.props.navigation.goBack();
       }
     } catch (err) {

src/newsfeed/activity/OwnerBlock.js

@@ -41,7 +41,7 @@ export default class OwnerBlock extends PureComponent {
     if (this.props.navigation) {
       let groupGuid;
       try {
-        groupGuid = this.props.navigation.state.params.group ? this.props.navigation.state.params.group.guid : this.props.navigation.state.params.guid;
+        groupGuid = this.props.route.params.group ? this.props.route.params.group.guid : this.props.route.params.guid;
       } catch {}
       if (groupGuid == this.props.entity.containerObj.guid) return;
 

src/onboarding/EmailConfirmationScreen.js

@@ -38,7 +38,7 @@ export default class EmailConfirmationScreen extends Component {
 
     const result = await sessionService
       .getUser()
-      .confirmEmail(this.props.navigation.state.params);
+      .confirmEmail(this.props.route.params);
 
     if (!result) {
       this.setState({ error: true });

src/report/ReportScreen.js

@@ -24,36 +24,10 @@ import i18n from '../common/services/i18n.service';
 
 import mindsService from '../common/services/minds.service';
 import CenteredLoading from '../common/components/CenteredLoading';
+import ThemedStyles from '../styles/ThemedStyles';
 
 export default class ReportScreen extends Component {
 
-  static navigationOptions = ({ navigation }) => ({
-    title: i18n.t('report'),
-    headerLeft: () => {
-      return <Icon name="chevron-left" size={38} color={colors.primary} onPress={
-        () => {
-          if (navigation.state.params && navigation.state.params.goBack) return navigation.state.params.goBack();
-          navigation.goBack();
-        }
-      }/>
-    },
-    headerRight: (
-      <View>
-        {
-          navigation.state.params.requireNote &&
-          <Button
-            title={i18n.t('settings.submit')}
-            onPress={navigation.state.params.confirmAndSubmit ?
-              navigation.state.params.confirmAndSubmit : () => null}
-          />
-        }
-      </View>
-    ),
-    transitionConfig: {
-      isModal: true
-    },
-  });
-
   state = {
     note: '',
     reason: null,
@@ -65,8 +39,37 @@ export default class ReportScreen extends Component {
    * Component did mount
    */
   componentDidMount() {
+    const navigation = this.props.navigation;
+
+    navigation.setOptions({
+      title: i18n.t('report'),
+      headerLeft: () => {
+        return <Icon name="chevron-left" size={38} color={colors.primary} onPress={
+          () => {
+            if (this.props.route.params && this.props.route.params.goBack) return this.props.route.params.goBack();
+            navigation.goBack();
+          }
+        }/>
+      },
+      headerRight: () => (
+        <View>
+          {
+            this.props.route.params.requireNote &&
+            <Button
+              title={i18n.t('settings.submit')}
+              onPress={this.props.route.params.confirmAndSubmit ?
+                this.props.route.params.confirmAndSubmit : () => null}
+            />
+          }
+        </View>
+      ),
+      transitionConfig: {
+        isModal: true
+      },
+    });
+
     this.setState({
-      entity: this.props.navigation.state.params.entity,
+      entity: this.props.route.params.entity,
     });
     this.loadReasons();
     this.props.navigation.setParams({ confirmAndSubmit: this.confirmAndSubmit.bind(this) });
@@ -205,7 +208,7 @@ export default class ReportScreen extends Component {
 
     const reasonItems = reasons.map((reason, i) => {
       return (
-        <TouchableOpacity style={styles.reasonItem} key={i} onPress={ () => this.state.reason ? this.selectSubreason(reason) : this.selectReason(reason) }>
+        <TouchableOpacity style={[styles.reasonItem, ThemedStyles.backgroundTertiary]} key={i} onPress={ () => this.state.reason ? this.selectSubreason(reason) : this.selectReason(reason) }>
           <View style={styles.reasonItemLabelContainer}>
             <View style={{ flexDirection: 'row', alignItems: 'stretch' }}>
               <Text style={styles.reasonItemLabel}>{ reason.label }</Text>
@@ -247,9 +250,9 @@ export default class ReportScreen extends Component {
     );
 
     return (
-      <ScrollView style={CS.flexContainer}>
+      <ScrollView style={[CS.flexContainer, ThemedStyles.style.backgroundSecondary]}>
         {this.state.reason && <Text style={[CS.fontM, CS.backgroundPrimary, CS.colorWhite, CS.padding]}>{this.state.reason.label}</Text>}
-        <View style={{ flex: 1 }}>
+        <View style={CS.flexContainer}>
           { !this.state.requireNote && this.renderReasons() }
 
           { this.state.requireNote && noteInput }
@@ -268,9 +271,6 @@ const styles = StyleSheet.create({
     paddingRight: 16,
     paddingTop: 8,
     paddingBottom: 8,
-    backgroundColor: '#FFF',
-    borderBottomWidth: 1,
-    borderBottomColor: '#ececec',
   },
   reasonItemLabelContainer: {
     flex: 1,
@@ -281,7 +281,6 @@ const styles = StyleSheet.create({
   reasonItemLabel: {
     flex: 1,
     fontWeight: '600',
-    color: '#444',
     textAlign: 'left',
   },
   chevronContainer: {

src/wallet/WalletScreen.js

@@ -54,7 +54,7 @@ export default class WalletScreen extends Component {
 
   componentWillMount() {
     if (FeaturesService.has('crypto')) {
-      this.disposeEnter = this.props.navigation.addListener('didFocus', async () => {
+      this.disposeEnter = this.props.navigation.addListener('focus', async () => {
         if ((await this.props.wallet.canShowOnboarding()) && (!this.props.user.hasRewards() || !this.props.user.hasEthWallet())) {
           setImmediate(() => {
             this.props.navigation.navigate('WalletOnboarding');

src/wallet/balances/WalletBalanceTokens.js

@@ -24,7 +24,7 @@ export default class WalletBalanceTokens extends Component {
   }
 
   componentWillMount() {
-    this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
+    this.disposeEnter = this.props.navigation.addListener('focus', (s) => {
       // ignore back navigation
       if (s.action.type === 'Navigation/NAVIGATE' && s.action.routeName === 'Wallet') {
         this.triggerRender(this.props.wallet);