@shoutem/ui 9.0.0-rc.3 → 9.0.0-rc.5

package/components/AnimatedScrollingText.js

@@ -1,8 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated } from 'react-native';
+import { Animated, ScrollView } from 'react-native';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { ScrollView } from './ScrollView';
 import { Text } from './Text';
 
 const DEFAULT_CONFIG = {
@@ -10,7 +9,7 @@ const DEFAULT_CONFIG = {
   waitDuration: 2000,
 };
 
-const AnimatedScrollingText = ({ text, config, style }) => {
+const AnimatedScrollingText = ({ text, config = DEFAULT_CONFIG, style }) => {
   const translateX = useRef(new Animated.Value(0)).current;
 
   const [containerWidth, setContainerWidth] = useState();
@@ -84,12 +83,12 @@ const AnimatedScrollingText = ({ text, config, style }) => {
 
 AnimatedScrollingText.propTypes = {
   text: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/require-default-props
   config: PropTypes.object,
   style: PropTypes.object,
 };
 
 AnimatedScrollingText.defaultProps = {
-  config: DEFAULT_CONFIG,
   style: {},
 };
 

package/components/ScrollView/ScrollView.js

@@ -6,6 +6,11 @@ import PropTypes from 'prop-types';
 import { AnimationDriverContext, ScrollDriver } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 
+// ScrollView component envisioned to be used as a container component inside
+// the Shoutem screens. It will correctly set the current animation driver
+// when it is mounted inside the parent screen. In case you don't want the scroll
+// that is aware of the animation driver context, but want the shoutem themed styling,
+// you should use the plain RN ScrollView and connect it to the 'shoutem.ui.ScrollView' stylename
 const ScrollView = ({ driver, onScroll, primary, style, ...otherProps }) => {
   const animationDriver = useRef(
     driver ||

package/html/components/SimpleHtml.js

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Linking } from 'react-native';
 import Html, { defaultSystemFonts } from 'react-native-render-html';
 import WebView from 'react-native-webview';
@@ -8,9 +8,7 @@ import table, {
   defaultTableStylesSpecs,
   tableModel,
 } from '@native-html/table-plugin';
-import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
-import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import VideoRenderer from '@shoutem/ui/html/components/VideoRenderer';
 import { videoModel } from '@shoutem/ui/html/services/HTMLElementModels';
@@ -20,52 +18,53 @@ import { onElement } from '../services/DomVisitors';
 import AttachmentRenderer from './AttachmentRenderer';
 import IframeRenderer from './IframeRenderer';
 
-class SimpleHtml extends PureComponent {
-  constructor(props) {
-    super(props);
+const SimpleHtml = ({
+  style,
+  body,
+  unsupportedVideoFormatMessage,
+  attachments,
+  customDomVisitors = {},
+  customCustomRenderers = {},
+  customTagStyles = {},
+  customHtmlElementModels = {},
+  customIgnoredStyles = [],
+  customRendererProps = {},
+  customHandleLinkPress,
+  ...otherProps
+}) => {
+  const onLinkPress = useCallback(
+    (_evt, href) => {
+      return customHandleLinkPress
+        ? customHandleLinkPress(href)
+        : Linking.openURL(href);
+    },
+    [customHandleLinkPress],
+  );
 
-    autoBindReact(this);
-  }
+  const maxWidth = useMemo(() => {
+    return resolveMaxWidth(style);
+  }, [style]);
 
-  onLinkPress(_evt, href) {
-    const { customHandleLinkPress } = this.props;
-
-    return customHandleLinkPress
-      ? customHandleLinkPress(href)
-      : Linking.openURL(href);
-  }
-
-  render() {
-    const {
-      style,
-      body,
-      unsupportedVideoFormatMessage,
-      attachments,
-      customDomVisitors,
-      customCustomRenderers,
-      customTagStyles,
-      customHtmlElementModels,
-      customIgnoredStyles,
-      customRendererProps,
-      ...otherProps
-    } = this.props;
-
-    const maxWidth = resolveMaxWidth(style);
-
-    const tagStyles = {
+  const tagStyles = useMemo(
+    () => ({
       ...style.tags,
       ...customTagStyles,
-    };
+    }),
+    [style.tags, customTagStyles],
+  );
 
+  const cssRules = useMemo(() => {
     const tableStyle = _.get(style, 'table', {});
     const tableCssStyle = _.get(style, 'tableCss', '');
     const cssStyle = cssRulesFromSpecs({
       ...defaultTableStylesSpecs,
       ...tableStyle,
     });
-    const cssRules = `${cssStyle}${tableCssStyle}`;
+    return `${cssStyle}${tableCssStyle}`;
+  }, [style]);
 
-    const customRenderers = {
+  const customRenderers = useMemo(
+    () => ({
       iframe: props => (
         <IframeRenderer
           {...props}
@@ -83,79 +82,87 @@ class SimpleHtml extends PureComponent {
       ),
       video: VideoRenderer,
       ...customCustomRenderers,
-    };
+    }),
+    [style, unsupportedVideoFormatMessage, attachments, customCustomRenderers],
+  );
+
+  const systemFonts = useMemo(
+    () => [...defaultSystemFonts, style.baseFont.fontFamily],
+    [style.baseFont.fontFamily],
+  );
+
+  const ignoredStyles = useMemo(
+    () => ['fontFamily', 'letterSpacing', 'transform', ...customIgnoredStyles],
+    [customIgnoredStyles],
+  );
+
+  const renderersProps = useMemo(
+    () => ({
+      table: {
+        cssRules,
+      },
+      a: { onPress: onLinkPress },
+      iframe: {
+        webViewProps: {
+          renderToHardwareTextureAndroid: true,
+        },
+      },
+      ...customRendererProps,
+    }),
+    [cssRules, onLinkPress, customRendererProps],
+  );
 
-    const htmlProps = {
+  const customHTMLElementModels = useMemo(
+    () => ({
+      table: tableModel,
+      iframe: iframeModel,
+      video: videoModel,
+      ...customHtmlElementModels,
+    }),
+    [customHtmlElementModels],
+  );
+
+  const domVisitors = useMemo(
+    () => ({
+      onElement,
+      ...customDomVisitors,
+    }),
+    [customDomVisitors],
+  );
+
+  const filteredTagStyles = useMemo(
+    () => _.omitBy(tagStyles, tagStyle => !tagStyle),
+    [tagStyles],
+  );
+
+  // We have to be really careful with props passed to SimpleHtml, as they'll cause unnecessary re-renders.
+  // Component is meant to be static (in almost all scenarios) - it should only render with initially given props.
+  // Notice that props below are memoized to only be calculated on mount, because lots of these props non-primitive
+  // (reference types), and they'll cause re-renders.
+  const htmlProps = useMemo(
+    () => ({
       source: { html: body },
       computeEmbeddedMaxWidth: () => maxWidth,
       contentWidth: maxWidth,
-      tagsStyles: _.omitBy(tagStyles, tagStyle => !tagStyle),
-      systemFonts: [...defaultSystemFonts, style.baseFont.fontFamily],
+      tagsStyles: filteredTagStyles,
+      systemFonts,
       baseStyle: style.baseFont,
-      ignoredStyles: [
-        'fontFamily',
-        'letterSpacing',
-        'transform',
-        ...customIgnoredStyles,
-      ],
+      ignoredStyles,
       renderers: customRenderers,
-      renderersProps: {
-        table: {
-          cssRules,
-        },
-        a: { onPress: this.onLinkPress },
-        iframe: {
-          webViewProps: {
-            renderToHardwareTextureAndroid: true,
-          },
-        },
-        ...customRendererProps,
-      },
-      customHTMLElementModels: {
-        table: tableModel,
-        iframe: iframeModel,
-        video: videoModel,
-        ...customHtmlElementModels,
-      },
+      renderersProps,
+      customHTMLElementModels,
       WebView,
-      domVisitors: { onElement, ...customDomVisitors },
-    };
-
-    return (
-      <View style={style.container}>
-        <Html {...htmlProps} {...otherProps} />
-      </View>
-    );
-  }
-}
-
-SimpleHtml.propTypes = {
-  style: PropTypes.object.isRequired,
-  attachments: PropTypes.array,
-  body: PropTypes.string,
-  customCustomRenderers: PropTypes.object,
-  customDomVisitors: PropTypes.object,
-  customHandleLinkPress: PropTypes.func,
-  customHtmlElementModels: PropTypes.object,
-  customIgnoredStyles: PropTypes.arrayOf(PropTypes.string),
-  customRendererProps: PropTypes.object,
-  customTagStyles: PropTypes.object,
-  domVisitors: PropTypes.object,
-  unsupportedVideoFormatMessage: PropTypes.string,
-};
+      domVisitors,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
 
-SimpleHtml.defaultProps = {
-  attachments: undefined,
-  body: undefined,
-  customHandleLinkPress: undefined,
-  customTagStyles: {},
-  unsupportedVideoFormatMessage: undefined,
-  domVisitors: { onElement },
-  customDomVisitors: {},
-  customCustomRenderers: {},
-  customHtmlElementModels: {},
-  customIgnoredStyles: [],
-  customRendererProps: {},
+  return (
+    <View style={style.container}>
+      <Html {...htmlProps} {...otherProps} />
+    </View>
+  );
 };
 
-export default connectStyle('shoutem.ui.SimpleHtml')(SimpleHtml);
+export default React.memo(connectStyle('shoutem.ui.SimpleHtml')(SimpleHtml));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "9.0.0-rc.3",
+  "version": "9.0.0-rc.5",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -17,7 +17,7 @@
     "@react-native-community/datetimepicker": "6.2.0",
     "@shoutem/animation": "1.0.0-rc.1",
     "@shoutem/eslint-config-react": "~1.0.6",
-    "@shoutem/theme": "1.0.0-rc.2",
+    "@shoutem/theme": "1.0.0-rc.4",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
@@ -41,7 +41,7 @@
     "react-native-toast-message": "2.1.5",
     "react-native-vimeo-iframe": "^1.2.1",
     "react-native-web-refresh-control": "1.1.2",
-    "react-native-webview": "11.23.0",
+    "react-native-webview": "13.16.0",
     "react-native-youtube-iframe": "2.2.2",
     "react-native-actions-sheet": "0.9.3",
     "stream": "0.0.2",