CODEWITHSUNDEEP
react-nativeanimation
Mehmet Kaplan
Mehmet Kaplan

Reputation: 2382

How can different animations can be attached to an image dynamically in react-native?

Asume there is an image on the screen and when a user presses another image (say right arrow) the first image goes right and when the user presses a third image (say left arrow) the first image goes left.

Briefly something like this, the left arrow should move the stickman to the left and the right should move to the right:

Left and Right Arrows with Stickman

According to the documentation, an image can have multiple animations (transforms, scales, opacity changes etc) but it seems all those animations need to be run parallel (simultaneously).

My question is about doing this with a function call freely from unrelated objects.

Upvotes: 0

Views: 87

Answers (1)

Miles Low
Miles Low

Reputation: 23

You can just have an animation value for how much you want to move the stick man. Just give the stick man a style={{transform:[{translateX: this.stickManTranslateX}]}} then you can just have the arrows use the moveStickManLeft function for it to move in different directions.

    stickManTranslateX = new Animated.value(0);

    moveStickManLeft = toValue => {
         this.stickManTranslateX.setValue(toValue);
    }

Upvotes: 1

Related Questions