CODEWITHSUNDEEP
animationreact-nativetransform
Amine
Amine

Reputation: 2434

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

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 ?

Upvotes: 14

Views: 11437

Answers (4)

Ayoub REZZOUK
Ayoub REZZOUK

Reputation: 41

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

Upvotes: 4

Kannan Android Developer
Kannan Android Developer

Reputation: 11

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

Upvotes: 1

Sabiq Thottoly
Sabiq Thottoly

Reputation: 521

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

Upvotes: 43

Amine
Amine

Reputation: 2434

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

Upvotes: 1

Related Questions