Remove the use of UNSAFE_componentWillReceiveProps

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "hoist-non-react-statics": "^1.0.5",
     "lodash": "4.17.11",
+    "memoize-one": "^5.0.5",
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {

src/StyleProvider.js

@@ -33,10 +33,10 @@ export default class StyleProvider extends React.Component {
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.style !== this.props.style) {
+  componentDidUpdate(prevProps) {
+    if (prevProps.style !== this.props.style) {
       this.setState({
-        theme: this.createTheme(nextProps),
+        theme: this.createTheme(this.props),
       });
     }
   }

src/connectStyle.js

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
 import * as _ from 'lodash';
+import memoize from 'memoize-one';
+
 import normalizeStyle from './StyleNormalizer/normalizeStyle';
 import { StyleSheet } from "react-native";
 
@@ -162,31 +164,19 @@ export default (
       constructor(props, context) {
         super(props, context);
         // console.log(context.parentPath);
-        const styleNames = this.getStyleNames(props);
-        const style = props.style;
-
-        const finalStyle = this.getFinalStyle(
-          props,
-          context,
-          style,
-          styleNames
-        );
-
         this.setWrappedInstance = this.setWrappedInstance.bind(this);
         this.resolveConnectedComponentStyle = this.resolveConnectedComponentStyle.bind(
           this
         );
         this.state = {
-          style: finalStyle,
           // AddedProps are additional WrappedComponent props
           // Usually they are set trough alternative ways,
           // such as theme style, or trough options
           addedProps: this.resolveAddedProps(),
-          styleNames
         };
       }
 
-      getFinalStyle(props, context, style, styleNames) {
+      getFinalStyle = memoize((props, context, style, styleNames) => {
         let resolvedStyle = {};
         if (context.parentPath) {
           resolvedStyle = this.getOrSetStylesInCache(
@@ -211,7 +201,7 @@ export default (
         }
 
         return concreteStyle;
-      }
+      })
 
       getStyleNames(props) {
         const styleNamesArr = _.map(props, (value, key) => {
@@ -250,25 +240,6 @@ export default (
         };
       }
 
-      UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
-        const styleNames = this.getStyleNames(nextProps);
-        const style = nextProps.style;
-        if (this.shouldRebuildStyle(nextProps, nextContext, styleNames)) {
-          const finalStyle = this.getFinalStyle(
-            nextProps,
-            nextContext,
-            style,
-            styleNames
-          );
-
-          this.setState({
-            style: finalStyle,
-            // childrenStyle: resolvedStyle.childrenStyle,
-            styleNames
-          });
-        }
-      }
-
       setNativeProps(nativeProps) {
         if (this.wrappedInstance.setNativeProps) {
           this.wrappedInstance.setNativeProps(nativeProps);
@@ -284,26 +255,6 @@ export default (
         this.wrappedInstance = this._root;
       }
 
-      hasStyleNameChanged(nextProps, styleNames) {
-        return (
-          mapPropsToStyleNames &&
-          this.props !== nextProps &&
-          // Even though props did change here,
-          // it doesn't necessary means changed props are those which affect styleName
-          !_.isEqual(this.state.styleNames, styleNames)
-        );
-      }
-
-      shouldRebuildStyle(nextProps, nextContext, styleNames) {
-        return (
-          nextProps.style !== this.props.style ||
-          nextProps.styleName !== this.props.styleName ||
-          nextContext.theme !== this.context.theme ||
-          !_.isEqual(nextContext.parentPath, this.context.parentPath) ||
-          this.hasStyleNameChanged(nextProps, styleNames)
-        );
-      }
-
       resolveStyleNames(props) {
         const { styleName } = props;
         const styleNames = styleName ? styleName.split(/\s/g) : [];
@@ -387,7 +338,14 @@ export default (
         //   console.log(themeCache);
         // }
 
-        const { addedProps, style } = this.state;
+        const style = this.getFinalStyle(
+          this.props,
+          this.context,
+          this.props.style,
+          this.getStyleNames(this.props)
+        );
+
+        const { addedProps } = this.state;
         return (
           <WrappedComponent
             {...this.props}

yarn.lock

@@ -2854,6 +2854,11 @@ math-random@^1.0.1:
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
   integrity sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==
 
+memoize-one@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
+  integrity sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ==
+
 merge@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"