Hamburger.js

import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Animated, StyleSheet } from 'react-native';

const RootStack = createStackNavigator(
  {
    Hamburger: StateChange, // Assuming StateChange is the component in Hamburger.js
    Home: HomeScreen,
  }, 
  {
    initialRouteName: "Hamburger"
  }
);

const StateChange = () => {
  const [isRotating, setIsRotating] = useState(false);
  const [isHidden, setIsHidden] = useState(false);

  const rotationValue = useRef(new Animated.Value(0)).current;
  const scaleValue = useRef(new Animated.Value(1)).current;
  const rotationValue2 = useRef(new Animated.Value(0)).current;

  const handleTap = () => {
    Animated.parallel([
      Animated.spring(rotationValue, {
        toValue: isRotating ? 0 : 1,
        friction: 7,
        tension: 300,
        useNativeDriver: false,
      }),
      Animated.spring(scaleValue, {
        toValue: isHidden ? 1 : 0,
        friction: 7,
        tension: 300,
        useNativeDriver: false,
      }),
      Animated.spring(rotationValue2, {
        toValue: isRotating ? 0 : 1,
        friction: 7,
        tension: 300,
        useNativeDriver: false,
      }),
    ]).start(() => {
      setIsRotating(!isRotating);
      setIsHidden(!isHidden);
    });
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={handleTap}>
        <Animated.View style={[styles.animationView, { transform: [{ rotate: rotationValue.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '45deg'] }) }] }]} />
        <Animated.View style={[styles.animationView, { transform: [{ scale: scaleValue }], opacity: scaleValue }]} />
        <Animated.View style={[styles.animationView, { transform: [{ rotate: rotationValue2.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '-45deg'] }) }] }]} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  animationView: {
    width: 64,
    height: 10,
    borderRadius: 4,
    backgroundColor: 'blue',
    marginBottom: 14,
  },
});

export default StateChange;