This package is not working with react-native 74

[Hugow28]

ViewPropTypes.style is not defined anymore: https://reactnative.dev/blog/2024/04/22/release-0.74#removal-of-deprecated-proptypes

I really love this package and I would to use it

[Sheriff-Oladimeji]

Hi, I'm having the same issue, were you able to fix it

[Hugow28]

No, unfortunately I had to use a simpler layout for my app :/ I had neither the time or the ability to do the parallax effect by myself

[Shugar]

Everyone who is looking for a similar component – I've just made a simple solution which was enough for me (won't cover the whole API).

What libraries you need? react-native-reanimated

Use

<ParallaxScrollView
  parallaxHeaderHeight={200}
  parallaxHeaderContent={renderMap}
>
   {/* any children here */}
</ParallaxScrollView>

Props

1. parallaxHeaderHeight - Number
2. parallaxHeaderContent - React Component
3. Any other props you can find for standard React Native's ScrollView component

Code:

import Animated, { interpolate, useAnimatedRef, useAnimatedStyle, useScrollViewOffset } from 'react-native-reanimated'

const ParallaxScrollView = (props) => {
  const { parallaxHeaderContent, parallaxHeaderHeight, children, ...rest } = props
  const scrollRef = useAnimatedRef()
  const scrollOffset = useScrollViewOffset(scrollRef)

  const imageAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: interpolate(
            scrollOffset.value,
            [-parallaxHeaderHeight, 0, parallaxHeaderHeight],
            [-parallaxHeaderHeight / 2, 0, parallaxHeaderHeight * 0.75]
          ),
        },
        {
          scale: interpolate(scrollOffset.value, [-parallaxHeaderHeight, 0, parallaxHeaderHeight], [2, 1, 1]),
        },
      ],
    }
  })

  return (
    <Animated.ScrollView ref={scrollRef} scrollEventThrottle={16} {...rest}>
      <Animated.View style={[imageAnimatedStyle]}>{parallaxHeaderContent()}</Animated.View>
      {children}
    </Animated.ScrollView>
  )
}

export default ParallaxScrollView

Feel free to update by your needs!

[Sheriff-Oladimeji]

Everyone who is looking for a similar component – I've just made a simple solution which was enough for me (won't cover the whole API).

What libraries you need? react-native-reanimated

Use

<ParallaxScrollView
  parallaxHeaderHeight={200}
  parallaxHeaderContent={renderMap}
>
   {/* any children here */}
</ParallaxScrollView>

Props

1. parallaxHeaderHeight - Number
2. parallaxHeaderContent - React Component
3. Any other props you can find for standard React Native's ScrollView component

Code:

import Animated, { interpolate, useAnimatedRef, useAnimatedStyle, useScrollViewOffset } from 'react-native-reanimated'

const ParallaxScrollView = (props) => {
  const { parallaxHeaderContent, parallaxHeaderHeight, children, ...rest } = props
  const scrollRef = useAnimatedRef()
  const scrollOffset = useScrollViewOffset(scrollRef)

  const imageAnimatedStyle = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: interpolate(
            scrollOffset.value,
            [-parallaxHeaderHeight, 0, parallaxHeaderHeight],
            [-parallaxHeaderHeight / 2, 0, parallaxHeaderHeight * 0.75]
          ),
        },
        {
          scale: interpolate(scrollOffset.value, [-parallaxHeaderHeight, 0, parallaxHeaderHeight], [2, 1, 1]),
        },
      ],
    }
  })

  return (
    <Animated.ScrollView ref={scrollRef} scrollEventThrottle={16} {...rest}>
      <Animated.View style={[imageAnimatedStyle]}>{parallaxHeaderContent()}</Animated.View>
      {children}
    </Animated.ScrollView>
  )
}

export default ParallaxScrollView

Feel free to update by your needs!

I already fixed it using a similar approach