search

software-mansion / react-native-screens

Native navigation primitives for your React Native app.
https://docs.swmansion.com/react-native-screens/
MIT License
3.01k stars 512 forks source link

Rerendering parent view causes incorrect swipe animation offset #220

Closed ouabing closed 4 years ago

ouabing commented 4 years ago

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.

11573619380_ pic_hd

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 commented 4 years ago

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

IMG_1466

"react-native": "0.60.5",
 "react-native-screens": "^2.0.0-alpha.8",
iOS: 13.1.3
bwoodlt commented 4 years ago

Having similar issue

luutruong commented 4 years ago

Same for me :(

peterkuiper commented 4 years ago

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

Mlobaievskyi commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

mizinin commented 4 years ago

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

cmmartin commented 4 years ago

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

ajanauskas commented 4 years ago

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

gamingumar commented 4 years ago

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

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

ouabing commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

pepf commented 4 years ago

The issue seemed to be solved using this config :)

WoLewicki commented 4 years ago

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

ouabing commented 4 years ago

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

mayankkumawat commented 11 months ago

Simulator Screen Shot - iPhone 14 Pro - 2023-10-05 at 20 41 56

I am facing the same issue. Drawer is not properly closing. "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/drawer": "^6.3.0", "@react-navigation/native": "^6.1.1", "@react-navigation/stack": "^6.3.10", "react-native-screens": "^3.23.0", "react-native-reanimated": "^3.5.1",