react-native - React Native - 共有要素はヘッダーの上でクリップされ、アニメーション表示が終了すると下に移動します

Question

問題は、共有要素が上部に遷移し、ヘッダー バーのアニメーションが終了すると、共有要素が下に移動するため、見栄えが悪いことです。

ヘッダー バーがアニメーション化されることを期待していますが、WA5 1BZ はアニメーション化された高さが終了する場所に移行し、ヘッダー バーを超えないようにします。

ジョブ画面:

import React, {useEffect, useRef} from 'react';
import { StyleSheet, SafeAreaView, Text, View, TouchableOpacity, Animated, Image } from 'react-native';
import StandardElements from '@componentsDir/StandardElements';
import {
  SharedElement,
} from 'react-navigation-shared-element';
import LightTheme from '@constantsDir/LightTheme';
import getJobStatus from '@hooksDir/getJobStatus';

export default function JobScreen ({ route, navigation }) {
  const {id, job_type, address, compare} = route.params;
  const height = useRef(new Animated.Value(95)).current;
  const status = getJobStatus({ job: route.params });
  const cardStatusColor = LightTheme.statusColors[status];

  useEffect(() => {
    Animated.timing(height, {
      toValue: 200,
      duration: 300,
      useNativeDriver: false,
    }).start();
  }, []);

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <StandardElements.HeaderBar title={"Job"} height={height} type={'animated'} />

      <View>
        <SharedElement id={id}>
          <Text style={{...styles.postcode}}>
              {address.postcode}
          </Text>
        </SharedElement>
      </View>
    </SafeAreaView>
  );
};

標準ヘッダー バー:

import React, { Component, useContext, useState } from 'react';
import { Text, View, StyleSheet, Animated } from 'react-native';
import styled from 'styled-components/native';

const StandardHeaderBar = ({ title, height, type = "normal" }) => {
    const StandardText = styled.Text`
        color: #ffffff;
    `;


    if (type == "normal") {
        return (
            <View style={styles.standardHeaderBarView}>
                <StandardText style={styles.standardHeaderBarTitle}>
                    {title}
                </StandardText>
            </View>
        )
    } else {
        return (
            <Animated.View style={{...styles.standardHeaderBarView, ...{height: height }}}>
                <StandardText style={styles.standardHeaderBarTitle}>
                    {title}
                </StandardText>
            </Animated.View>
        )
    }
    
}

画面スタック:

<Stack.Screen
   name="Job"
   component={JobScreen}
   options={() => {
      return {
          headerShown: false,
          gestureEnabled: false,
          transitionSpec: {
             open: {
                  animation: 'spring',
                  config: { 
                     duration: 50, 
                     stiffness: 1000,
                     damping: 500,
                     mass: 3,
                     overshootClamping: true,
                     restDisplacementThreshold: 0.01,
                     restSpeedThreshold: 0.01,
                  },
              },
              close: { 
                  animation: 'spring', 
                     config: { 
                        duration: 50, 
                        stiffness: 1000,
                        damping: 500,
                        mass: 3,
                        overshootClamping: true,
                        restDisplacementThreshold: 0.01,
                        restSpeedThreshold: 0.01
                     } 
                  },
             },
          cardStyleInterpolator: ({ current: { progress } }) => {
               return {
                   cardStyle: {
                      opacity: progress,
                   },
               };
           },
         }}}
         sharedElements={(route) => {
            return [{
               id: route.params.id,
               resize: "none",
               align: "left-top",
               animation: "fade-in"
            }
         ];}}
/>

スクリーンショットの例: