IjzerenHein / IjzerenHein/react-navigation-shared-element
[v5] Custom React Navigation header breaks transition coordinates
- 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