React-native-screens: Rerendering parent view causes incorrect swipe animation offset

[ouabing]

I'm using react-native-appearance to listen to the system appearance change event. When the system appearance changes, all the mounted screens will rerender. With enableScreens called, the parent screen will animate incorrectly on iOS, as the screenshot below.

react-navigation: 4.0.10
react-navigation-stack: 1.10.3
react-navigation-tabs: 2.5.6
react-native-screens: 2.0.0-alpha.8
react-native: 0.61.4
system: iOS 13.2

[cmmartin]

I have possibly the same issue. I can only seem to reproduce it in Release mode. (Edit: reproduced Debug Mode also) Basically I can swipe the screen to the right, creating the gap on the left side. Almost like a drawer that should not exist...

I'm not sure if this is an issue with this repo or react-navigation

"react-native": "0.60.5",
 "react-native-screens": "^2.0.0-alpha.8",
iOS: 13.1.3

[bwoodlt]

Having similar issue

[luutruong]

Same for me :(

[peterkuiper]

Still having this problem with the latest 2.0.0-alpha.11.

[Mlobaievskyi]

You just need to replace your import { createStackNavigator } from 'react-navigation-stack' with import createNativeStackNavigator from 'react-native-screens/createNativeStackNavigator';. It should resolve your issues (refer to docs https://github.com/kmagiera/react-native-screens#using-native-stack-navigator)

[luutruong]

@Mlobaievskyi
There are some technical limitations for implementing some of the stack header options.

I have tried that and break my layouts. More worst :D

[ouabing]

@Mlobaievskyi Native stack navigator doesn't support some stack navigation options, I think it's still an experimental feature.

[mizinin]

@kmagiera @janicduplessis @osdnk Any solution for this? It's very relevant problem

[cmmartin]

@mizinin Are you using import createNativeStackNavigator from 'react-native-screens/createNativeStackNavigator'? Solved the issue for me

[ajanauskas]

Using createNativeStackNavigator is not suitable for all cases, since its API is much more restrictive compared to @react-navigation/stack library

[gamingumar]

The issue seems to be fixed in "2.0.0-alpha.23"

I am using "react-navigation-stack": "^2.0.13",

[ouabing]

I'm still using react-navigation-stack 1.10.3, the 2.0.0-alpha.23 version seems not solving this issue for me.

I currently can't upgrade react-navigation-stack to 2.0.13 version 'cause it breaks my screen animations and need some rework. I'll check if 2.0.0-alpha.23 works with 2.0.13 once I upgrade it.

[pepf]

Issue seems to be fixed for me as well, using these versions:

   "react-native-screens": "^2.0.0-alpha.23",
    "react-native": "0.61.5",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^2.0.15",

[WoLewicki]

Does the issue still exist in the newest version? @ouabing @pepf ? Or can I close it?

[pepf]

The issue seemed to be solved using this config :)

[WoLewicki]

Ok, so I am closing it. Feel free to comment if the issue still persists for someone.

[ouabing]

I've already migrated to react-navigation v5 and react-navigation-stack v2, no more this issue so far.