React Native: animate view depending on value of mobx observable

Question

in my react native app I want to move a view down 100 pixels if mobx observable "isModalVisible" is true, then 100 pixels up when it changes to false.

1. How can I start an animation to a mobx state change?

2. How can I move down 100 pixels a view using react native animated?

This is my first time with react native animation so I haven't got an idea...

const [ translateValue, setTranslateValue] = useState(new Animated.Value(0));

<Animated.View style={{transform: [{translateY: translateValue}]}}></Animated.View>

Thanks in advance

Answer 1

1. You're looking for useEffect function. You'll need to add a dependency for the mobx state change. Something like this:

React.useEffect(() => {
// do what you need to update the animation here //
}, [<MOBXSTATEVARIABLEHERE>]);

2. You call a higher-order function thats on the React 'Animated' component. You'll want to plug this in the useEffect function above. Something like this:

Animated.timing(myAnimationValue, {
  toValue: 1 // (or whatever value you want Y to be here),
  duration: 500
}).start();

3. In addition, i've always use React.useRef for my animations instead of using a state variable. Write this variable in as the value youre using for the y position on your mobx object. In the style object.

const myAnimationValue = React.useRef(new Animated.Value(0)).current;