Skip to content

iOS Animate UIView Constraint Has Unexpected Behavior #22656

@jemise111

Description

@jemise111

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions