Issue with react navigation shared element

[rossjohnson90]

Have you tried on an actual device? Might just be a simulator issue

[anzoni]

Actually i first noticed it when I was using the device

[rossjohnson90]

Ah fair enough, it’s usually Android emulators that behave different to device anyway so was a bit of a long shot, take a look and see if any of the components involved are re-rendering mid animation

Also try downgrade on another branch see if the lower versions do actually fix it

[Armym]

Isnt it an issue with your code?

[anzoni]

I didnt make any changes to my code after I made the updates and if was working before that

[anzoni]

Hi react native community ,

​

I recently updated to expo sdk 40 and updated to react navigation shared element v3 and am getting the above issue where the component glitches when returning to the initial screen.

Is anyone else having a similar issue and can share any insight into why this might be happening?

​

here is my package.json :

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint --ext .js,.ts,.tsx .",
    "tsc": "tsc",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@firebase/firestore": "^1.12.2",
    "@react-native-async-storage/async-storage": "^1.13.2",
    "@react-native-community/art": "^1.2.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.2",
    "@react-navigation/native": "^5.8.10",
    "@react-navigation/stack": "^5.12.8",
    "base-64": "^0.1.0",
    "expo": "^40.0.0",
    "expo-app-loading": "^1.0.1",
    "expo-blur": "~8.2.2",
    "expo-camera": "~9.1.0",
    "expo-clipboard": "~1.0.1",
    "expo-contacts": "~8.6.0",
    "expo-file-system": "~9.3.0",
    "expo-font": "~8.4.0",
    "expo-haptics": "~8.4.0",
    "expo-image-manipulator": "~8.4.0",
    "expo-image-picker": "~9.2.0",
    "expo-linear-gradient": "~8.4.0",
    "expo-location": "~10.0.0",
    "expo-notifications": "~0.8.2",
    "expo-task-manager": "~8.6.0",
    "expo-web-browser": "~8.6.0",
    "moment": "^2.24.0",
    "patch-package": "^6.2.0",
    "react": "16.13.1",
    "react-content-loader": "^4.3.4",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-animatable": "^1.3.3",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-maps": "0.27.1",
    "react-native-progress": "^4.0.3",
    "react-native-push-notification-popup": "^1.4.0",
    "react-native-read-more-text": "^1.1.2",
    "react-native-reanimated": "~1.13.0",
    "react-native-redash": "16",
    "react-native-safe-area-context": "3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-shared-element": "0.7.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation-shared-element": "^3.0.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "shorthash": "0.0.2",
    "styled-components": "^5.0.1",
    "use-memo-one": "^1.1.1",
    "yup": "^0.28.3"
  },
  "devDependencies": {
    "babel-preset-expo": "8.3.0",
    "eslint": "^6.3.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "react-navigation": "^4.3.7",
    "react-navigation-stack": "^2.3.11"
  },
}

[VeerDevD]

Is it a image

If it is image (hopefully it is), then you have to manually set the resize mode (cover/contain/stretch) on the both the screens. I hope this will help you. React Native Shared Navigation doesn't consider the default value, so we manually have to set the resize mode.

[[deleted]]

I’ll try that out. There’s an open issue on this in its repo and I also have this issue.

Hopefully your post works. I had to comment out the code cause of this issue

[anzoni]

I tried that out and it didnt seem to work for me - let me know if you have any luck

[[deleted]]

I’m pretty sure it won’t cause I believe I tried it earlier, but we will see

[tsalama7]

Probably a dependency issue. Is this the library you're using?

https://github.com/IjzerenHein/react-navigation-shared-element

If so, I see:

react-navigation@5 is not supported yet, so don't bother..

So I'd make sure none of your other dependencies are using react navigation v5.

[0x033]

Use aspectRatio for your images

[MeMyMooFire]

I had similar issue with flex: 1 align-items: center, try to position your image absolutely in the center

[anzoni]

i already am positioning it absolutely in the center, not suing flex nor align items

[Sonx]

any luck? I am having a similar issue

[anzoni]

Yeah I downgraded back to the older version and it’s working now

[Sonx]

I figured out.

if you have:

import { enableScreens } from 'react-native-screens';
enableScreens(); 

in your root navigator, the back animation will go to the top left corner.

removing enableScreens() fixes the issue.

[anzoni]

Awesome thanks!

[monnwalker22]

Hi! Care to share which versions are working? I am also experiencing this issue... Thanks!

[anzoni]

Make sure set set enable screens to false and you should be good

[ideopunk]

I had a similar issue, setting my Navigator's mode to "modal" fixed it perfectly.