Animated.View искажен на горе в реагировать родной

Question

Я работаю над пользовательской кнопкой действия с плавающей точкой (FAB), которая переключается, чтобы показать две кнопки действия, и она работает нормально, но когда я перемещаюсь с экрана, на котором есть FAB, и возвращается к тому же экрану, кнопка действия перемещается из своего положение в другую позицию, но как только я снова переключаю FAB, он становится нормальным и снова работает нормально. Пожалуйста, что вызывает искажение? Кажется, я не вижу проблемы. Пожалуйста, мне нужна помощь.

Вот мой код:

import React, {useRef} from 'react';
import {
  TouchableWithoutFeedback,
  StyleSheet,
  Image,
  Animated,
} from 'react-native';
import {Colors} from '../../utils/colors';
import {useNavigation} from '@react-navigation/native';
import {ScreenName} from '../../utils/constant';
import AntDesign from 'react-native-vector-icons/AntDesign';

const Fab = () => {
  let open;
  const fabState = useRef(new Animated.Value(0)).current;

  const navigation = useNavigation();

  const toggleOpen = () => {
    const toValue = open ? 0 : 1;
    Animated.spring(fabState, {
      toValue,
      friction: 5,
    }).start();
    open = !open;
  };

  const bgStyle = {
    transform: [
      {
        scale: fabState.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 30],
        }),
      },
    ],
  };

  const rotation = {
    transform: [
      {
        rotate: fabState.interpolate({
          inputRange: [0, 1],
          outputRange: ['0deg', '45deg'],
        }),
      },
    ],
  };

  const notifyStyle = {
    transform: [
      {
        scale: fabState,
      },
      {
        translateX: fabState.interpolate({
          inputRange: [0, 1],
          outputRange: [0, -70],
        }),
      },
    ],
  };

  const orderStyle = {
    transform: [
      {
        scale: fabState,
      },
      {
        translateY: fabState.interpolate({
          inputRange: [0, 1],
          outputRange: [0, -70],
        }),
      },
    ],
  };

  const opacity = fabState.interpolate({
    inputRange: [0, 0.5, 1],
    outputRange: [0, 0, 1],
  });

  return (
    <>
      <Animated.View style={[styles.overlay, bgStyle]} />
      <TouchableWithoutFeedback
        onPress={() => {
          toggleOpen();
          navigation.navigate(ScreenName.reminderNav);
        }}>
        <Animated.View
          style={[
            styles.button,
            styles.bg,
            {backgroundColor: Colors.darkGreen},
            notifyStyle,
            opacity,
          ]}>
          <Image
            source={require('../../../assets/image/fab/demostration.png')}
          />
        </Animated.View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback
        onPress={() => {
          toggleOpen();
          navigation.navigate(ScreenName.orderNav);
        }}>
        <Animated.View
          style={[
            styles.button,
            styles.bg,
            {backgroundColor: Colors.darkGreen},
            orderStyle,
            opacity,
          ]}>
          <Image
            source={require('../../../assets/image/fab/Stockholm-icons.png')}
          />
        </Animated.View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback
        onPress={() => {
          toggleOpen();
        }}>
        <Animated.View style={[styles.button, rotation]}>
          <AntDesign name="plus" size={24} color={Colors.white} />
        </Animated.View>
      </TouchableWithoutFeedback>
    </>
  );
};

const styles = StyleSheet.create({
  button: {
    width: 60,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 30,
    position: 'absolute',
    right: 20,
    bottom: 20,
    backgroundColor: Colors.green,
    zIndex: 1000,
  },
  overlay: {
    backgroundColor: 'rgba(0,0,0,0.4)',
    position: 'absolute',
    width: 60,
    height: 60,
    bottom: 20,
    right: 20,
    borderRadius: 30,
  },
});

export default Fab;