How to fix "transform with key of translatex must be a number" error in React Native?

user_7940639 0
Viewed 4027

I 'm trying to make a translate animation in React Native.

Here is my code

const scrollX = React.useRef(new Animated.Value(0)).current;

<Animated.ScrollView
     horizontal
     snapToInterval={width}
     onScroll={Animated.event(
        [{ nativeEvent: { contentOffset: { x: scrollX } } }],
        { useNativeDriver: false }
        )}
     scrollEventThrottle={16}
  ></Animated.ScrollView>

  <Animated.View style={{ transform: [{ translateX: multiply(scrollX, -1) }] }}>
          <Text>Some text</Text>
  </Animated.View>

I am getting this error transform with key of translatex must be a number

If I change multiply(scrollX, -1) to scrollX the animation is reversed,

How can I fix this issue ?

react-native transform animation
4 Answers

i had this issue,Just because i forgot to give Animated.View

user_143221260

I fixed it by changing the import of multiply from react-native-reanimated to Animated

user_79406390 
const test = () => {

    const translation = useRef(new Animated.Value(0)).current;

    useEffect(()=> {
        Animated.timing(translation, {
            toValue: 200,
            useNativeDriver: true,
        }).start();
    }, []);
    
    return (
        <>
            <Animated.View style={{
                width: 150, height: 150, backgroundColor: 'red', borderRadius: 8, margin: 10, 
                transform: [{translateX:  translation}]
            }} />
        </>
    );
}
export default test;

Need to Give where you want to do Animation -> Animated.[Component Name] -> E.g: Animated.View / Animated.Text / Animated.Button

user_167153440

You need to import Animated from react-native and not from react-native-reanimated

user_192821740
Related