Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS Animate UIView Constraint Has Unexpected Behavior #22656

Closed
jemise111 opened this issue Dec 14, 2018 · 1 comment
Closed

iOS Animate UIView Constraint Has Unexpected Behavior #22656

jemise111 opened this issue Dec 14, 2018 · 1 comment
Labels
Bug Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.

Comments

@jemise111
Copy link
Contributor

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 40.35 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
Build Tools: 26.0.2, 27.0.3, 28.0.2, 28.0.3
API Levels: 23, 26, 27, 28
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1

Description

Hello! I'm using React Native inside a native iOS project and I'm running into some unexpected behavior. I've tried to outline my setup using the diagram below.

Basically I have an RCTRootView (with RN views inside of it) wrapped in a UIView (shown in Blue below). The UIView has a hardcoded constrained height (e.g. 200) using an NSLayoutConstraint. The RN views are all flex: 1 and are respecting their container's sizes (which is great!). If I change the constant of the container's constraint the RCTRootView and all subviews are also resized (which is also great!).

The problem is when I try to animate the constraint change. I am running the following code:

[self.view layoutIfNeeded];
[UIView animateWithDuration:0.3f delay:0.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
    self.myContainerViewHeightConstraint.constant = 100;
    [self.view layoutIfNeeded];
} completion:nil];

I would expect all subviews to be resized over the course of the animation. However the content of the RCTRootView is resized immediately while the container view animates appropriately.

I'm guessing there is something in the bridge between native views and RN views that watches for container's size changes and updates RN views sizes immediately.

If that is true is there any way for those updates to respect native animations?

Thanks for any help or insight!

Referenced diagram:

untitled diagram

@cpojer
Copy link
Contributor

cpojer commented Apr 2, 2019

Thanks for creating this issue. This is indeed a limitation of React Native right now but we are currently rearchitecting everything about RN so this should be fixed in a future version of RN sometime later this year.

@cpojer cpojer closed this as completed Apr 2, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Apr 2, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 2, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Platform: iOS iOS applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants