IjzerenHein / IjzerenHein/react-navigation-shared-element
[iOS] Offset when using SafeAreaView
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 125
- PR merge metrics
- No merged PRs in 30d
Description
First of all, thank you for this amazing library!
I found an issue in iOS when using `SafeAreaView` (both from `react-native` and `react-native-safe-area-context`) with SharedElements. Without the SafeAreaView it works well. When making the animation, there is a little "jump", where the final place of the animation is off by some offset.
The code can be found and it's runnable in https://github.com/BeeMargarida/react-navigation-shared-element, it's the last example (sorry for the quality of the code, it was a testing scenario made really fast).
Code
```
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import React from "react";
import { Button, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import {
SharedElement,
createSharedElementStackNavigator,
} from "react-navigation-shared-element";
const Stack = createStackNavigator();
const SharedElementStack = createSharedElementStackNavigator();
const forFade = ({ current, closing }) => ({
cardStyle: {
opacity: current.progress,
},
});
const Screen1 = (props: any) => {
return (
{
props.navigation.navigate("screen2");
}}
/>
);
};
const Screen2 = () => {
return (
);
};
const InnerStack = () => (
{
const { model } = route.params;
return [
{
id: "item",
otherId: "item",
animation: "move",
},
];
}}
/>
);
export default () => (
);
```
https://user-images.githubusercontent.com/25725586/130613627-91929813-9b74-491c-a59a-3220db436186.mp4
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the last SafeAreaView example in the linked react-navigation-shared-element test repository on iOS, comparing it with the version without SafeAreaView. Trace the SharedElement transition and safe-area positioning to identify the source of the jump or final offset, then verify that the animation ends at the correct position.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100