IjzerenHein / IjzerenHein/react-navigation-shared-element

Transition going back lag - not working

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

Description

Hi there :)
my Shared Element isn´t working as it should when going back:

https://user-images.githubusercontent.com/24316787/124273549-6e4f1b00-db40-11eb-9e42-9e16aac95b1a.mov

```
function StoryDetailScreen(props) {
const { translations } = useContext(LocalizationContext);
const [navigation] = useState(props.navigation);
const [item] = useState(props.route.params.item);

return (



```

FlatList

```
index.toString()}
horizontal
ItemSeparatorComponent={() => }
ListFooterComponent={() => }
snapToInterval={230}
decelerationRate={'fast'}
pagingEnabled
/>
```

with render Item part
```

{
navigation
.navigate('StoryDetailScreen', { item });
}}
style={{ transform: [{ translateX }] }}
>




```

Can you help me? I don´t know why this is happening.. Thanks :)

```
"react-navigation-shared-element": "^5.0.0-alpha1",
"react-native-shared-element": "^0.7.0",
"@react-navigation/bottom-tabs": "^5.11.7",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the back-navigation transition with the shown StoryDetailScreen, FlatList, SharedElement components, and the listed package versions. Compare the forward and backward transitions in the provided video scenario; done means the shared element returns without the reported lag.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.