(feat) mobx-react 6

App.js

@@ -18,7 +18,7 @@ import {
   StatusBar,
   UIManager,
 } from 'react-native';
-import { Provider, observer } from 'mobx-react/native';
+import { Provider, observer } from 'mobx-react';
 import RNBootSplash from 'react-native-bootsplash';
 import FlashMessage from 'react-native-flash-message';
 import { SafeAreaProvider } from 'react-native-safe-area-context';

AppErrors.js

@@ -5,7 +5,7 @@ import {
   setJSExceptionHandler,
 } from 'react-native-exception-handler';
 
-import {onError} from 'mobx-react';
+// import {onError} from 'mobx-react';
 import logService from './src/common/services/log.service';
 import * as Sentry from '@sentry/react-native';
 import shouldReportToSentry from './src/common/helpers/errors';
@@ -36,11 +36,11 @@ if (process.env.JEST_WORKER_ID === undefined) {
   });
 }
 
-// Log Mobx global errors
-onError(error => {
-  console.log(error);
-  logService.exception(error);
-});
+// // Log Mobx global errors
+// onError(error => {
+//   console.log(error);
+//   logService.exception(error);
+// });
 
 // react-native-exception-handler global handlers
 if (!__DEV__) {

package.json

@@ -33,8 +33,8 @@
     "ethjs-signer": "^0.1.1",
     "i18n-js": "^3.2.2",
     "lodash": "^4.17.15",
-    "mobx": "^5.14.0",
-    "mobx-react": "^5.4.4",
+    "mobx": "^5.15.4",
+    "mobx-react": "^6.1.8",
     "mobx-utils": "^5.4.1",
     "moment": "^2.24.0",
     "moment-timezone": "^0.5.27",

setupTests.js

@@ -14,7 +14,7 @@ global.XMLHttpRequest = XMLHttpRequest;
 configure({ adapter: new Adapter() });
 
 jest.mock('react-native-localize');
-jest.mock('mobx-react/native', () => require('mobx-react/custom'));
+jest.mock('mobx-react', () => require('mobx-react/custom'));
 
 jest.mock('./AppStores');
 jest.useFakeTimers();

src/auth/ModalConfirmPassword.js

@@ -16,7 +16,7 @@ import Modal from 'react-native-modal';
 
 import i18n from '../common/services/i18n.service';
 import authService from '../auth/AuthService';
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 import { ComponentsStyle } from '../styles/Components';
 import { CommonStyle } from '../styles/Common';
 import Colors from '../styles/Colors';

src/auth/RegisterForm.js

@@ -14,7 +14,7 @@ import {
 
 import authService from '../auth/AuthService';
 
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 
 import {CheckBox} from 'react-native-elements'
 

src/blockchain/BlockchainSettingsOverviewView.js

@@ -8,7 +8,7 @@ import {
   StyleSheet
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 
 @inject('wallet')
 @observer

src/blockchain/transaction-modal/BlockchainTransactionModalScreen.js

@@ -14,7 +14,7 @@ import {
 
 import Modal from 'react-native-modal';
 
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 import { ComponentsStyle } from '../../styles/Components';
 import { CommonStyle } from '../../styles/Common';
 import Web3Service from '../services/Web3Service';

src/blockchain/wallet/BlockchainWalletScreen.js

@@ -6,7 +6,7 @@ import {
   StyleSheet,
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 
 import { CommonStyle } from "../../styles/Common";
 

src/blockchain/wallet/details/BlockchainWalletDetailsScreen.js

@@ -18,7 +18,7 @@ import QRCode from 'react-native-qrcode-svg';
 import TransparentButton from '../../../common/components/TransparentButton';
 import Touchable from '../../../common/components/Touchable';
 
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 
 import BlockchainWalletService from '../BlockchainWalletService';
 import NavigationService from '../../../navigation/NavigationService';

src/blockchain/wallet/import/BlockchainWalletImportScreen.js

@@ -6,7 +6,7 @@ import {
   StyleSheet,
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 
 import TransparentButton from '../../../common/components/TransparentButton';
 

src/blockchain/wallet/list/BlockchainWalletList.js

@@ -7,7 +7,7 @@ import {
   StyleSheet
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
 import NavigationService from '../../../navigation/NavigationService';

src/blockchain/wallet/modal/BlockchainWalletModalScreen.js

@@ -11,7 +11,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 
 import { toJS } from 'mobx';
 
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 
 import BlockchainWalletList from '../list/BlockchainWalletList';
 

src/blogs/BlogsListScreen.js

@@ -13,7 +13,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native';
+} from 'mobx-react';
 
 import BlogCard from './BlogCard';
 import Toolbar from '../common/components/toolbar/Toolbar';
@@ -128,7 +128,7 @@ export default class BlogsListScreen extends Component {
     const store = this.props.blogs;
 
     const footer = this.getFooter()
-    
+
     empty = (
       <View style={ComponentsStyle.emptyComponentContainer}>
         <View style={ComponentsStyle.emptyComponent}>

src/blogs/BlogsViewScreen.js

@@ -25,7 +25,7 @@ import ActionSheet from 'react-native-actionsheet';
 
 import { Header } from '@react-navigation/stack';
 
-import { inject, observer } from 'mobx-react/native';
+import { inject, observer } from 'mobx-react';
 
 import FastImage from 'react-native-fast-image';
 import { Icon } from 'react-native-elements';

src/boost/BoostActionBar.js

@@ -20,7 +20,7 @@ import {
 } from 'react-native';
 import formatDate from '../common/helpers/date';
 
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 
 import IonIcon from 'react-native-vector-icons/Ionicons';
 

src/boost/BoostConsoleScreen.js

@@ -6,7 +6,7 @@ import {
   TouchableHighlight,
   Text
 } from 'react-native';
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 

src/boost/BoostTabBar.js

@@ -5,7 +5,7 @@ import React, {
   import {
     inject,
     observer
-  } from "mobx-react/native";
+  } from "mobx-react";
 
   import {
     Text,

src/boost/creator/BoostScreen.js

@@ -14,7 +14,7 @@ import {
 import Icon from 'react-native-vector-icons/Ionicons';
 import { Divider } from 'react-native-elements'
 
-import { inject } from 'mobx-react/native';
+import { inject } from 'mobx-react';
 import { CommonStyle } from '../../styles/Common';
 import { ComponentsStyle } from '../../styles/Components';
 import { getRates } from '../BoostService';

src/capture/CaptureFab.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import {
   observer,
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import {
   View,
@@ -30,7 +30,7 @@ export default class CaptureFab extends Component {
     if (featuresService.has('navigation-2020')) {
       return null;
     }
-    
+
     return (
       <Icon
         raised

src/capture/CapturePostButton.js

@@ -7,7 +7,7 @@ import {
   ActivityIndicator,
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import * as Progress from 'react-native-progress';
 import colors from '../styles/Colors';
 import { CommonStyle as CS } from '../styles/Common';

src/capture/CapturePoster.js

@@ -7,7 +7,7 @@ import {
   Alert
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import { Icon } from 'react-native-elements'
 import {
   NavigationActions

src/capture/CapturePosterFlags.js

 import React, { Component } from 'react';
 import { Text, TextInput, View, StyleSheet, Platform } from 'react-native';
-import { inject, observer } from 'mobx-react/native';
+import { inject, observer } from 'mobx-react';
 import FaIcon from 'react-native-vector-icons/FontAwesome';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import MdIcon from 'react-native-vector-icons/MaterialIcons';

src/channel/ChannelActions.js

@@ -9,7 +9,7 @@ import {
 
 import {
   observer,
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import i18n from '../common/services/i18n.service';

src/channel/ChannelScreen.js

@@ -13,7 +13,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import { Icon } from 'react-native-elements';
 

src/channel/card/ChannelCard.js

@@ -14,7 +14,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import { MINDS_CDN_URI } from '../../config/Config';

src/channel/carousel/RewardsCarousel.js

@@ -10,7 +10,7 @@ import {
 
 import {
   observer,
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import Carousel from '../../common/components/Carousel';

src/channel/header/ChannelHeader.js

@@ -14,7 +14,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import FastImage from 'react-native-fast-image';

src/channel/subscribers/ChannelSubscribers.js

@@ -15,7 +15,7 @@ import { ListItem, Avatar } from 'react-native-elements';
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import Icon from 'react-native-vector-icons/MaterialIcons';

src/channel/subscription/SubscriptionRequestList.js

@@ -12,7 +12,7 @@ import {
 
 import type { Node, Element } from 'react';
 import type SubscriptionRequestStore from './SubscriptionRequestStore';
-import { inject, observer } from 'mobx-react/native';
+import { inject, observer } from 'mobx-react';
 
 import SubscriptionRequest from './SubscriptionRequest';
 import i18n from '../../common/services/i18n.service';

src/channel/toolbar/Toolbar.js

@@ -8,7 +8,7 @@ import {
 
 import {
   observer,
-} from 'mobx-react/native';
+} from 'mobx-react';
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import IonIcon from 'react-native-vector-icons/Ionicons';

src/comments/Comment.js

@@ -2,7 +2,7 @@ import React, {
   Component
 } from 'react';
 
-import { observer } from 'mobx-react/native';
+import { observer } from 'mobx-react';
 import * as entities from 'entities';
 
 import {

src/comments/CommentList.js

@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 
 import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import * as Progress from 'react-native-progress';
 import Icon from 'react-native-vector-icons/Ionicons';
 import IconMC from 'react-native-vector-icons/MaterialCommunityIcons';

src/comments/ReplyAction.js

@@ -11,7 +11,7 @@ import {
 
 import {
   observer,
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import { Icon } from 'react-native-elements';
 import { CommonStyle } from '../styles/Common';

src/common/components/ErrorLoading.js

@@ -10,7 +10,7 @@ import {
 
 import {
   observer
-} from 'mobx-react/native';
+} from 'mobx-react';
 
 import connectivityService from '../services/connectivity.service';
 

src/common/components/FeatureFlagSelect.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import featuresService from '../services/features.service';
 import {
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 /**
  * Feature Flag Select Component

src/common/components/FeedList.js

@@ -6,7 +6,7 @@ import {
   Text,
   ActivityIndicator,
 } from 'react-native';
-import { inject, observer } from 'mobx-react/native'
+import { inject, observer } from 'mobx-react'
 
 import Activity from '../../newsfeed/activity/Activity';
 import TileElement from '../../newsfeed/TileElement';

src/common/components/MediaView.js

@@ -4,7 +4,7 @@ import React, {
   Component
 } from 'react';
 
-import {observer} from "mobx-react/native";
+import {observer} from "mobx-react";
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
 import {
@@ -136,7 +136,7 @@ export default class MediaView extends Component {
    * Pause video if exist
    */
   pauseVideo() {
-    this.videoPlayer && this.videoPlayer.wrappedInstance && this.videoPlayer.wrappedInstance.pause();
+    this.videoPlayer && this.videoPlayer && this.videoPlayer.pause();
   }
 
   imageError = (err) => {

src/common/components/PhoneValidationComponent.js

@@ -13,7 +13,7 @@ import {
 import {
   inject,
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import PhoneInput from 'react-native-phone-input'
 
@@ -187,10 +187,10 @@ export default class PhoneValidationComponent extends Component {
           />
 
           <ListItemButton disabled={!this.canConfirm()} onPress={this.confirmAction}>
-            <Icon 
-              name={'check'} 
-              size={26} 
-              style={!this.canConfirm() ? CS.colorSecondaryText : CS.colorDone} 
+            <Icon
+              name={'check'}
+              size={26}
+              style={!this.canConfirm() ? CS.colorSecondaryText : CS.colorDone}
             />
           </ListItemButton>
         </View>

src/common/components/Pinned.js

 import React, {
   Component,
 } from 'react';
-import { observer } from 'mobx-react/native'
+import { observer } from 'mobx-react'
 import {
   StyleSheet,
 } from 'react-native';

src/common/components/TagInput.js

@@ -2,7 +2,7 @@ import React, {
   Component
 } from 'react';
 
-import { observer } from 'mobx-react/native';
+import { observer } from 'mobx-react';
 
 import {
   TextInput,

src/common/components/TagOptinDrawer.js

 import React, { Component } from 'react';
 import { Text, View, StyleSheet, ScrollView } from 'react-native';
-import { inject, observer } from 'mobx-react/native';
+import { inject, observer } from 'mobx-react';
 import Switch from 'react-native-switch-pro'
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import Modal from 'react-native-modal';

src/common/components/TagOptinModal.js

 import React, { Component } from 'react';
 import { Text, View, StyleSheet } from 'react-native';
-import { inject, observer } from 'mobx-react/native';
+import { inject, observer } from 'mobx-react';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import Modal from 'react-native-modal';
 import TagSelect from './TagSelect';

src/common/components/TagSelect.js

 import React, {
   Component
 } from 'react';
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import {
   TouchableOpacity,
   Text,

src/common/components/explicit/ExplicitImage.js

@@ -2,7 +2,7 @@ import React, {
   Component
 } from 'react';
 
-import { observer } from 'mobx-react/native';
+import { observer } from 'mobx-react';
 
 import {
   findNodeHandle,

src/common/components/explicit/ExplicitOverlay.js

@@ -9,7 +9,7 @@ import {
   View,
 } from 'react-native';
 
-import { observer } from 'mobx-react/native';
+import { observer } from 'mobx-react';
 import { CommonStyle as CS } from '../../../styles/Common';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { GOOGLE_PLAY_STORE } from '../../../config/Config';

src/common/components/explicit/ExplicitText.js

@@ -2,7 +2,7 @@ import React, {
   Component
 } from 'react';
 
-import {observer} from "mobx-react/native";
+import {observer} from "mobx-react";
 import * as entities from 'entities';
 import {
   Text,

src/discovery/DiscoveryFeedScreen.js

@@ -16,7 +16,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import DiscoveryTile from './DiscoveryTile';
 import DiscoveryUser from './DiscoveryUser';

src/discovery/DiscoveryScreen.js

@@ -21,7 +21,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import _ from 'lodash';
 
@@ -91,18 +91,19 @@ class DiscoveryScreen extends Component {
   /**
    * constructor
    */
-  constructor(props) {
-    super(props);
+  // constructor(props) {
+  //   super(props);
 
-    // this.props.discovery.init();
+  //   // this.props.discovery.init();
 
-    const params = this.props.route.params;
-    if (params && params.type) {
-      this.props.discovery.filters.setType(params.type);
-    }
+  //   const params = this.props.route.params;
+  //   if (params && params.type) {
+  //     console.log('ACAACACA')
+  //     this.props.discovery.filters.setType(params.type);
+  //   }
 
-    this.tileError = i18n.t('error');
-  }
+  //   this.tileError = i18n.t('error');
+  // }
 
   /**
    * On component will mount
@@ -112,7 +113,7 @@ class DiscoveryScreen extends Component {
     this.disposeEnter = this.props.navigation.addListener('didFocus', (s) => {
       setTimeout(() => {
         this.setState({active: true});
-        const params = this.props.navigation.state.params;
+        const params = this.props.route.params;
         if (params && params.query) {
           this.props.hashtag.setHashtag(params.query.replace('#',''));
           this.props.discovery.reload();

src/discovery/DiscoveryTile.js

@@ -4,7 +4,7 @@ import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
 
 import FastImage from 'react-native-fast-image';
 
-import {observer} from 'mobx-react/native';
+import {observer} from 'mobx-react';
 
 import ExplicitOverlay from '../common/components/explicit/ExplicitOverlay';
 import {CommonStyle as CS} from '../styles/Common';

src/discovery/DiscoveryUser.js

@@ -13,7 +13,7 @@ import {
 
 import {
   observer,
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import {
   MINDS_CDN_URI

src/discovery/DiscoveryUserNew.js

@@ -13,7 +13,7 @@ import {
 
 import {
   observer,
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import {
   MINDS_CDN_URI

src/discovery/NewsfeedFilters.js

@@ -15,7 +15,7 @@ import {
 
 import {
   observer, inject,
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import Icon from 'react-native-vector-icons/MaterialIcons';
@@ -49,7 +49,7 @@ export default class NewsfeedFilters extends Component {
   /**
    * Set tag drawer ref
    */
-  setTagDrawerRef = (r) => this._drawer = r ? r.wrappedInstance : null;
+  setTagDrawerRef = (r) => this._drawer = r ||  null;
 
   /**
    * Show period menu
@@ -91,10 +91,10 @@ export default class NewsfeedFilters extends Component {
   /**
    * Component will react (mobx)
    */
-  componentWillReact() {
-    // animate next layout change
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-  }
+  // componentWillReact() {
+  //   // animate next layout change
+  //   LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  // }
 
   /**
    * Render

src/groups/GroupViewScreen.js

@@ -18,7 +18,7 @@ import { Header } from '@react-navigation/stack';
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import ActionSheet from 'react-native-actionsheet';
 import { Icon } from 'react-native-elements';
@@ -132,13 +132,13 @@ export default class GroupViewScreen extends Component {
     }
 
     if (params.tab && this.headerRef) {
-      this.headerRef.wrappedInstance.onTabChange(params.tab)
+      this.headerRef.onTabChange(params.tab)
     }
   }
 
   componentDidUpdate() {
     if (this.moveToTab && this.headerRef) {
-      this.headerRef.wrappedInstance.onTabChange(this.moveToTab);
+      this.headerRef.onTabChange(this.moveToTab);
       this.moveToTab = '';
     }
   }

src/groups/GroupsBar.js

@@ -5,7 +5,7 @@ import React, {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import {
   FlatList, View, TouchableOpacity, StyleSheet, ActivityIndicator, Text

src/groups/GroupsBarItem.js

@@ -5,7 +5,7 @@ import React, {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import {
   Platform,

src/groups/GroupsListItem.js

 import React, {Component} from 'react';
 
-import {observer, inject} from 'mobx-react/native';
+import {observer, inject} from 'mobx-react';
 
 import {MINDS_CDN_URI} from '../config/Config';
 

src/groups/GroupsListItemNew.js

 import React, {Component} from 'react';
 
-import {observer, inject} from 'mobx-react/native';
+import {observer, inject} from 'mobx-react';
 
 import {MINDS_CDN_URI} from '../config/Config';
 

src/groups/GroupsListScreen.js

@@ -13,7 +13,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 
 import { Avatar } from 'react-native-elements';

src/groups/header/GroupHeader.js

@@ -13,7 +13,7 @@ import {
 
 import {
   observer, inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 import {debounce} from 'lodash';
 
 import FastImage from 'react-native-fast-image';

src/keychain/KeychainModalScreen.js

@@ -10,7 +10,7 @@ import {
 
 import Modal from 'react-native-modal';
 
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 import { ComponentsStyle } from '../styles/Components';
 import { CommonStyle } from '../styles/Common';
 import i18n from '../common/services/i18n.service';

src/media/ImageCard.js

 import React, {
     Component
   } from 'react';
-  
+
   import {
     Text,
     Image,
@@ -9,12 +9,12 @@ import React, {
     Button,
     StyleSheet,
   } from 'react-native';
-  
+
   import {
     observer,
     inject
-  } from 'mobx-react/native'
-  
+  } from 'mobx-react'
+
   import Icon from 'react-native-vector-icons/Ionicons';
   import { MINDS_CDN_URI } from '../config/Config';
   import FastImage from 'react-native-fast-image';
@@ -22,10 +22,10 @@ import React, {
   /**
    * Channel Card
    */
-  
+
   @observer
   export default class ImageCard extends Component {
-  
+
     /**
      * Get Channel Avatar
      */
@@ -33,15 +33,15 @@ import React, {
       const channel = this.props.entity.ownerObj;
       return { uri: MINDS_CDN_URI + 'icon/' + channel.guid + '/small/' + channel.icontime };
     }
-  
+
     /**
      * Render Card
      */
     render() {
       const entity = this.props.entity;
-  
+
       const image = { uri: entity.thumbnail_src };
-  
+
       return (
         <View>
           <FastImage source={image} style={styles.banner} resizeMode={FastImage.resizeMode.cover} />
@@ -60,8 +60,8 @@ import React, {
       )
     }
   }
-  
-  
+
+
   const styles = StyleSheet.create({
     headertextcontainer: {
       padding: 8,
@@ -79,10 +79,10 @@ import React, {
       flex:1,
     },
     ownerContainer: {
-      flex:1, 
+      flex:1,
       flexDirection: 'row',
-      alignSelf: 'flex-start', 
-      padding:3 , 
+      alignSelf: 'flex-start',
+      padding:3 ,
       alignItems: 'center',
       justifyContent: 'center'
     },

src/media/MindsVideo.js

@@ -20,7 +20,7 @@ import ProgressBar from './ProgressBar';
 
 let FORWARD_DURATION = 7;
 
-import {observer} from 'mobx-react/native';
+import {observer} from 'mobx-react';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {CommonStyle as CS} from '../styles/Common';
 import colors from '../styles/Colors';

src/media/VideoCard.js

@@ -12,7 +12,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import { MINDS_CDN_URI } from '../config/Config';

src/messenger/ConversationScreen.js

@@ -18,7 +18,7 @@ import {
 import {
   inject,
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/Ionicons';
 

src/messenger/MessengerInvite.js

@@ -11,7 +11,7 @@ import {
 
 import {
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import { CommonStyle } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';

src/messenger/MessengerOnboardingScreen.js

@@ -13,7 +13,7 @@ import {
 import {
   inject,
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import api from './../common/services/api.service';
 

src/messenger/MessengerScreen.js

@@ -10,7 +10,7 @@ import {
   ActivityIndicator,
 } from 'react-native';
 
-import {inject, observer} from 'mobx-react/native';
+import {inject, observer} from 'mobx-react';
 
 import _ from 'lodash';
 

src/messenger/MessengerSetup.js

@@ -15,7 +15,7 @@ import {
   inject,
   observer,
   Observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import { CommonStyle } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';

src/messenger/MessengerTabIcon.js

@@ -7,7 +7,7 @@ import {
 } from 'react-native';
 
 import colors from '../styles/Colors';
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import FAIcon from 'react-native-vector-icons/FontAwesome';
 import Icon from 'react-native-vector-icons/Ionicons';
 

src/messenger/MessengerTabIconNew.js

@@ -7,7 +7,7 @@ import {
 } from 'react-native';
 
 import colors from '../styles/Colors';
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import FAIcon from 'react-native-vector-icons/FontAwesome';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 

src/messenger/conversation/ConversationView.js

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 
 import Icon from 'react-native-vector-icons/Ionicons';
-import { observer } from 'mobx-react/native'
+import { observer } from 'mobx-react'
 
 import { MINDS_CDN_URI } from '../../config/Config';
 

src/messenger/conversation/Message.js

@@ -5,7 +5,7 @@ import React, {
 import {
   inject,
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import {
   Text,

src/navigation/NavigationStack.js

@@ -4,7 +4,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import LoadingScreen from '../LoadingScreen';
 import LoginScreen from '../auth/LoginScreen';
 import ForgotScreen from '../auth/ForgotScreen';
-// import TabsScreen from '../tabs/TabsScreen';
+import TabsScreen from '../tabs/TabsScreen';
 import TabsScreenNew from '../tabs/TabsScreenNew';
 import NotificationsScreen from '../notifications/NotificationsScreen';
 import NotificationsSettingsScreen from '../notifications/NotificationsSettingsScreen';
@@ -57,7 +57,7 @@ import featuresService from '../common/services/features.service';
 import ThemedStyles from '../styles/ThemedStyles';
 import { View } from 'react-native';
 import MessengerScreen from '../messenger/MessengerScreen';
-//import Topbar from '../topbar/Topbar';
+import Topbar from '../topbar/Topbar';
 
 
 const hideHeader = {headerShown: false};
@@ -72,14 +72,14 @@ const AppStack = function(props) {
   //   : withErrorBoundaryScreen(TabsScreen);
   return (
     <AppStackNav.Navigator screenOptions={ThemedStyles.defaultScreenOptions}>
-      <AppStackNav.Screen 
-        name="Tabs" 
+      <AppStackNav.Screen
+        name="Tabs"
         component={TabsScreenNew}
         options={hideHeader}
-        /*component={TabsScreen}  
-        options={({ navigation, route }) => ({
-          header: props => <Topbar {...props} />,
-        })}*/
+        // component={TabsScreen}
+        // options={({ navigation, route }) => ({
+        //   header: props => <Topbar {...props} />,
+        // })}
       />
       <AppStackNav.Screen name="EmailConfirmation" component={EmailConfirmationScreen}/>
       <AppStackNav.Screen name="Update" component={UpdatingScreen}/>

src/newsfeed/ActivityScreen.js

@@ -4,7 +4,7 @@ import {
   View,
   Text
 } from 'react-native';
-import { observer } from 'mobx-react/native'
+import { observer } from 'mobx-react'
 import FastImage from 'react-native-fast-image';
 
 import { CommonStyle as CS } from '../styles/Common';

src/newsfeed/NewsfeedList.js

@@ -6,7 +6,7 @@ import {
   Text,
   ActivityIndicator,
 } from 'react-native';
-import { inject, observer } from 'mobx-react/native'
+import { inject, observer } from 'mobx-react'
 import MIcon from 'react-native-vector-icons/MaterialIcons';
 
 import Activity from './activity/Activity';

src/newsfeed/NewsfeedScreen.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import { View } from 'react-native';
 
@@ -83,10 +83,13 @@ export default class NewsfeedScreen extends Component {
     await this.props.newsfeed.feedStore.fetchRemoteOrLocal();
 
     // load groups after the feed
-    await this.groupsBar.wrappedInstance.initialLoad();
+    await this.groupsBar.initialLoad();
     // load discovery after the feed is loaded
-    this.props.discovery.init();
-    this.props.discovery.fetch();
+    // setTimeout(() => {
+      console.log('ahora')
+      this.props.discovery.init();
+      this.props.discovery.fetch();
+    // }, 1000)
   }
 
   /**

src/newsfeed/TileElement.js

@@ -11,7 +11,7 @@ import FastImage from 'react-native-fast-image';
 
 import {
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import { createImageProgress } from 'react-native-image-progress';
 import ProgressCircle from 'react-native-progress/Circle';

src/newsfeed/activity/Actions.js

@@ -7,7 +7,7 @@ import {
   View
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 
 import ThumbUpAction from './actions/ThumbUpAction';
 import ThumbDownAction from './actions/ThumbDownAction';

src/newsfeed/activity/Activity.js

@@ -2,7 +2,7 @@ import React, {
   Component
 } from 'react';
 
-import {observer} from "mobx-react/native";
+import {observer} from "mobx-react";
 
 import {
   Text,
@@ -145,7 +145,7 @@ export default class Activity extends Component {
    * Render activity spacer
    */
   renderActivitySpacer = () => {
-    return this.props.isLast 
+    return this.props.isLast
       ? (<View style={styles.activitySpacer}></View>)
       : null;
   };
@@ -154,10 +154,10 @@ export default class Activity extends Component {
    * Render entity metrics
    */
   renderActivityMetrics = () => {
-    return ( 
+    return (
       !this.props.hideTabs &&
       !this.props.entity.isScheduled() &&
-      !this.props.entity.isPending() 
+      !this.props.entity.isPending()
     ) ? (<ActivityMetrics entity={this.props.entity}/>) : null
   };
 
@@ -188,7 +188,7 @@ export default class Activity extends Component {
         <Text style={[styles.yellowBannerText, CommonStyle.paddingLeft]}>
           {message}
         </Text>
-      </View> 
+      </View>
     );
   };
 

src/newsfeed/activity/ActivityEditor.js

@@ -12,7 +12,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native';
+} from 'mobx-react';
 
 import Button from '../../common/components/Button';
 

src/newsfeed/activity/actions/CommentsAction.js

@@ -2,7 +2,7 @@ import React, {
   Component
 } from 'react';
 
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 
 import {
   TouchableOpacity,

src/newsfeed/activity/actions/ThumbUpAction.js

@@ -12,7 +12,7 @@ import {
 
 import {
   observer,
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { CommonStyle as CS } from '../../../styles/Common';

src/newsfeed/activity/metrics/ActivityMetrics.js

@@ -11,7 +11,7 @@ import {
 import {
   inject,
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import McIcon from 'react-native-vector-icons/MaterialCommunityIcons';

src/newsfeed/topbar/TagsSubBar.js

@@ -14,7 +14,7 @@ import {
 import {
   inject,
   observer
-} from "mobx-react/native";
+} from "mobx-react";
 
 import { debounce } from 'lodash';
 
@@ -66,7 +66,7 @@ export default class TagsSubBar extends Component {
    * Show modal
    */
   showModal = () => {
-    this.modal.wrappedInstance.showModal();
+    this.modal.showModal();
   }
 
   /**

src/newsfeed/topbar/Topbar.js

@@ -5,7 +5,7 @@ import React, {
 import {
   inject,
   observer
-} from "mobx-react/native";
+} from "mobx-react";
 
 import {
   Text,

src/notifications/NotificationsScreen.js

@@ -11,7 +11,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/Ionicons';
 import MIcon from 'react-native-vector-icons/MaterialIcons';
@@ -37,23 +37,6 @@ import TopbarNew from '../topbar/TopbarNew';
 @observer
 export default class NotificationsScreen extends Component {
 
-  static navigationOptions = ({ navigation }) => ({
-    tabBarIcon: ({ tintColor }) => (
-      <NotificationsTabIcon tintColor={tintColor}/>
-    ),
-    headerRight: <Icon name="ios-options" size={18} color='#444' style={CS.padding2x} onPress={() => navigation.navigate('NotificationsSettings')} />,
-    tabBarOnPress: ({ navigation, defaultHandler }) => {
-      // tab button tapped again?
-      if (navigation.isFocused()) {
-        stores.notifications.list.clearList();
-        stores.notifications.refresh();
-        stores.notifications.setUnread(0);
-        return;
-      }
-      defaultHandler();
-    }
-  });
-
   /**
    * On component mount
    */

src/notifications/NotificationsSettingsScreen.js

@@ -12,7 +12,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Switch from 'react-native-switch-pro'
 import i18n from '../common/services/i18n.service';

src/notifications/NotificationsTabIcon.js

@@ -6,7 +6,7 @@ import {
   Platform,
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import FAIcon from 'react-native-vector-icons/FontAwesome';
 import CIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 

src/notifications/NotificationsTopbar.js

@@ -7,7 +7,7 @@ import {
 import {
   observer,
   inject
-} from 'mobx-react/native';
+} from 'mobx-react';
 
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import MIcon from 'react-native-vector-icons/MaterialIcons';

src/onboarding/OnboardingScreen.js

@@ -19,7 +19,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {
   inject,
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Wizard from '../common/components/Wizard';
 import HashtagsStep from './steps/HashtagsStep';
@@ -104,7 +104,7 @@ export default class OnboardingScreen extends Component {
     steps.push({
       component: <ChannelSetupStep ref={r => this.channelSetup = r}/>,
       onNext: async() => {
-        return await this.channelSetup.wrappedInstance.save();
+        return await this.channelSetup.save();
       }
     });
 

src/onboarding/OnboardingScreenNew.js

@@ -19,7 +19,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import {
   inject,
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Wizard from '../common/components/Wizard';
 

src/onboarding/steps/RewardsStep.js

@@ -13,7 +13,7 @@ import {
 import {
   inject,
   observer
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import PhoneInput from 'react-native-phone-input'
 

src/settings/SettingsScreen.js

@@ -29,7 +29,7 @@ import i18n from '../common/services/i18n.service';
 import appStores from '../../AppStores';
 import logService from '../common/services/log.service';
 import storageService from '../common/services/storage.service';
-import { observer } from 'mobx-react/native';
+import { observer } from 'mobx-react';
 import ModalPicker from '../common/components/ModalPicker';
 import ThemedStyles from '../styles/ThemedStyles';
 import featuresService from '../common/services/features.service';

src/settings/screens/EmailScreen.js

@@ -17,7 +17,7 @@ import CenteredLoading from '../../common/components/CenteredLoading';
 import Button from '../../common/components/Button';
 import { CommonStyle } from '../../styles/Common';
 import ModalConfirmPassword from '../../auth/ModalConfirmPassword';
-import { inject } from 'mobx-react/native'
+import { inject } from 'mobx-react'
 
 /**
  * Email settings screen

src/tabs/MoreScreen.js

@@ -18,7 +18,7 @@ import {
 
 import {
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import RNExitApp from 'react-native-exit-app';
 

src/tabs/MoreScreenNew.js

@@ -17,7 +17,7 @@ import {
 
 import {
   inject
-} from 'mobx-react/native'
+} from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import IconFa from 'react-native-vector-icons/FontAwesome5';

src/topbar/EmailConfirmation.js

@@ -4,7 +4,7 @@ import i18n from '../common/services/i18n.service';
 import emailConfirmationService from '../common/services/email-confirmation.service';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 import { CommonStyle as CS } from '../styles/Common';
-import { observer, inject } from 'mobx-react/native';
+import { observer, inject } from 'mobx-react';
 import isIphoneX from '../common/helpers/isIphoneX';
 
 /**
@@ -46,7 +46,7 @@ class EmailConfirmation extends Component {
 
     return (
       <View style={styles.container}>
-        
+
         <View style={styles.body}>
           <Text style={[CS.fontM, CS.colorWhite]}>
             {i18n.t('emailConfirm.confirm')}

src/topbar/ModalTopbar.js

@@ -8,7 +8,7 @@ import {
   TouchableOpacity
 } from 'react-native';
 
-import { observer, inject } from 'mobx-react/native'
+import { observer, inject } from 'mobx-react'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 export default class ModalTopbar extends Component {

src/topbar/SearchComponent.js

 import React, { Component } from 'react';
-import { observer } from 'mobx-react/native'
+import { observer } from 'mobx-react'
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { StyleSheet, View, SafeAreaView, Platform } from 'react-native';
@@ -17,7 +17,7 @@ class SearchComponent extends Component {
   state = {
     searchText: '',
   }
-  
+
   /**
    * Load search history
    */
@@ -51,7 +51,7 @@ class SearchComponent extends Component {
     const CS = ThemedStyles.style;
     return (
       <View>
-        <Icon 
+        <Icon
           onPress={!this.isSearching() ? this.toggleSearching : null}
           name="search"
           size={24}
@@ -65,7 +65,7 @@ class SearchComponent extends Component {
           <SafeAreaView style={[CS.flexContainer, CS.backgroundSecondary]}>
             <View style={[styles.header, CS.marginBottom4x, Platform.OS === 'android' ? CS.marginTop2x : CS.marginTop4x]}>
               <View style={[CS.rowJustifyStart, CS.paddingLeft2x]}>
-                <Icon 
+                <Icon
                   name="search"
                   size={24}
                   style={[CS.colorIcon, CS.marginRight2x, Platform.OS === 'android' ? CS.centered : null]}
@@ -78,10 +78,10 @@ class SearchComponent extends Component {
                   style={styles.textInput}
                 />
               </View>
-              <Icon 
-                onPress={this.toggleSearching} 
-                name="close" 
-                size={18} 
+              <Icon
+                onPress={this.toggleSearching}
+                name="close"
+                size={18}
                 style={[styles.button, CS.colorIcon, Platform.OS === 'android' ? CS.centered : null]}
               />
             </View>
@@ -89,7 +89,7 @@ class SearchComponent extends Component {
             <SearchResult
               user={this.props.user}
               ref={this.handleSearchResultRef}
-              navigation={this.props.navigation} 
+              navigation={this.props.navigation}
               search={this.search}/>
 
           </SafeAreaView>