Create swap to left “Animation” in React Native

in this artical we will learn about how to make swap view in React Native Animated as you can see in image

step 1: dealer two variables swap and swap_value , as you can see in pic

variables

step 2: create function for animation/swap left/right,

function

don’t worry we will discuss about this. just remember this function name

step 3: now create a View with any height and auto full width and backgound color red, and inside create Animated.View with same height and width and in style do like this

render method with Animated View

as you can see we declare style marginRight with value assign variable swap which we declare earlier in first step.

now let’s discuss about what we are doing here, in function swapToCall we define a condition if swap_value is 0 then fire a animated functions with duration 500ms and on complete this function the swap value will be 40 and swap_value value will also be 40 , remember we assign this swap variable to marginRight , this will do marginRight Animated.View and the View with red background will see , and in fire again this function swapToCall the else condition will call because the swap_value value is now 40 so the else function will do inverse of if function it will assign 0 to swap and 0 to swap_value and the Animated.View will be marginRight =0 , remember this function “callToSwap” is calling on Animated.View click.

i hope we understand and learn from this artical .

if you found any thing useful please Support my YouTube channel

link is here https://www.youtube.com/channel/UCkaoWtBz6ioLbNwRzIco5Yg