IjzerenHein / IjzerenHein/react-navigation-shared-element

[v5] Custom React Navigation header breaks transition coordinates

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

Description

I tried the react-navigation-shared-element with React Navigation v5, and while the element (an image in this case) is shared between the screens the transition from a flatlist view to the detail view is not correct (element transitions but then jumps down when the header is rendered to correct position).

I suspect this is because the initial coordinates the element transitions to does not take into account the custom header on the destination screen (i.e. when transitioning from list screen to the detail screen). Even though both screen has the same header, only the text within it changes (i.e. no dimension or size differences between origin and destination screens).

The header code:

```
const Header = ({ scene, previous, navigation }) => {
// Set the user_id and fetch avatar pic
const [user_id, setUserid] = useState(readLogInStatus().user_id);
const { loading, error, data } = useQuery(GET_PROFILE, {
variables: { user_id },
});

// Define the headertitles
const { options } = scene.descriptor;
const title = options.headerTitle;
const theme = useTheme();

// Await the return of the avatar pic data
if (loading) return ;

if (error || data.users_by_pk == null)
return There was an error, try and reload.;

return (

{previous ? (

) : (
{
navigation.openDrawer();
}}
>


)}


);
};

export default function HomeStack() {
return (
(

),
}}
>
({
headerTitle: getHeaderTitle(route),
})}
/>
{
const { item } = route.params;
return [`item.${item.id}.photo`];
}}
/>

);
}
```

And then I just wrap the image with the wrapper, same image in the list and detail view. Any ideas what I am doing wrong?

```
"dependencies": {
"@react-navigation/drawer": "^5.9.0",
"@react-navigation/material-bottom-tabs": "^5.2.16",
"@react-navigation/material-top-tabs": "^5.2.16",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"react-navigation": "^4.4.0",
"react-navigation-shared-element": "prerelease",
"react-native-shared-element": "0.7.0"
},
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the custom Header and Stack.Navigator configuration shown in the issue, then reproduce the List-to-Details transition with the SharedElement-wrapped image. Compare the transition coordinates before and after the destination header renders; done means the image reaches its final position without jumping.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.