fix: memoize header background image on backgroundImage prop

src/StickyParallaxHeader.js

@@ -29,6 +29,35 @@ import { getSafelyScrollNode, setRef } from './utils';
 const { divide, Value, createAnimatedComponent, event, timing, ValueXY } = Animated;
 const AnimatedScrollView = createAnimatedComponent(ScrollView);
 
+const HeaderBackgroundImage = (props) => {
+  const { backgroundHeight, backgroundImage, background } = props;
+  const AnimatedImageBackground = createAnimatedComponent(ImageBackground);
+
+  return (
+    <AnimatedImageBackground
+      style={[
+        styles.headerStyle,
+        {
+          height: backgroundHeight,
+        },
+      ]}
+      source={backgroundImage}>
+      {background}
+    </AnimatedImageBackground>
+  );
+};
+
+HeaderBackgroundImage.propTypes = {
+  background: node,
+  backgroundHeight: number,
+  backgroundImage: Image.propTypes.source,
+};
+
+const headerImagesAreEqual = (prevProps, props) =>
+  prevProps.backgroundImage.uri === props.backgroundImage.uri;
+
+const MemoHeaderImageBackground = React.memo(HeaderBackgroundImage, headerImagesAreEqual);
+
 class StickyParallaxHeader extends Component {
   constructor(props) {
     super(props);
@@ -240,25 +269,6 @@ class StickyParallaxHeader extends Component {
     );
   };
 
-  renderImageBackground = (backgroundHeight) => {
-    const { backgroundImage, background } = this.props;
-
-    const AnimatedImageBackground = createAnimatedComponent(ImageBackground);
-
-    return (
-      <AnimatedImageBackground
-        style={[
-          styles.headerStyle,
-          {
-            height: backgroundHeight,
-          },
-        ]}
-        source={backgroundImage}>
-        {background}
-      </AnimatedImageBackground>
-    );
-  };
-
   renderPlainBackground = (backgroundHeight) => {
     const { background } = this.props;
 
@@ -405,9 +415,15 @@ class StickyParallaxHeader extends Component {
                 },
               ]}
             />
-            {backgroundImage
-              ? this.renderImageBackground(scrollHeight)
-              : this.renderPlainBackground(scrollHeight)}
+            {backgroundImage ? (
+              <MemoHeaderImageBackground
+                backgroundHeight={scrollHeight}
+                backgroundImage={this.props.backgroundImage}
+                background={this.props.background}
+              />
+            ) : (
+              this.renderPlainBackground(scrollHeight)
+            )}
             {this.renderForeground(scrollHeight)}
           </View>
           {shouldRenderTabs && this.renderTabs()}