How would one add a zoom effect when doing pull to refresh #1471

Daavidaviid · 2022-09-05T15:50:38Z

Daavidaviid
Sep 5, 2022

Hey @alantoa,
I'd like to use this library. But to maintain an existing behaviour I would need to make a zoom effect on the banner image when doing pull to refresh.

I've been trying to tweak the lib, for example in gesture-container.ios I do this :

{renderScrollHeader && (<View onLayout={headerOnLayout}>{renderScrollHeader(translateYValue)}</View>)}

instead of this :

{renderScrollHeader && (<View onLayout={headerOnLayout}>{renderScrollHeader()}</View>)}

Using this technique I can interpolate translateYValue to scale my banner in the header, but it get cropped :

Screen.Recording.2022-09-05.at.12.54.00.mov

But still no luck yet. Do you think it's easy to add this possibility ?

alantoa · 2022-09-05T18:13:06Z

alantoa
Sep 5, 2022
Collaborator

Hey! @Daavidaviid
I know your want implement a just like Twiter profile banner effect, but unfortunately, I have tried.
and I tried to simulate the just like the native bounce effect when swiping the header, but not good, so currently, this version can't implement on RN,

if it was Swift/OC it would be very easy to implement, just need to use UIScrollView inside UIScrollView and listen to gesture/scroll events and pass their scroll value, when scrolling to a specific position, make the outer gesture fail, etc.

but RN does not have enough relevant APIs for this, maybe I didn't think of a good way to deal with them.

and I want to use Swift to implement a Native version, but I don't know much about Kotlin, so now it's just.

anyways, I will follow the react-native-gesture-handle lib new API and try something. let you know if successful.

0 replies

Daavidaviid · 2022-09-05T19:01:34Z

Daavidaviid
Sep 5, 2022
Author

I think I found a dirty solution

1 reply

alantoa Sep 5, 2022
Collaborator

haha, look forward to your hacks code!
let me know when you are successful!

Daavidaviid · 2022-09-05T19:45:31Z

Daavidaviid
Sep 5, 2022
Author

Here you can see it working both on iOS and Android :

Android

Screen.Recording.2022-09-05.at.16.33.41.mov

iOS

Screen.Recording.2022-09-05.at.16.33.59.mov

