outputRange реагирует на нативную анимацию, изменяет значение после анимации

Question

У меня возникла проблема с моей интерполяцией в личном проекте. Я пытаюсь создать меню ящика, которое появится справа. Дело в том, что когда я меняю статус «переключателя», анимация не скрывается правильно. Пожалуйста, кто-нибудь может помочь мне с этим?

Это код:

import React, {Component} from 'react';
import {Animated} from 'react-native';

import styles from './styles/SlidePanel.styles';

export default class SlidePanel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      panelAnimation: new Animated.Value(0)
    }
  }

  showAnimation = () => {
    Animated.timing(this.state.panelAnimation, {
      toValue: 1,
      duration: 300,
      useNativeDriver: false,
    }).start();
  }

  hideAnimation = () => {
    Animated.timing(this.state.panelAnimation, {
      toValue: 0,
      duration: 100,
      useNativeDriver: false,
    }).start();
  }

  render()  {
      const {children, backgroundColor, width, show} = this.props;
      const panelWith = width || '40%';
      const rightAnimation = parseInt(panelWith);

      const animated = this.state.panelAnimation.interpolate({
        inputRange: [0, 1],
        outputRange: [`${-Math.abs(rightAnimation)}%`, '0%']
      });

      const animatedStyle = {
        right: animated
      }

      if (show) {
        this.showAnimation();
      } else {
        this.hideAnimation();
      }


    return (
      <Animated.View style={
        [
          styles.container,
          {
            backgroundColor: backgroundColor || '#1a2333',
            width: panelWith
          },
          animatedStyle
        ]}>
        {children}
      </Animated.View>
    )
  }
}

Я нашел проблему, но не могу ее исправить: (*

Проблема в outputRange:

outputRange: [`${-Math.abs(rightAnimation)}%`, '0%']

Когда анимация переходит на 1, текущее значение равно "0%", что идеально, НО при попытке go к 0 снова значение равно $ {- Math.abs (rightAnimation)}% таким образом исчезают, потому что значение этого вывода должно быть ['0%', ${-Math.abs(rightAnimation)}%]

¿Как я могу изменить этот outputRange после анимация заканчивается?

GIF с фактическим результатом:

введите описание изображения здесь