From 3b05cf2c9838265523dc9637f2cd61859a22bf65 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Fri, 1 Jul 2016 14:51:35 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/communication-ios.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/releases/next/docs/communication-ios.html b/releases/next/docs/communication-ios.html index 24f662ddc26..82bb7b7e73d 100644 --- a/releases/next/docs/communication-ios.html +++ b/releases/next/docs/communication-ios.html @@ -42,7 +42,7 @@ All native modules share the same namespace. Watch out for name collisions when RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:appName initialProperties:props]; - rootView.frame = CGMakeRect(0, 0, self.view.width, 200); + rootView.frame = CGRectMake(0, 0, self.view.width, 200); [self.view addSubview:rootView]; }

When we have a fixed size root view, we need to respect its bounds on the JS side. In other words, we need to ensure that the React Native content can be contained within the fixed-size root view. The easiest way to ensure this is to use flexbox layout. If you use absolute positioning, and React components are visible outside the root view's bounds, you'll get overlap with native views, causing some features to behave unexpectedly. For instance, 'TouchableHighlight' will not highlight your touches outside the root view's bounds.

It's totally fine to update root view's size dynamically by re-setting its frame property. React Native will take care of the content's layout.

React Native content with flexible size #

In some cases we'd like to render content of initially unknown size. Let's say the size will be defined dynamically in JS. We have two solutions to this problem.

  1. You can wrap your React Native view in ScrollView component. This guarantees that your content will always be available and it won't overlap with native views.
  2. React Native allows you to determine, in JS, the size of the RN app and provide it to the owner of the hosting RCTRootView. The owner is then responsible for re-laying out the subviews and keeping the UI consistent. We achieve this with RCTRootView's flexibility modes.

RCTRootView supports 4 different size flexibility modes:

// RCTRootView.h