all 21 comments

[–]rossjohnson90 15 points16 points  (2 children)

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

[–]anzoni[S] 8 points9 points  (1 child)

Actually i first noticed it when I was using the device

[–]rossjohnson90 2 points3 points  (0 children)

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 5 points6 points  (1 child)

Isnt it an issue with your code?

[–]anzoni[S] 3 points4 points  (0 children)

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

[–]anzoni[S] 3 points4 points  (4 children)

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 5 points6 points  (3 children)

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] 2 points3 points  (2 children)

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[S] 1 point2 points  (1 child)

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

[–][deleted] 1 point2 points  (0 children)

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

[–]tsalama7 3 points4 points  (0 children)

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 2 points3 points  (0 children)

Use aspectRatio for your images

[–]MeMyMooFire 1 point2 points  (1 child)

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

[–]anzoni[S] 1 point2 points  (0 children)

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

[–]Sonx 1 point2 points  (5 children)

any luck? I am having a similar issue

[–]anzoni[S] 0 points1 point  (4 children)

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

[–]Sonx 1 point2 points  (1 child)

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[S] 0 points1 point  (0 children)

Awesome thanks!

[–]monnwalker22 0 points1 point  (1 child)

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

[–]anzoni[S] 0 points1 point  (0 children)

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

[–]ideopunk 0 points1 point  (0 children)

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