IjzerenHein / IjzerenHein/react-navigation-shared-element

[v5] - Weird behavior with react-native-reanimated v2

Open
#120 14 comments 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1.3k
Forks
125
PR merge metrics
No merged PRs in 30d

Description

I am getting some weird behavior using `react-navigation-shared-element` with the new r`eact-native-reanimated` version 2. Almost 100% of the time, the element I am sharing throw the pages just "stucks" and go to the position with no transition.

### Preview:

![pokedex](https://user-images.githubusercontent.com/49207932/101058182-a1f6a200-356b-11eb-80d5-6c214f51ffa1.gif)

### Project dependencies:

````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"
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/native": "^5.0.9",
"@react-navigation/stack": "^5.1.1",
"axios": "^0.21.0",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-shared-element": "^0.7.0",
"react-native-web": "~0.13.12",
"react-navigation-shared-element": "^5.0.0-alpha1"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@types/react": "~16.9.35",
"@types/react-dom": "~16.9.8",
"@types/react-native": "~0.63.2",
"typescript": "~3.9.5"
},
"private": true
}
````

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the shared-element transition with the dependency versions listed in the issue, especially react-native-reanimated, react-navigation-shared-element, and Expo SDK 39. Compare the behavior with the reported preview; done means identifying the version interaction or other cause and restoring the transition rather than leaving the element stuck.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.