Toggle React-Native animation value - react-native

Question

I try to toggle React-Native animation value, but my Animated.View is not animated, my translationX is "brute", without transition.
const OffCanvas = ({ visible, close }) => {
const WINDOW_WIDTH = Dimensions.get('window').width;
const animatedValue = new Animated.Value(visible ? 0 : WINDOW_WIDTH);
Animated.timing(animatedValue, {
toValue: visible ? 0 : WINDOW_WIDTH,
duration: 250,
easing: Easing.elastic(0.7),
delay: 0
}).start();
...
Anyone can help me ?

Answer 1

I think you try to animated your animatedValue up to its original value.
You probably need to put :
const animatedValue = new Animated.Value(visible ? 0 : WINDOW_WIDTH);
in componentDidMount() or in constructor() and store this value on your state.

Answer 2

Define WINDOW_WIDTH on top.
Add a listener to keep track of animated value inside the constructor.
Sample code
const WINDOW_WIDTH = Dimensions.get('window').width;
export default class Calls extends Component {
constructor() {
super();
this.animatedValue = new Animated.Value(0);
this.animatedValue.addListener(({ value }) => this._value = value);
}
toggle=() => {
const offset = JSON.parse(JSON.stringify(this.animatedValue));
Animated.timing(this.animatedValue, {
toValue: offset > WINDOW_WIDTH ? 0 : WINDOW_WIDTH,
duration: 250,
easing: Easing.elastic(0.7),
}).start();
}
....
===================================================
Or use a state variable to handle toggling.
Sample code
const WINDOW_WIDTH = Dimensions.get('window').width;
export default class Calls extends Component {
state = { toggle: false };
toggle=() => {
const { toggle } = this.state;
Animated.timing(this.animatedValue, {
toValue: toggle ? 0 : WINDOW_WIDTH,
duration: 250,
easing: Easing.elastic(0.7),
}).start(() => {
this.setState({ toggle: !toggle });
});
}