React Native Image Slider Animation

Question

There are 4 images. Whenever I swap them, I want to have a smooth animated transition. How may I apply that in my current code?

Click here to view the code

Also please check out the 2nd screenshot. I don't want the left swap option to be active when there is no image. But it swaps 1 extra time and stops. What is wrong with my logic?

Here is the screenshot

score 0 · Accepted Answer · answered Jul 14 '21 at 11:08

0

Have a try with the below code:

const handleSwipeLeft = () => {
    if (activeImg < totalImage - 1) {
        setActiveImage(currActive => currActive + 1)
    }
}

as the length greater than the index.

answered Jul 14 '21 at 11:08

Jignesh Mayani

6,937
1
20
36

Thank you so much @Jignesh Mayani. Do you have any idea about the animation issue? – Hossain Jul 14 '21 at 13:20
Let me check again – Jignesh Mayani Jul 14 '21 at 13:20
What the issue you are facing in the sliding? – Jignesh Mayani Jul 14 '21 at 13:21
I wrapped everything inside Animatew.View tag. But not sure about the exact CSS properties or animation properties that can make a smooth transition while swapping the images. ( I am a beginner in react native and learning). Check out the screenshot please https://prnt.sc/1b2o2nu – Hossain Jul 14 '21 at 13:42
You can use libraries like a carousel which have a heavy user base and will give you a better management for sliding views – Jignesh Mayani Jul 14 '21 at 13:43

React Native Image Slider Animation

1 Answers1