CODEWITHSUNDEEP
reactjsreact-nativeexporeact-native-reanimatedshared-element-transition
Geekyvinayak
Geekyvinayak

Reputation: 342

React Reanimated shared element

i have made a react expo app with these versions of dependencies

"dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@expo/metro-runtime": "~3.1.3",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "expo": "~50.0.6",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.4",
    "react-native-reanimated": "~3.6.2",
    "react-native-web": "~0.19.6",
    "expo-image": "~1.10.6"
  },

now navigatiion stack is like this

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Homescreen} />
        <Stack.Screen name="About" component={AboutScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

and image tags on both screens are like

<Animated.Image source={require("./assets/adaptive-icon.png")} style={styles.image} sharedTransitionTag="tag" />

output

there is no transition on going from home to about .while comming back from about to home animationis there but image go in left corner and disappers .

what can be the fix.

Upvotes: 1

Views: 114

Answers (0)

Related Questions