From 22851b61c279d0c8a6ccec6385d9b15dbe76678e Mon Sep 17 00:00:00 2001 From: abeyuya Date: Tue, 4 Aug 2020 22:56:56 +0900 Subject: [PATCH 1/2] add parallaxIntensity property --- lib/src/components/stretchyImage.tsx | 20 ++++++++++++++------ lib/src/components/withStretchy.tsx | 2 ++ lib/src/types.ts | 1 + 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/lib/src/components/stretchyImage.tsx b/lib/src/components/stretchyImage.tsx index 46d8248..66b3737 100644 --- a/lib/src/components/stretchyImage.tsx +++ b/lib/src/components/stretchyImage.tsx @@ -10,6 +10,7 @@ export interface StretchyImageProps animation: Animated.Value; imageHeight: number; onLayout(event: LayoutChangeEvent): void; + parallaxIntensity?: number; } export const StretchyImage: React.FC = ({ @@ -20,14 +21,22 @@ export const StretchyImage: React.FC = ({ imageWrapperStyle, imageHeight, onLayout, + parallaxIntensity, }) => { - const transformStyles = useMemo( - () => ({ + const transformStyles = useMemo(() => { + const parallaxOffset = + parallaxIntensity === undefined ? 0 : Math.max(parallaxIntensity, -1); + + return { transform: [ { translateY: animation.interpolate({ inputRange: [-imageHeight, 0, imageHeight], - outputRange: [imageHeight / 2, 0, -imageHeight / 2], + outputRange: [ + imageHeight / 2, + 0, + -imageHeight / (2 + parallaxOffset), + ], }), }, { @@ -37,9 +46,8 @@ export const StretchyImage: React.FC = ({ }), }, ], - }), - [animation, imageHeight], - ); + }; + }, [animation, imageHeight, parallaxIntensity]); return ( ( imageWrapperStyle, imageResizeMode, onScroll, + parallaxIntensity, } = props; const stretchy = useStretchy({ @@ -43,6 +44,7 @@ export const WithStretchy = ( animation={stretchy.animation} imageHeight={imageHeight || stretchy.heightBasedOnRatio} onLayout={stretchy.onImageWrapperLayout} + parallaxIntensity={parallaxIntensity} /> diff --git a/lib/src/types.ts b/lib/src/types.ts index 262686e..5a6c9e6 100644 --- a/lib/src/types.ts +++ b/lib/src/types.ts @@ -26,4 +26,5 @@ export interface StretchyProps { | 'angleCenter' | 'angle' >; + parallaxIntensity?: number; } From daf57c05d54ddeefd2424f98b2f44ebd7396eb88 Mon Sep 17 00:00:00 2001 From: abeyuya Date: Tue, 4 Aug 2020 23:08:26 +0900 Subject: [PATCH 2/2] update readme --- README.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index dd8c478..4ed43d6 100644 --- a/README.md +++ b/README.md @@ -44,15 +44,16 @@ class SystretchyScrollView extends Component { These are default properties that is available for all stretchy components -| Prop | Default | Description | -| --------------- | :-------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| backgroundColor | `#FFF` | Background color of the inner content | -| image | `null` | The image of the stretchy header ([RN image source][2]) | -| imageHeight | `null` | Height of the stretchy header image (keep ratio of `image` if not provided) | -| imageResizeMode | `'cover'` | ResizeMode of the stretchy header image. [You can use one of these values](https://facebook.github.io/react-native/docs/image.html#resizemode) | -| gradient | null | Gradient config object. See [LinearGradientProps][3] | -| foreground | `null` | A RN Component for foreground content of background | -| onScroll | `null` | A callback function with these arguments:
`position`: current position of scroll
`reachedToTheBottomOfHeader`: boolean flag to specify whether the scroll has reached to the bottom of header or not | +| Prop | Default | Description | +| ----------------- | :-------: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| backgroundColor | `#FFF` | Background color of the inner content | +| image | `null` | The image of the stretchy header ([RN image source][2]) | +| imageHeight | `null` | Height of the stretchy header image (keep ratio of `image` if not provided) | +| imageResizeMode | `'cover'` | ResizeMode of the stretchy header image. [You can use one of these values](https://facebook.github.io/react-native/docs/image.html#resizemode) | +| gradient | null | Gradient config object. See [LinearGradientProps][3] | +| foreground | `null` | A RN Component for foreground content of background | +| onScroll | `null` | A callback function with these arguments:
`position`: current position of scroll
`reachedToTheBottomOfHeader`: boolean flag to specify whether the scroll has reached to the bottom of header or not | +| parallaxIntensity | `null` | Parallax intensity of stretchy header image (no parallax when set -1) | ## 💁‍♂️ Components