Smooth transition only happens once

[gabrielvincent]

https://user-images.githubusercontent.com/469519/172361966-a0fb0899-47b1-428f-ab54-3ac71a090a2d.mp4

This is where I create the Navigation Container

const Root: React.FC<RootProps> = ({}) => {
  const theme = useTheme()
  return (
    <SafeAreaView
      style={{ backgroundColor: theme.colors.background, ...tw`flex-1` }}
    >
      <NavigationContainer>
        <Stack.Navigator initialRouteName='Today'>
          <Stack.Screen
            name='Today'
            component={HomePage}
            options={{
              headerShown: false,
            }}
          />
          <Stack.Screen
            name='CardDetail'
            component={CardDetail}
            options={{
              headerShown: false,
              cardStyle: {
                opacity: 1,
              },
              cardStyleInterpolator: ({ current }) => ({
                cardStyle: {
                  opacity: current.progress,
                },
              }),
            }}
            sharedElements={(route, otherRoute, showing) => {
              return [
                `birth_chart`,
                `${route.name}.${route.key}.background`,
                `${route.name}.${route.key}.compact`,
                {
                  id: `${route.name}.${route.key}.expanded`,
                  resize: 'clip',
                  animation: 'fade',
                },
                {
                  id: `${route.name}.${route.key}.back_button`,
                  resize: 'clip',
                  animation: 'fade',
                },
              ]
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  )
}

This is the CardDetail component:

const CardDetail: NavigationStackScreenComponentWithSharedComponent<
  CardDetailProps,
  RootStackParamList,
  'CardDetail'
> = ({ navigation, route }) => {
  const theme = useTheme()
  const birthChartProviderState = route.params?.birthChartProviderState

  return (
    <ScrollView style={{ backgroundColor: theme.colors.background, flex: 1 }}>
      <SkiaBirthChartProvider syncState={birthChartProviderState}>
        <SharedElement id='birth_chart'>
          <BirthChart />
        </SharedElement>

        <View style={tw`px-4`}>
          <SunInSignCard
            expanded
            onBack={() => {
              navigation.pop()
            }}
          />
        </View>
      </SkiaBirthChartProvider>
    </ScrollView>
  )
}

All the shared elements are defined in the SunInSignCard component, for example:

<SharedElement
  id='CardDetail.sun_in_sign.background'
  style={{
    ...tw`absolute inset-0`,
  }}
>
  <View
    style={{
      ...tw`rounded-xl w-full h-full bg-white`,
    }}
  />
</SharedElement>

What could be causing this?

I'm using:

• "expo": "~45.0.0"
• "react-native": "0.68.2"
• "react-native-shared-element": "0.8.4"
• "react-navigation-shared-element": "^3.1.3"
• "@react-navigation/native": "^6.0.10"
• "@react-navigation/native-stack": "^6.6.2"
• "@react-navigation/stack": "^6.2.1"

[fukemy]

hi, how did u make your app run? I got this problem:

Unable to resolve module @react-navigation/stack from .../Work/VedaxLink/node_modules/react-navigation-shared-element/build/createSharedElementStackNavigator.js: @react-navigation/stack could not be found within the project or in these directories:
  node_modules
  1 | import { useNavigationBuilder, createNavigatorFactory, StackRouter, } from "@react-navigation/native";
> 2 | import { CardAnimationContext, StackView, } from "@react-navigation/stack";
    |                                                   ^
  3 | import * as React from "react";
  4 | import { Platform } from "react-native";
  5 | import { useSharedElementFocusEvents } from "./SharedElementFocusEvents";

package json:

"react-native-shared-element": "^0.8.4",
"react-navigation-shared-element": "^3.1.3",
"@react-navigation/native": "^6.0.10",
"@react-navigation/native-stack": "^6.6.1",

[gabrielvincent]

@fukemy It looks like @react-navigation/stack is missing. Try npm i @react-navigation/stack or yarn add @react-navigation/stack.

[fukemy]

thanks, i forgot it

[hashhirr]

how did you resolved your issue?

[gabrielvincent]

I didn't. I ended up choosing a simpler UI without a lot of fluff.