IjzerenHein / IjzerenHein/react-navigation-shared-element

Transition is not triggered when navigation.goBack()

Open
#91 12 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

![2020-07-17 16 15 06](https://user-images.githubusercontent.com/33729094/87790159-c9f99900-c848-11ea-90ea-a8f00f77b79d.gif)

```js
import React from 'react'
import { createSharedElementStackNavigator } from 'react-navigation-shared-element'
import { TransitionPresets } from '@react-navigation/stack'

import { Home as HomeScreen } from '../screens/Home'
import { PurchaseDetails as PurchaseDetailsScreen } from '../screens/Home/screens/PurchaseDetails'
import { boarderlessHeader } from '../StyleGuide'
import { ROUTES } from '../setup-kit/constants'
import { PurchaseServerSide } from '../setup-kit/interfaces'

export type HomeStackParamsList = {
[ROUTES.Home]: undefined
[ROUTES.Purchase]: { id: string; data: PurchaseServerSide }
}

const HomeStack = createSharedElementStackNavigator()

function HomeStackScreen() {
return (

{
const { id } = route.params
return [
`purchase.wrapper.${id}`,
`purchase.image.${id}`,
`purchase.name.${id}`,
`purchase.status.${id}`,
`purchase.type.${id}`,
]
}}
/>
{
const { id } = route.params
return [
`purchase.wrapper.${id}`,
`purchase.image.${id}`,
`purchase.name.${id}`,
`purchase.status.${id}`,
`purchase.type.${id}`,
]
}}
/>

)
}

export { HomeStackScreen }
```

```json
"react-native-shared-element": "^0.7.0",
"react-navigation-shared-element": "^3.0.0",
"@react-navigation/bottom-tabs": "^5.6.1",
"@react-navigation/native": "^5.6.1",
"@react-navigation/stack": "^5.6.2",
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the back-navigation case from the HomeStackScreen configuration, using navigation.goBack() and the listed react-navigation-shared-element and react-native-shared-element versions. Compare the transition behavior with forward navigation; done means the shared-element transition is triggered consistently when returning with navigation.goBack().

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 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.