Basically, I just add the banner image below the scrollview. renderScrollHeader render a banner but transparent and renderAbsoluteBackgroundContent render the banner image below. Both are animated. Here are the props :

 export type CollapsibleHeaderProps<T extends Route> = {
   initHeaderHeight?: number;
-  renderScrollHeader: () => React.ReactElement | null;
+  renderScrollHeader: (translateYValue: SharedValue<number>) => React.ReactElement | null;
+  renderAbsoluteBackgroundContent?: (translateYValue: SharedValue<number>) => React.ReactElement | null;
   initTabbarHeight?: number;
   minHeaderHeight?: number;
   overflowHeight?: number;

And here is the full patch below. Tell me what you think about this solution. I noticed some performances issue with TabScrollView on Android. The content is flickering a little bit.

diff --git a/node_modules/@showtime-xyz/universal.collapsible-tab-view/dist/gesture-container.ios.js b/node_modules/@showtime-xyz/universal.collapsible-tab-view/dist/gesture-container.ios.js
index 28fa8bc..51ceed9 100644
--- a/node_modules/@showtime-xyz/universal.collapsible-tab-view/dist/gesture-container.ios.js
+++ b/node_modules/@showtime-xyz/universal.collapsible-tab-view/dist/gesture-container.ios.js
@@ -9,7 +9,7 @@ import RefreshControlContainer from "./refresh-control";
 import { animateToRefresh, mScrollTo } from "./utils";
 const { width } = Dimensions.get("window");
 // Todo: temporarily add `.ios.tsx` file to try the bounces effect, will be merged into `gesture-container.tsx` after stabilization
-export const GestureContainer = React.forwardRef(function GestureContainer({ refreshHeight = 80, pullExtendedCoefficient = 0.1, overflowPull = 50, overflowHeight = 0, scrollEnabled = true, minHeaderHeight = 0, isRefreshing: isRefreshingProp = false, initialPage, onStartRefresh, initTabbarHeight = 49, initHeaderHeight = 0, renderScrollHeader, renderTabView, renderRefreshControl: renderRefreshControlProp, animationHeaderPosition, animationHeaderHeight, panHeaderMaxOffset, onPullEnough, refreshControlColor, refreshControlTop = 0, emptyBodyComponent, navigationState, renderSceneHeader, }, forwardedRef) {
+export const GestureContainer = React.forwardRef(function GestureContainer({ refreshHeight = 80, pullExtendedCoefficient = 0.1, overflowPull = 50, overflowHeight = 0, scrollEnabled = true, minHeaderHeight = 0, isRefreshing: isRefreshingProp = false, initialPage, onStartRefresh, initTabbarHeight = 49, initHeaderHeight = 0, renderScrollHeader, renderAbsoluteBackgroundContent, renderTabView, renderRefreshControl: renderRefreshControlProp, animationHeaderPosition, animationHeaderHeight, panHeaderMaxOffset, onPullEnough, refreshControlColor, refreshControlTop = 0, emptyBodyComponent, navigationState, renderSceneHeader, }, forwardedRef) {
     //#region animation value
     const shareAnimatedValue = useSharedValue(0);
     const curIndexValue = useSharedValue(initialPage);
@@ -441,7 +441,7 @@ export const GestureContainer = React.forwardRef(function GestureContainer({ ref
         return (<Animated.View style={[styles.tabbarStyle, tabbarAnimateStyle]}>
         <GestureDetector gesture={gestureHandlerHeader}>
           <Animated.View style={styles.container}>
-            {renderScrollHeader && (<View onLayout={headerOnLayout}>{renderScrollHeader()}</View>)}
+            {renderScrollHeader && (<View onLayout={headerOnLayout}>{renderScrollHeader(translateYValue)}</View>)}
             {navigationState?.routes.length === 0 && emptyBodyComponent ? (<View style={{ marginTop: tabbarHeight }}>
                 {emptyBodyComponent}
               </View>) : (<Animated.View style={{ transform: [{ translateY: -overflowHeight }] }} onLayout={tabbarOnLayout}>
@@ -472,6 +472,7 @@ export const GestureContainer = React.forwardRef(function GestureContainer({ ref
             curIndexValue.value = index;
         },
     }), [curIndexValue]);
+
     return (<HeaderTabContext.Provider value={{
             shareAnimatedValue,
             headerTrans,
@@ -492,6 +493,11 @@ export const GestureContainer = React.forwardRef(function GestureContainer({ ref
         }}>
       <GestureDetector gesture={gestureHandler}>
         <Animated.View style={[styles.container, opacityStyle]}>
+          {!!renderAbsoluteBackgroundContent && (
+            <View style={styles.absoluteBackground}>
+              {renderAbsoluteBackgroundContent(translateYValue)}
+            </View>
+          )}
           <Animated.View style={[styles.container, animateStyle]} onLayout={containerOnLayout}>
             {renderTabView({
             renderTabBarContainer: _renderTabBarContainer,
@@ -514,5 +520,10 @@ const styles = StyleSheet.create({
         right: 0,
         zIndex: 10,
     },
+    absoluteBackground: {
+        position: "absolute",
+        top: 0,
+        width: '100%',
+    }
 });
 //# sourceMappingURL=gesture-container.ios.js.map
\ No newline at end of file
diff --git a/node_modules/@showtime-xyz/universal.collapsible-tab-view/dist/gesture-container.js b/node_modules/@showtime-xyz/universal.collapsible-tab-view/dist/gesture-container.js
index cb357c5..17d4c31 100644
--- a/node_modules/@showtime-xyz/universal.collapsible-tab-view/dist/gesture-container.js
+++ b/node_modules/@showtime-xyz/universal.collapsible-tab-view/dist/gesture-container.js
@@ -8,7 +8,7 @@ import { useSceneInfo } from "./hooks/use-scene-info";
 import RefreshControlContainer from "./refresh-control";
 import { animateToRefresh, mScrollTo } from "./utils";
 const { width } = Dimensions.get("window");
-export const GestureContainer = React.forwardRef(function GestureContainer({ refreshHeight = 80, pullExtendedCoefficient = 0.1, overflowPull = 50, overflowHeight = 0, scrollEnabled = true, minHeaderHeight = 0, isRefreshing: isRefreshingProp = false, initialPage, onStartRefresh, initTabbarHeight = 49, initHeaderHeight = 0, renderScrollHeader, renderTabView, renderRefreshControl: renderRefreshControlProp, animationHeaderPosition, animationHeaderHeight, panHeaderMaxOffset, onPullEnough, refreshControlColor, refreshControlTop = 0, emptyBodyComponent, navigationState, renderSceneHeader, }, forwardedRef) {
+export const GestureContainer = React.forwardRef(function GestureContainer({ refreshHeight = 80, pullExtendedCoefficient = 0.1, overflowPull = 50, overflowHeight = 0, scrollEnabled = true, minHeaderHeight = 0, isRefreshing: isRefreshingProp = false, initialPage, onStartRefresh, initTabbarHeight = 49, initHeaderHeight = 0, renderScrollHeader, renderAbsoluteBackgroundContent, renderTabView, renderRefreshControl: renderRefreshControlProp, animationHeaderPosition, animationHeaderHeight, panHeaderMaxOffset, onPullEnough, refreshControlColor, refreshControlTop = 0, emptyBodyComponent, navigationState, renderSceneHeader, }, forwardedRef) {
     //#region animation value
     const shareAnimatedValue = useSharedValue(0);
     const curIndexValue = useSharedValue(initialPage);
@@ -429,7 +429,7 @@ export const GestureContainer = React.forwardRef(function GestureContainer({ ref
         return (<Animated.View style={[styles.tabbarStyle, tabbarAnimateStyle]}>
         <GestureDetector gesture={gestureHandlerHeader}>
           <Animated.View style={styles.container}>
-            {renderScrollHeader && (<View onLayout={headerOnLayout}>{renderScrollHeader()}</View>)}
+            {renderScrollHeader && (<View onLayout={headerOnLayout}>{renderScrollHeader(translateYValue)}</View>)}
             {navigationState?.routes.length === 0 && emptyBodyComponent ? (<View style={{ marginTop: tabbarHeight }}>
                 {emptyBodyComponent}
               </View>) : (<Animated.View style={{ transform: [{ translateY: -overflowHeight }] }} onLayout={tabbarOnLayout}>
@@ -480,6 +480,11 @@ export const GestureContainer = React.forwardRef(function GestureContainer({ ref
         }}>
       <GestureDetector gesture={gestureHandler}>
         <Animated.View style={[styles.container, opacityStyle]}>
+          {!!renderAbsoluteBackgroundContent && (
+            <View style={styles.absoluteBackground}>
+              {renderAbsoluteBackgroundContent(translateYValue)}
+            </View>
+          )}
           <Animated.View style={[styles.container, animateStyle]} onLayout={containerOnLayout}>
             {renderTabView({
             renderTabBarContainer: _renderTabBarContainer,
@@ -502,5 +507,10 @@ const styles = StyleSheet.create({
         right: 0,
         zIndex: 10,
     },
+    absoluteBackground: {
+        position: "absolute",
+        top: 0,
+        width: "100%",
+    }
 });
 //# sourceMappingURL=gesture-container.js.map
\ No newline at end of file
diff --git a/node_modules/@showtime-xyz/universal.collapsible-tab-view/gesture-container.ios.tsx b/node_modules/@showtime-xyz/universal.collapsible-tab-view/gesture-container.ios.tsx
index 2ff7de5..ac5802c 100644
--- a/node_modules/@showtime-xyz/universal.collapsible-tab-view/gesture-container.ios.tsx
+++ b/node_modules/@showtime-xyz/universal.collapsible-tab-view/gesture-container.ios.tsx
@@ -58,6 +58,7 @@ export const GestureContainer = React.forwardRef<
     initTabbarHeight = 49,
     initHeaderHeight = 0,
     renderScrollHeader,
+    renderAbsoluteBackgroundContent,
     renderTabView,
     renderRefreshControl: renderRefreshControlProp,
     animationHeaderPosition,
@@ -615,7 +616,7 @@ export const GestureContainer = React.forwardRef<
         <GestureDetector gesture={gestureHandlerHeader}>
           <Animated.View style={styles.container}>
             {renderScrollHeader && (
-              <View onLayout={headerOnLayout}>{renderScrollHeader()}</View>
+              <View onLayout={headerOnLayout}>{renderScrollHeader(translateYValue)}</View>
             )}
             {navigationState?.routes.length === 0 && emptyBodyComponent ? (
               <View style={{ marginTop: tabbarHeight }}>
@@ -698,6 +699,11 @@ export const GestureContainer = React.forwardRef<
       }}
     >
       <GestureDetector gesture={gestureHandler}>
+        {!!renderAbsoluteBackgroundContent && (
+          <View style={styles.absoluteBackground}>
+            {renderAbsoluteBackgroundContent(translateYValue)}
+          </View>
+        )}
         <Animated.View style={[styles.container, opacityStyle]}>
           <Animated.View
             style={[styles.container, animateStyle]}
@@ -726,4 +732,9 @@ const styles = StyleSheet.create({
     right: 0,
     zIndex: 10,
   },
+  absoluteBackground: {
+    position: "absolute",
+    top: 0,
+    width: "100%",
+  }
 });
diff --git a/node_modules/@showtime-xyz/universal.collapsible-tab-view/gesture-container.tsx b/node_modules/@showtime-xyz/universal.collapsible-tab-view/gesture-container.tsx
index 3ed6d25..2c362c4 100644
--- a/node_modules/@showtime-xyz/universal.collapsible-tab-view/gesture-container.tsx
+++ b/node_modules/@showtime-xyz/universal.collapsible-tab-view/gesture-container.tsx
@@ -599,7 +599,7 @@ export const GestureContainer = React.forwardRef<
         <GestureDetector gesture={gestureHandlerHeader}>
           <Animated.View style={styles.container}>
             {renderScrollHeader && (
-              <View onLayout={headerOnLayout}>{renderScrollHeader()}</View>
+              <View onLayout={headerOnLayout}>{renderScrollHeader(translateYValue)}</View>
             )}
             {navigationState?.routes.length === 0 && emptyBodyComponent ? (
               <View style={{ marginTop: tabbarHeight }}>
diff --git a/node_modules/@showtime-xyz/universal.collapsible-tab-view/types.tsx b/node_modules/@showtime-xyz/universal.collapsible-tab-view/types.tsx
index 4f7d28c..655fc6f 100644
--- a/node_modules/@showtime-xyz/universal.collapsible-tab-view/types.tsx
+++ b/node_modules/@showtime-xyz/universal.collapsible-tab-view/types.tsx
@@ -4,6 +4,7 @@ import type { ScrollViewProps } from "react-native";
 
 import type { NativeGesture } from "react-native-gesture-handler";
 import type Animated from "react-native-reanimated";
+import { SharedValue } from "react-native-reanimated";
 import type {
   TabViewProps,
   Route as TabViewRoute,
@@ -25,7 +26,8 @@ export enum RefreshTypeEnum {
 
 export type CollapsibleHeaderProps<T extends Route> = {
   initHeaderHeight?: number;
-  renderScrollHeader: () => React.ReactElement | null;
+  renderScrollHeader: (translateYValue: SharedValue<number>) => React.ReactElement | null;
+  renderAbsoluteBackgroundContent?: (translateYValue: SharedValue<number>) => React.ReactElement | null;
   initTabbarHeight?: number;
   minHeaderHeight?: number;
   overflowHeight?: number;

5 replies

alantoa Sep 6, 2022
Collaborator

I did think about it, but the bounce effect will not trigger it, right?

anyways, it looks good so far, I'm glad you solved it.

feel free to create PR, I can review and release a new version!
thanks!

Daavidaviid Sep 6, 2022
Author

The bounce effect is still here on iOS and Android if I understood correctly.
I'll make a PR and an expo example

Daavidaviid Sep 6, 2022
Author

I made the pr :
#1476

But I'm not used to the bit workflow

alantoa Sep 6, 2022
Collaborator

thanks! will check.

Daavidaviid Sep 9, 2022
Author

I made another pr, I realized the previous one was not optimal to integrate this library in our existing pages:
#1487

Daavidaviid · 2022-09-22T16:26:35Z

Daavidaviid
Sep 22, 2022
Author

Hey !
I was wondering if you guys noticed a performance issue on android, when scrolling down or up by touching the banner/header, and then let go and see the scroll happening for a little while with the momentum, the content below the header appears jumpy/laggy.

I can't reproduce on expo because of the issue with the latest version of expo go

2 replies

alantoa Sep 23, 2022
Collaborator

yeah, also I noticed that maybe it related to Reanimated, also feel a little jitter when slowly scrolling AnimatedScrollView on iOS.

Daavidaviid Sep 23, 2022
Author

I already encountered this issue in the past for android, I think it's linked to manipulating the scrollview style with reanimated while scrolling or something like that. But your approach was the best one I found until now for this issue on react native (scrollview with nested tabs with nested scrollviews). Maybe I'll try fixing it for android, but I'm not sure it's easy from the existant solution

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How would one add a zoom effect when doing pull to refresh #1471

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How would one add a zoom effect when doing pull to refresh #1471

Daavidaviid Sep 5, 2022

Replies: 4 comments · 8 replies

alantoa Sep 5, 2022 Collaborator

Daavidaviid Sep 5, 2022 Author

alantoa Sep 5, 2022 Collaborator

Daavidaviid Sep 5, 2022 Author

alantoa Sep 6, 2022 Collaborator

Daavidaviid Sep 6, 2022 Author

Daavidaviid Sep 6, 2022 Author

alantoa Sep 6, 2022 Collaborator

Daavidaviid Sep 9, 2022 Author

Daavidaviid Sep 22, 2022 Author

alantoa Sep 23, 2022 Collaborator

Daavidaviid Sep 23, 2022 Author

Daavidaviid
Sep 5, 2022

Replies: 4 comments 8 replies

alantoa
Sep 5, 2022
Collaborator

Daavidaviid
Sep 5, 2022
Author

alantoa Sep 5, 2022
Collaborator

Daavidaviid
Sep 5, 2022
Author

alantoa Sep 6, 2022
Collaborator

Daavidaviid Sep 6, 2022
Author

Daavidaviid Sep 6, 2022
Author

alantoa Sep 6, 2022
Collaborator

Daavidaviid Sep 9, 2022
Author

Daavidaviid
Sep 22, 2022
Author

alantoa Sep 23, 2022
Collaborator

Daavidaviid Sep 23, 2022
Author