React-Native: LayoutAnimation

Question

I am using react-native's LayoutAnimation to implement a custom switch component.

I am animating the movement of the circle using LayoutAnimation like so:

componentWillUpdate() {
  let switchAnimation = {
    duration: 250,
     update: {
       type: LayoutAnimation.Types.linear,
       property: LayoutAnimation.Properties.opacity,
     },
  };
  LayoutAnimation.configureNext(switchAnimation);
}

The switch is its own component. It recieves props to set the circle to be on the left or right using css (justifyContent flex-start or flex-end)

Problem is in my view when the switch changes value other components change as well: Namely when the switch is hit:

1) Switch changes

2) An icon changes

3) Some text changes

All of the above animate. I want to reduce the animation to affect the switch only

UPDATE: I have tried using the Animated API but it doesnt seem to support animating flex properties. Is there really no one out there that uses The Animated API extensively?

Answer 1

LayoutAnimation does a lot under the hood. Unless you are willing to go through the source you can set and vary a margin value in order to move the circle in the container. You can make all the calculations within the component and expose some styles as props.