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
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;
}