useAnimatedStyle with transform crashes the app

Description

I was trying to create a collapsable jumbotron for my app but whenever I use useAnimatedStyle with the combination of useAnimatedScrollHandler the app crashes without any logs whatsoever. I’m getting these crashes both on iOS and android.

Expected behavior

Not to crash.

Actual behavior & steps to reproduce

Provided in snack

Snack or minimal code example

https://snack.expo.dev/bXKLBIm4b

Package versions

name	version
react-native	0.66.4
react-native-reanimated	^2.3.1

Affected platforms

• Android
• iOS
• Web

[piaskowyk]

Hey, unfortunately, you can’t mix Reanimated v1 with v2. You should use interpolate instead of interpolateNode. I noticed that you mentioned that this issue still occurs even if you use interpolate. I have already checked this and this works for me, could you check this example on the newest version 2.4.1, and let me know if it works?

code

import * as React from 'react';
import { Text, View, StyleSheet, SafeAreaView } from 'react-native';
import Constants from 'expo-constants';
import Animated, {
  useAnimatedScrollHandler,
  useSharedValue,
  interpolate,
  useAnimatedStyle,
} from 'react-native-reanimated';

export function App() {
  const scrollPosition = useSharedValue(0);
  const scrollHandler = useAnimatedScrollHandler((event) => {
    scrollPosition.value = event.contentOffset.y;
  });

  const imageStyle = useAnimatedStyle(() => {
    const translateY = interpolate(
      scrollPosition.value, 
      [-320, 0, 320, 320 + 1], 
      [-320 / 2, 0, 320 * 0.75, 320 * 0.75]
    );

    return { transform: [{ translateY }] };
  });

  return (
    <SafeAreaView style={styles.container}>
      <Animated.Image
        source={{ uri: 'https://placeimg.com/640/480' }}
        style={[styles.headerImage, StyleSheet.absoluteFill, imageStyle]}
      />

      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={scrollHandler}
        contentContainerStyle={styles.contentContainerStyle}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
          ultricies, mauris sit amet eleifend blandit, diam libero lacinia
          justo, luctus facilisis nisi leo sed sem. Sed ante libero, accumsan
          eget nunc id, malesuada laoreet turpis. Proin cursus metus in dui
          pretium eleifend. Morbi id lacus tellus. Suspendisse finibus
          sollicitudin viverra. Pellentesque non purus eget urna dictum
          scelerisque. Nulla facilisi. Ut pulvinar mollis justo, at blandit
          justo cursus et. Nulla semper gravida accumsan. Proin vel eros
          scelerisque, pretium quam eu, aliquet lorem. Aliquam pellentesque
          vitae nulla a maximus. Nunc pellentesque nunc a mi placerat vehicula.
          In at laoreet orci. Praesent in dolor nec augue finibus ornare. In
          vitae iaculis sapien, at pretium urna. Curabitur id tellus sit amet
          nibh interdum varius vel ut felis. Etiam ultricies, justo in
          condimentum volutpat, lectus nisi fringilla neque, sit amet aliquet
          tortor est ac dui.
        </Text>
      </Animated.ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ff4444',
  },
  headerImage: {
    width: '100%',
    height: 320,
  },
  text: {
    color: 'black',
    fontSize: 32,
  },
  contentContainerStyle: {
    paddingHorizontal: 24,
    paddingTop: 160,
  },
});

export default App;

[chanphiromsok]

Hey, unfortunately, you can’t mix Reanimated v1 with v2. You should use interpolate instead of interpolateNode. I noticed that you mentioned that this issue still occurs even if you use interpolate. I have already checked this and this works for me, could you check this example on the newest version 2.4.1, and let me know if it works?

code

you are right react-native-reanimated v2 make me confused when you use interpolateNode inside useAnimateStyle it will crash with useShareValue so i use interpolate instead of interpolateNode

here is my working example react-native-reanimatedv2

const shareValue = useSharedValue(0);
const animateStyle = useAnimatedStyle(() => {
        return {
            height: device.height,
            transform: [
                {
                    translateY: interpolate(
                        shareValue.value,
                        [0, 1],
                        [0, -device.height * 0.28],
                        Extrapolate.CLAMP
                    )
                }
            ]
        };
    });