IjzerenHein / IjzerenHein/react-navigation-shared-element

[iOS] Offset when using SafeAreaView

Open
#187 8 comments 4 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.