android/build.gradle

@@ -10,7 +10,7 @@ buildscript {
         targetSdkVersion = 28
         supportLibVersion = "28.0.0"
         androidXCore = "1.0.2"
-        glideVersion = "4.7.1"
+        glideVersion = "4.9.0"
         kotlinVersion = '1.3.10'
     }
     repositories {

index.js

@@ -5,7 +5,7 @@ import "./global";
 import { AppRegistry, Platform } from 'react-native';
 import App from './App';
 import { enableScreens } from 'react-native-screens';
-enableScreens();
+enableScreens(Platform.OS !== 'android');
 
 // const modules = require.getModules();
 // const moduleIds = Object.keys(modules);

ios/Podfile.lock

@@ -216,7 +216,7 @@ PODS:
     - react-native-video/Video (= 5.0.2)
   - react-native-video/Video (5.0.2):
     - React
-  - react-native-webview (7.5.0):
+  - react-native-webview (8.1.0):
     - React
   - React-RCTActionSheet (0.61.4):
     - React-Core/RCTActionSheetHeaders (= 0.61.4)
@@ -269,7 +269,7 @@ PODS:
     - React
   - RNExitApp (1.1.0):
     - React
-  - RNFastImage (7.0.2):
+  - RNFastImage (8.0.0):
     - React
     - SDWebImage (~> 5.0)
     - SDWebImageWebPCoder (~> 0.2.3)
@@ -283,7 +283,7 @@ PODS:
     - React
   - RNReanimated (1.7.0):
     - React
-  - RNScreens (2.0.0-beta.4):
+  - RNScreens (2.0.0-beta.7):
     - React
   - RNSentry (1.2.2):
     - React
@@ -514,7 +514,7 @@ SPEC CHECKSUMS:
   react-native-safe-area-context: 4b3d1b9ebb040a4814a222703e7434b20c95fcf5
   react-native-sqlite-storage: f06bfba10f67f989c00b6a699b9c2b80a816edbe
   react-native-video: d01ed7ff1e38fa7dcc6c15c94cf505e661b7bfd0
-  react-native-webview: deb4a57eee4906e992e2f84bb087a15fd302378e
+  react-native-webview: 88d83b4df2e792cfc36c952b1c496e2ac01cf0b8
   React-RCTActionSheet: 7369b7c85f99b6299491333affd9f01f5a130c22
   React-RCTAnimation: d07be15b2bd1d06d89417eb0343f98ffd2b099a7
   React-RCTBlob: 8e0b23d95c9baa98f6b0e127e07666aaafd96c34
@@ -533,13 +533,13 @@ SPEC CHECKSUMS:
   RNConvertPhAsset: 9b366b8a1abc194b76572712c6f7dd89c9e4e37f
   RNDeviceInfo: 687c1b2ab6d86ff1ca1208783320cd144138c7f2
   RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
-  RNFastImage: 9b0c22643872bb7494c8d87bbbb66cc4c0d9e7a2
+  RNFastImage: c104f15f04c4f68bd65c9645cc27900bbacd9cc7
   RNFileShareIntent: 783adf7c4386c6024dd5dfeb96cc7836948f8b47
   RNFS: 0d4191b1052bef9ce70deff00a5b4169c62bbd9b
   RNGestureHandler: 911d3b110a7a233a34c4f800e7188a84b75319c6
   RNLocalize: 07eb7a91d10021cdf59d80061ebf3adb8a5b5688
   RNReanimated: 031fe8d9ea93c2bd689a40f05320ef9d96f74d7f
-  RNScreens: 6053a007667bea81a69087caadf103bba04c032e
+  RNScreens: b9ea46d65967a1f74b9aaa1229d0f74f58d216b5
   RNSentry: 9cfa3717b1e6bf9ad4b124683e78e3b98b01d3af
   RNShare: 8b171d4b43c1d886917fdd303bf7a4b87167b05c
   RNSVG: f6177f8d7c095fada7cfee2e4bb7388ba426064c

package.json

@@ -51,7 +51,7 @@
     "react-native-elements": "^1.2.7",
     "react-native-exception-handler": "^2.10.8",
     "react-native-exit-app": "wumke/react-native-exit-app",
-    "react-native-fast-image": "^7.0.2",
+    "react-native-fast-image": "DylanVann/react-native-fast-image#e94e6fee66e1c60c6e8602eee20d7d5456b79a41",
     "react-native-file-share-intent": "Minds/react-native-file-share-intent",
     "react-native-file-type": "^0.0.8",
     "react-native-flash-message": "^0.1.15",
@@ -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.4",
+    "react-native-screens": "^2.0.0-beta.7",
     "react-native-share": "^2.0.0",
     "react-native-snap-carousel": "^3.8.2",
     "react-native-sqlite-storage": "^4.1.0",
@@ -82,7 +82,7 @@
     "react-native-switch-pro": "^1.0.4",
     "react-native-vector-icons": "^6.6.0",
     "react-native-video": "^5.0.2",
-    "react-native-webview": "^7.4.2",
+    "react-native-webview": "^8.1.0",
     "rn-apk": "^0.2.9",
     "rne-modal-tooltip": "gist:b28c003d87c619674def0878473338a0",
     "socket.io-client": "^2.3.0",

src/blogs/BlogCard.js

@@ -18,6 +18,7 @@ import formatDate from '../common/helpers/date';
 import { CommonStyle as CS} from '../styles/Common';
 import { FLAG_VIEW } from '../common/Permissions';
 import Actions from '../newsfeed/activity/Actions';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Blog Card
@@ -52,9 +53,10 @@ export default class BlogCard extends PureComponent {
     const channel = this.props.entity.ownerObj;
     const image = blog.getBannerSource();
     const title = this.cleanTitle(blog.title);
+    const theme = ThemedStyles.style;
 
     return (
-      <TouchableOpacity onPress={this.navToBlog} style={CS.backgroundWhite}>
+      <TouchableOpacity onPress={this.navToBlog} style={theme.backgroundSecondary}>
         <FastImage source={image} style={styles.banner} resizeMode={FastImage.resizeMode.cover} />
         <View style={[CS.padding2x]}>
           <View style={[CS.columnAlignStart, CS.fullWidth]}>

src/blogs/BlogViewHTML.js

-import React, {
-  Component
-} from 'react';
+import React, { PureComponent } from 'react';
 
 import {
-  View,
   Text,
   Dimensions,
   Linking,
   ActivityIndicator,
-} from "react-native";
+  View,
+} from 'react-native';
 
 import { WebView } from 'react-native-webview';
+import ThemedStyles from '../styles/ThemedStyles';
+import CenteredLoading from '../common/components/CenteredLoading';
 
-const style = `
+const style = () => `
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800'>
   <style>
     body, html {
@@ -21,6 +21,8 @@ const style = `
       /*padding-right: 4px;*/
       font-size: 12px;
       letter-spacing: 0;
+      background-color: ${ThemedStyles.getColor('secondary_background')};
+      color: ${ThemedStyles.getColor('primary_text')};
       line-height: 20px;
     }
 
@@ -32,7 +34,7 @@ const style = `
     br, p, ul, ol {
       font-size: 16px;
       font-family: Roboto, Helvetica, Arial, sans-serif;
-      color: #6a6a6a;
+      color: ${ThemedStyles.getColor('secondary_text')};;
       font-weight: 400;
       line-height: 20px;
       text-rendering: optimizeLegibility;
@@ -49,7 +51,7 @@ const style = `
       margin-bottom: 0.58em;
       font-weight: 400;
       font-style: normal;
-      color: rgba(0,0,0,.72);
+      color: ${ThemedStyles.getColor('primary_text')};;
       margin-top: 20px;
 
 
@@ -65,7 +67,7 @@ const style = `
       font-weight: 600;
       font-family: Roboto;
       line-height: 1.1;
-      color: #444;
+      color: ${ThemedStyles.getColor('primary_text')};;
       font-size: 24px;
     }
 
@@ -129,73 +131,129 @@ const injectedJavaScript = `
   true;
 `;
 
-export default class BlogViewHTML extends Component {
+/**
+ * Render html
+ */
+const renderHTML = function(props) {
+  let html = props.html || '';
+  try {
+    //Decode to utf8
+    html = decodeURIComponent(escape(html.trim()));
+  } catch (err) {
+    html = props.html;
+  }
+
+  if (html.indexOf('<iframe') >= 0) {
+    const iframeOpen = new RegExp(/\<iframe/g);
+    const iframeClose = new RegExp(/\<\/iframe\>/g);
+    const badSrc = new RegExp(/src=\"\/\//g);
+    html = html.replace(iframeOpen, '<div class="iframewrapper"><iframe');
+    html = html.replace(iframeClose, '</iframe></div>');
+    html = html.replace(badSrc, 'src="https://');
+  }
 
+  return `<!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <html>
+      ${style()}
+      <body class="${props.bodyClass}">
+        ${html}
+      </body>
+    </html>`;
+  };
+
+/**
+ * Blog view html
+ */
+export default class BlogViewHTML extends PureComponent {
+  /**
+   * @var all allowed origins
+   */
+  all = ['*'];
+
+  /**
+   * state
+   */
   state = {
-    height: Dimensions.get('window').height,
+    style: { height: Dimensions.get('window').height, flex: 0, height: 0, opacity: 0 },
+    html: {html:''}
   };
 
-  onMessage = (evt) => {
-    const height = parseInt(evt.nativeEvent.data);
+  /**
+   * On event message =
+   */
+  onMessage = evt => {
+    let height = parseInt(evt.nativeEvent.data, 10);
 
-    if (height > this.state.height)
-      this.setState({ height });
-  }
+    height += 30;
 
-  renderHTML() {
-    let width = Math.round(Dimensions.get('window').width);
-    let html = this.props.html || '';
-    try {
-      //Decode to utf8
-      html = decodeURIComponent(escape(html.trim()));
-    } catch (err) {
-      html = this.props.html;
-    }
-
-    if (html.indexOf('<iframe') >= 0) {
-      const iframeOpen = new RegExp(/\<iframe/g);
-      const iframeClose = new RegExp(/\<\/iframe\>/g);
-      const badSrc = new RegExp(/src=\"\/\//g);
-      html = html.replace(iframeOpen, '<div class="iframewrapper"><iframe');
-      html = html.replace(iframeClose, '</iframe></div>');
-      html = html.replace(badSrc, 'src="https://');
-    }
-
-    return `<!DOCTYPE html><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-      <html>
-        ${style}
-        <body class="${this.props.bodyClass}">
-          ${html}
-        </body>
-      </html>`;
-  }
+    if (height > this.state.style.height) {
+      this.setState({ style: { height, flex: 0 } });
+    }
+  };
+
+  /**
+   * Set ref
+   */
+  setRef = ref => {
+    this.webview = ref;
+  };
+
+  /**
+   * On error
+   */
+  onError = () => <Text>Sorry, failed to load. please try again</Text>;
+
+  /**
+   * On nav state change
+   */
+  onStateChange = event => {
+    if (event.url.indexOf('http') > -1) {
+      this.webview.stopLoading();
+      Linking.openURL(event.url);
+    }
+  };
+
+  /**
+   * Render loading
+   */
+  renderLoading = () => (
+    <CenteredLoading/>
+  );
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.html !== prevState.original) {
+      return {
+        html: { html: renderHTML(nextProps), basePath: '' },
+        original: nextProps.html,
+      };
+    }
+    return null;
+  }
 
+  /**
+   * Render
+   */
   render() {
     return (
       <WebView
-        originWhitelist={['*']}
-        ref={(ref) => { this.webview = ref; }}
+        originWhitelist={this.all}
+        ref={this.setRef}
         scrollEnabled={false}
-        source={{ html: this.renderHTML(), baseUrl: '' }}
-        mixedContentMode='compatibility'
-        style={{ height: this.state.height}}
+        source={this.state.html}
+        mixedContentMode="compatibility"
+        style={this.state.style}
         javaScriptEnabled={true}
         domStorageEnabled={true}
         allowsInlineMediaPlayback={true}
-        startInLoadingState={false}
+        // startInLoadingState={true}
         injectedJavaScript={injectedJavaScript}
         onMessage={this.onMessage}
-        renderLoading={() => <ActivityIndicator size={'small'} />}
-        renderError={() => (<Text>Sorry, failed to load. please try again</Text>)}
-        onNavigationStateChange={(event) => {
-          if (event.url.indexOf('http') > -1) {
-            this.webview.stopLoading();
-            Linking.openURL(event.url);
-          }
-        }}
-        >
-      </WebView>
-    )
+        // renderLoading={this.renderLoading}
+        startInLoadingState={true}
+        renderLoading={() => (<View style={{flex: 1, backgroundColor: 'green'}}/>)}
+        renderError={this.onError}
+        onNavigationStateChange={this.onStateChange}
+      />
+    );
   }
 }
\ No newline at end of file

src/blogs/BlogsViewScreen.js

@@ -41,13 +41,14 @@ import ThumbDownAction from '../newsfeed/activity/actions/ThumbDownAction';
 import RemindAction from '../newsfeed/activity/actions/RemindAction';
 import CommentsAction from '../newsfeed/activity/actions/CommentsAction';
 import shareService from '../share/ShareService';
-import Provider from '../comments/CommentsStoreProvider';
+import commentsStoreProvider from '../comments/CommentsStoreProvider';
 import CommentList from '../comments/CommentList';
 import CenteredLoading from '../common/components/CenteredLoading';
 import logService from '../common/services/log.service';
 import i18n from '../common/services/i18n.service';
 import featuresService from '../common/services/features.service';
 import { FLAG_VIEW } from '../common/Permissions';
+import ThemedStyles from '../styles/ThemedStyles';
 
 /**
  * Blog View Screen
@@ -149,6 +150,7 @@ export default class BlogsViewScreen extends Component {
    */
   getHeader() {
     const blog = this.props.blogsView.blog;
+    const theme = ThemedStyles.style;
 
     const actions = (
       <View style={[CS.rowJustifyStart]}>
@@ -166,13 +168,13 @@ export default class BlogsViewScreen extends Component {
         {actionSheet}
       </View>) : (null);
     return (
-      <View style={styles.screen}>
+      <View style={[styles.screen, theme.backgroundSecondary]}>
         <FastImage source={image} resizeMode={FastImage.resizeMode.cover} style={styles.image} />
         <Text style={styles.title}>{blog.title}</Text>
         {optMenu}
         <View style={styles.ownerBlockContainer}>
           <OwnerBlock entity={blog} navigation={this.props.navigation}>
-            <Text style={styles.timestamp}>{formatDate(blog.time_created)}</Text>
+            <Text style={[styles.timestamp, theme.colorSecondaryText]}>{formatDate(blog.time_created)}</Text>
           </OwnerBlock>
         </View>
         {actions}
@@ -245,6 +247,8 @@ export default class BlogsViewScreen extends Component {
    */
   render() {
 
+    const theme = ThemedStyles.style;
+
     if (!this.props.blogsView.blog) {
       return <CenteredLoading />;
     } else {
@@ -259,7 +263,7 @@ export default class BlogsViewScreen extends Component {
     }
 
     return (
-      <View style={[CS.flexContainer, CS.backgroundWhite]}>
+      <View style={[CS.flexContainer, theme.backgroundSecondary]}>
         {
           !this.state.error ?
             <CommentList
@@ -318,8 +322,6 @@ const styles = StyleSheet.create({
     paddingLeft: 12,
     paddingRight: 12,
     fontSize: 22,
-    color: '#444',
-    fontFamily: 'Roboto',
     // fontWeight: '800',
     fontFamily: 'Roboto-Black', // workaround android ignoring >= 800
   },
@@ -332,7 +334,6 @@ const styles = StyleSheet.create({
     paddingBottom: 12,
   },
   screen: {
-    backgroundColor: '#FFF',
     flex:1
   },
   image: {

src/discovery/DiscoveryScreen.js

@@ -612,7 +612,7 @@ class DiscoveryScreen extends Component {
    */
   renderBlog = (row) => {
     return (
-      <View style={[CS.paddingBottom2x, CS.backgroundLight]}>
+      <View style={[CS.paddingBottom2x, ThemedStyles.style.backgroundSeparator]}>
         <ErrorBoundary containerStyle={CS.hairLineBottom}>
           <BlogCard entity={row.item} navigation={this.props.navigation} />
         </ErrorBoundary>

src/gathering/Gathering.js

@@ -9,12 +9,6 @@ import gatheringService from '../common/services/gathering.service';
  * Gathering
  */
 class Gathering extends React.Component {
-  /**
-   * Remove navigation header
-   */
-  static navigationOptions = {
-    header: null,
-  };
 
   /**
    * Constructor

src/groups/GroupsListItem.js

@@ -11,6 +11,7 @@ import colors from '../styles/Colors';
 import i18n from '../common/services/i18n.service';
 import {CommonStyle as CS} from '../styles/Common';
 import {FLAG_JOIN} from '../common/Permissions';
+import ThemedStyles from '../styles/ThemedStyles';
 
 export default
 @inject('groupView')
@@ -53,13 +54,14 @@ class GroupsListItem extends Component {
     const button = this.getButton();
     return (
       <ListItem
-        containerStyle={CS.noBorderBottom}
+        containerStyle={[CS.noBorderBottom, ThemedStyles.style.backgroundSecondary]}
         title={this.props.group.name}
         keyExtractor={item => item.rowKey}
         leftAvatar={this.state.source}
         subtitle={i18n.t('groups.listMembersCount', {
           count: this.props.group['members:count'],
         })}
+        subtitleStyle={ThemedStyles.style.colorSecondaryText}
         onPress={this._onPress}
         hideChevron={!button}
         rightIcon={button}

src/navigation/NavigationStack.js

@@ -104,7 +104,7 @@ const AppStack = function(props) {
       <AppStackNav.Screen name="Wallet" component={WalletScreen}/>
       <AppStackNav.Screen name="BlogList" component={BlogsListScreen}/>
       <AppStackNav.Screen name="BoostConsole" component={BoostConsoleScreen}/>
-      <AppStackNav.Screen name="BlogView" component={BlogsViewScreen}/>
+      <AppStackNav.Screen name="BlogView" component={BlogsViewScreen} options={hideHeader}/>
       <AppStackNav.Screen name="WireFab" component={FabScreen}/>
       <AppStackNav.Screen name="WalletHistory" component={WalletHistoryScreen}/>
       <AppStackNav.Screen name="ViewImage" component={ViewImageScreen}/>

src/newsfeed/NewsfeedScreen.js

@@ -80,12 +80,14 @@ export default class NewsfeedScreen extends Component {
   }
 
   async loadFeed() {
+
+    this.props.discovery.init();
+
     await this.props.newsfeed.feedStore.fetchRemoteOrLocal();
 
     // load groups after the feed
     await this.groupsBar.initialLoad();
     // load discovery after the feed is loaded
-    this.props.discovery.init();
     this.props.discovery.fetch();
 
     // load messenger

yarn.lock

@@ -8011,10 +8011,9 @@ react-native-exit-app@wumke/react-native-exit-app:
   version "1.1.0"
   resolved "https://codeload.github.com/wumke/react-native-exit-app/tar.gz/f38d15dfa07f8e8799622b2d05d400bb40683edf"
 
-react-native-fast-image@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/react-native-fast-image/-/react-native-fast-image-7.0.2.tgz#e06b21f42f4a9786eaa86f3db35d919070fb8403"
-  integrity sha512-MfuzJbC0RjYobR2gFCdqe1I7jvNOCfDkjQ7VGOHXniqjohhULMkcWNBE9Umovi9Dx93lJ6t5utcE2wf/09zvlg==
+react-native-fast-image@DylanVann/react-native-fast-image#e94e6fee66e1c60c6e8602eee20d7d5456b79a41:
+  version "8.0.0"
+  resolved "https://codeload.github.com/DylanVann/react-native-fast-image/tar.gz/e94e6fee66e1c60c6e8602eee20d7d5456b79a41"
 
 react-native-file-share-intent@Minds/react-native-file-share-intent:
   version "1.1.1"
@@ -8197,10 +8196,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.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==
+react-native-screens@^2.0.0-beta.8:
+  version "2.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-2.0.0-beta.7.tgz#12f2bf09328c8e483d80fb9ff8d40fee0689a98c"
+  integrity sha512-NcnuyoxhPBvc3clAIlz7DmnvjUqUWG6UqdKjaiRP40H+tjQVVdges8N4dt98fRIHaDVtq4LJKj683g4H5PVJRA==
   dependencies:
     debounce "^1.2.0"
 
@@ -8265,10 +8264,10 @@ react-native-video@^5.0.2:
     prop-types "^15.5.10"
     shaka-player "^2.4.4"
 
-react-native-webview@^7.4.2:
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-7.5.0.tgz#6ef3eb9a1e82056e4208e5aaee8673cdc2942d1f"
-  integrity sha512-aMw15ExeEljOno9JfRWwU5+eTVw2AKFuWK7aHwc67cOq/ERRI6QtM148FPQA1yBegpUd0vwVpr1WdOI1PM+pdw==
+react-native-webview@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-8.1.0.tgz#6c8976c24792402eabe34b8bb86a43ad414266f6"
+  integrity sha512-LTuNogyk2TowsZ3vOSQRlCQHrFdCQMKOGMHd+c2Q6ILGlRh6yYnYBiHCIdwo1oEhKYb6qrloDZYzZu4LuFrT5w==
   dependencies:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"