feat: added "parallaxAdjacentItemScale" property into parallax layout

dohooo · Feb 27, 2022 · 7e98433 · 7e98433
1 parent 94c0f89
commit 7e98433
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/layouts/ParallaxLayout.tsx b/src/layouts/ParallaxLayout.tsx
@@ -16,6 +16,7 @@ export const ParallaxLayout: React.FC<
         loop?: boolean;
         parallaxScrollingOffset?: number;
         parallaxScrollingScale?: number;
+        parallaxAdjacentItemScale?: number;
         handlerOffsetX: Animated.SharedValue<number>;
         index: number;
         data: unknown[];
@@ -26,6 +27,7 @@ export const ParallaxLayout: React.FC<
         handlerOffsetX,
         parallaxScrollingOffset = 100,
         parallaxScrollingScale = 0.8,
+        parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),
         index,
         width,
         height,
@@ -76,9 +78,9 @@ export const ParallaxLayout: React.FC<
             value,
             [-1, 0, 1],
             [
-                Math.pow(parallaxScrollingScale, 2),
+                parallaxAdjacentItemScale,
                 parallaxScrollingScale,
-                Math.pow(parallaxScrollingScale, 2),
+                parallaxAdjacentItemScale,
             ],
             Extrapolate.CLAMP
         );

diff --git a/src/layouts/parallax.ts b/src/layouts/parallax.ts
@@ -17,6 +17,11 @@ interface ILayoutConfig {
      * @default 0.8
      */
     parallaxScrollingScale?: number;
+    /**
+     * When use default Layout props,this prop can be control prev/next item offset.
+     * @default Math.pow(parallaxScrollingScale, 2)
+     */
+    parallaxAdjacentItemScale?: number;
 }
 
 export type TParallaxModeProps = ComputedDirectionTypes<{
@@ -32,8 +37,10 @@ export function parallaxLayout(
     modeConfig: ILayoutConfig = {}
 ) {
     const { size, vertical } = baseConfig;
-    const { parallaxScrollingOffset = 100, parallaxScrollingScale = 0.8 } =
-        modeConfig;
+    const { parallaxScrollingOffset = 100,
+        parallaxScrollingScale = 0.8,
+        parallaxAdjacentItemScale = Math.pow(parallaxScrollingScale, 2),
+    } = modeConfig;
 
     return (value: number) => {
         'worklet';
@@ -54,9 +61,9 @@ export function parallaxLayout(
             value,
             [-1, 0, 1],
             [
-                Math.pow(parallaxScrollingScale, 2),
+                parallaxAdjacentItemScale,
                 parallaxScrollingScale,
-                Math.pow(parallaxScrollingScale, 2),
+                parallaxAdjacentItemScale,
             ],
             Extrapolate.CLAMP
         );