IjzerenHein / IjzerenHein/react-navigation-shared-element
Transition going back lag - not working
- 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