Реагировать на собственную анимацию скользящего бокового меню

Question

Я хочу создать боковое меню, но я не хочу использовать ящик потока маршрутизатора rn, потому что я хочу, чтобы меню скользило по основному контенту, а не скользило поверх него. Я довольно незнаком с анимацией, но это кажется простой задачей. По сути, я раздираю домашний экран с шириной в 1,75 раза больше ширины экрана пользователя, когда компонент монтируется, я хочу, чтобы начальное значение x было 0,75 * ширины экрана, а затем, когда я нажимаю кнопку, значение x уменьшается до 0 (или крайнее левое значение x компонента.

Вот что у меня есть:

import React, {Component} from 'react';
import {View, Dimensions, Animated} from 'react-native';
import SideMenu from '../../components/Home/SideMenu';
import Header from '../../components/Home/Header';
import LocationInfo from '../../components/Home/LocationInfo';
import Tabs from '../../components/Home/Tabs';
import Colors from '../../Colors';

class Main extends Component {
  state = {
    active: 0,
    xSideMenu: 0,
    xHome: 0,
    translateX: new Animated.Value(0),
  };

  handleSlide = type => {
    let {translateX} = this.state;
    Animated.timing(translateX, {
      toValue: type,
      duration: 75,
    }).start();
  };
  render() {
    return (
      <View style={styles.homeContainerStyle}>
        <SideMenu />
        <View style={styles.topSectionContainer}>
          <Header />
          <View style={styles.locationInfoContainer}>
            <LocationInfo />
          </View>
          <View style={styles.tabsContainer}>
            <Tabs />
          </View>
        </View>
      </View>
    );
  }
}

const styles = {
  homeContainerStyle: {
    width: Dimensions.get('window').width * 1.75,
    flexDirection: 'row',
  },
  topSectionContainer: {
    backgroundColor: Colors.white,
    shadowColor: Colors.black,
    shadowOffset: {width: 0, height: 1},
    shadowOpacity: 0.3,
  },
  locationInfoContainer: {
    width: Dimensions.get('window').width,
    paddingTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  tabsContainer: {
    paddingTop: 5,
  },
};

export default Main;

Я начал настраивать анимацию, но есть ли у кого-нибудь какие-либо предложения относительно того, что будет дальше? шаги должны быть?