feat: adds foreground props to predefined headers

netguru · May 17, 2021 · d5d3c04 · d5d3c04
1 parent cb668bf
commit d5d3c04
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/predefinedComponents/DetailsHeader/DetailsHeader.js b/src/predefinedComponents/DetailsHeader/DetailsHeader.js
@@ -60,7 +60,7 @@ class DetailsHeader extends React.Component {
     );
   };
 
-  renderForeground = (user) => {
+  renderDetailsForeground = (user) => () => {
     const { labelColor } = user;
     const { image, title, tag, iconNumber } = this.props;
     const labelOpacity = this.scrollY.y.interpolate({
@@ -105,6 +105,13 @@ class DetailsHeader extends React.Component {
     );
   };
 
+  renderForeground = (user) => {
+    const { foreground } = this.props;
+    const renderForeground = foreground || this.renderDetailsForeground(user);
+
+    return renderForeground(user);
+  };
+
   renderBackground = () => {
     const { hasBorderRadius, backgroundColor } = this.props;
     const {
@@ -142,7 +149,7 @@ class DetailsHeader extends React.Component {
       snapToEdge,
       bounces,
       parallaxHeight,
-      transparentHeader
+      transparentHeader,
     } = this.props;
 
     if (renderBody) {
@@ -193,6 +200,7 @@ DetailsHeader.propTypes = {
   iconNumber: number,
   parallaxHeight: number,
   transparentHeader: bool,
+  foreground: func
 };
 DetailsHeader.defaultProps = {
   leftTopIconOnPress: () => {},

diff --git a/src/predefinedComponents/TabbedHeader/TabbedHeader.js b/src/predefinedComponents/TabbedHeader/TabbedHeader.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Text, View, Image, StatusBar, Animated, ViewPropTypes } from 'react-native';
+import { Text, View, Image, StatusBar, Animated, ViewPropTypes, ScrollView } from 'react-native';
 import { arrayOf, bool, number, shape, string, func, node, element, oneOfType, oneOf, instanceOf } from 'prop-types';
 import StickyParallaxHeader from '../../StickyParallaxHeader';
 import { constants, colors, sizes } from '../../constants';
@@ -54,7 +54,7 @@ export default class TabbedHeader extends React.Component {
     return renderHeader();
   };
 
-  renderForeground = (scrollY) => {
+  renderTabbedForeground = (scrollY) => () => {
     const { title, titleStyle, foregroundImage } = this.props;
     const messageStyle = titleStyle || styles.message;
     const startSize = constants.responsiveWidth(18);
@@ -109,6 +109,13 @@ export default class TabbedHeader extends React.Component {
     );
   };
 
+  renderForeground = (scrollY) => {
+    const { foreground } = this.props;
+    const renderForeground = foreground || this.renderTabbedForeground(scrollY);
+
+    return renderForeground();
+  };
+
   onLayoutContent = (e, title) => {
     const { contentHeight } = this.state;
     const contentHeightTmp = { ...contentHeight };
@@ -163,7 +170,8 @@ export default class TabbedHeader extends React.Component {
       contentContainerStyles,
       refreshControl,
       rememberTabScrollPosition,
-      parallaxHeight
+      parallaxHeight,
+      transparentHeader
     } = this.props;
 
     if (renderBody) {
@@ -241,6 +249,7 @@ TabbedHeader.propTypes = {
   onRef: func,
   parallaxHeight: number,
   transparentHeader: bool,
+  foreground: func
 };
 
 TabbedHeader.defaultProps = {