status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[ReactNative] Introduce onLayout events 

Summary:
Simply add an `onLayout` callback to a native view component, and the callback
will be invoked with the current layout information when the view is mounted and
whenever the layout changes.

The only limitation is that scroll position and other stuff the layout system
isn't aware of is not taken into account.  This is because onLayout events
wouldn't be triggered for these changes and if they are desired they should be
tracked separately (e.g. with `onScroll`) and combined.

Also fixes some bugs with LayoutAnimation callbacks.

@public

Test Plan:
- Run new LayoutEventsExample in UIExplorer and see it work correctly.
- New integration test passes internally (IntegrationTest project seems busted).
- New jest test case passes.

{F22318433}

```
2015-05-06 15:45:05.848 [info][tid:com.facebook.React.JavaScript] "Running application "UIExplorerApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF"
2015-05-06 15:45:05.881 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":123,"x":12.5,"width":140.5,"height":18}}
2015-05-06 15:45:05.882 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":122,"width":50,"height":50}}
2015-05-06 15:45:05.883 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":70.5,"x":20,"width":294,"height":204}}
2015-05-06 15:45:05.897 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":206.5,"x":12.5,"width":140.5,"height":18}}
2015-05-06 15:45:05.897 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":70.5,"x":20,"width":294,"height":287.5}}
2015-05-06 15:45:09.847 [info][tid:com.facebook.React.JavaScript] "layout animation done."
2015-05-06 15:45:09.847 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":82,"width":50,"height":50}}
2015-05-06 15:45:09.848 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":110.5,"x":60,"width":214,"height":287.5}}
2015-05-06 15:45:09.862 [info][tid:com.facebook.React.JavaScript] "received text layout event
", {"target":27,"layout":{"y":206.5,"x":12.5,"width":120,"height":68}}
2015-05-06 15:45:09.863 [info][tid:com.facebook.React.JavaScript] "received image layout event
", {"target":23,"layout":{"y":12.5,"x":55,"width":50,"height":50}}
2015-05-06 15:45:09.863 [info][tid:com.facebook.React.JavaScript] "received view layout event
", {"target":22,"layout":{"y":128,"x":60,"width":160,"height":337.5}}
```
This commit is contained in:
Spencer Ahrens 2015-05-07 12:11:02 -07:00
parent f251b0ddb8
commit 1ef4e00fba
11 changed files with 389 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
Examples/UIExplorer/LayoutEventsExample.js Normal file
View File

@ -0,0 +1,150 @@
/**
* The examples provided by Facebook are for non-commercial testing and
* evaluation purposes only.
*
* Facebook reserves all rights not expressly granted.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @flow
*/
'use strict';
var React = require('react-native');
var {
Image,
LayoutAnimation,
StyleSheet,
Text,
View,
} = React;
type LayoutEvent = {
nativeEvent: {
layout: {
x: number;
y: number;
width: number;
height: number;
};
};
};
var LayoutEventExample = React.createClass({
getInitialState: function() {
return {
viewStyle: {
margin: 20,
},
};
},
animateViewLayout: function() {
LayoutAnimation.configureNext(
LayoutAnimation.Presets.spring,
() => {
console.log('layout animation done.');
this.addWrapText();
},
(error) => { throw new Error(JSON.stringify(error)); }
);
this.setState({
viewStyle: {
margin: this.state.viewStyle.margin > 20 ? 20 : 60,
}
});
},
addWrapText: function() {
this.setState(
{extraText: ' And a bunch more text to wrap around a few lines.'},
this.changeContainer
);
},
changeContainer: function() {
this.setState({containerStyle: {width: 280}});
},
onViewLayout: function(e: LayoutEvent) {
console.log('received view layout event\n', e.nativeEvent);
this.setState({viewLayout: e.nativeEvent.layout});
},
onTextLayout: function(e: LayoutEvent) {
console.log('received text layout event\n', e.nativeEvent);
this.setState({textLayout: e.nativeEvent.layout});
},
onImageLayout: function(e: LayoutEvent) {
console.log('received image layout event\n', e.nativeEvent);
this.setState({imageLayout: e.nativeEvent.layout});
},
render: function() {
var viewStyle = [styles.view, this.state.viewStyle];
var textLayout = this.state.textLayout || {width: '?', height: '?'};
var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
return (
<View style={this.state.containerStyle}>
<Text>
onLayout events are called on mount and whenever layout is updated,
including after layout animations complete.{' '}
<Text style={styles.pressText} onPress={this.animateViewLayout}>
Press here to change layout.
</Text>
</Text>
<View ref="view" onLayout={this.onViewLayout} style={viewStyle}>
<Image
ref="img"
onLayout={this.onImageLayout}
style={styles.image}
source={{uri: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'}}
/>
<Text>
ViewLayout: {JSON.stringify(this.state.viewLayout, null, ' ') + '\n\n'}
</Text>
<Text ref="txt" onLayout={this.onTextLayout} style={styles.text}>
A simple piece of text.{this.state.extraText}
</Text>
<Text>
{'\n'}
Text w/h: {textLayout.width}/{textLayout.height + '\n'}
Image x/y: {imageLayout.x}/{imageLayout.y}
</Text>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
view: {
padding: 12,
borderColor: 'black',
borderWidth: 0.5,
backgroundColor: 'transparent',
},
text: {
alignSelf: 'flex-start',
borderColor: 'rgba(0, 0, 255, 0.2)',
borderWidth: 0.5,
},
image: {
width: 50,
height: 50,
marginBottom: 10,
alignSelf: 'center',
},
pressText: {
fontWeight: 'bold',
},
});
exports.title = 'onLayout';
exports.description = 'Layout events can be used to measure view size and position.';
exports.examples = [
{
title: 'onLayout',
render: function(): ReactElement {
return <LayoutEventExample />;
},
}];

1
Examples/UIExplorer/UIExplorerList.js
View File

@ -64,6 +64,7 @@ var APIS = [
require('./BorderExample'),
require('./CameraRollExample.ios'),
require('./GeolocationExample'),
require('./LayoutEventsExample'),
require('./LayoutExample'),
require('./NetInfoExample'),
require('./PanResponderExample'),

1
IntegrationTests/IntegrationTestsApp.js
View File

@ -25,6 +25,7 @@ var TESTS = [
require('./IntegrationTestHarnessTest'),
require('./TimersTest'),
require('./AsyncStorageTest'),
require('./LayoutEventsTest'),
require('./SimpleSnapshotTest'),
];

5
IntegrationTests/IntegrationTestsTests/IntegrationTestsTests.m
View File

@ -71,6 +71,11 @@
[_runner runTest:_cmd module:@"AsyncStorageTest"];
}
- (void)testLayoutEvents
{
[_runner runTest:_cmd module:@"LayoutEventsTest"];
}
#pragma mark Snapshot Tests
- (void)testSimpleSnapshot

167
IntegrationTests/LayoutEventsTest.js Normal file
View File

@ -0,0 +1,167 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule LayoutEventsTest
* @flow
*/
'use strict';
var React = require('react-native');
var {
Image,
LayoutAnimation,
NativeModules,
StyleSheet,
Text,
View,
} = React;
var TestModule = NativeModules.TestModule || NativeModules.SnapshotTestManager;
var deepDiffer = require('deepDiffer');
function debug() {
//console.log.apply(null, arguments);
}
type LayoutEvent = {
nativeEvent: {
layout: {
x: number;
y: number;
width: number;
height: number;
};
};
};
var LayoutEventsTest = React.createClass({
getInitialState: function() {
return {
didAnimation: false,
};
},
animateViewLayout: function() {
LayoutAnimation.configureNext(
LayoutAnimation.Presets.spring,
() => {
debug('layout animation done.');
this.checkLayout(this.addWrapText);
},
(error) => { throw new Error(JSON.stringify(error)); }
);
this.setState({viewStyle: {margin: 60}});
},
addWrapText: function() {
this.setState(
{extraText: ' And a bunch more text to wrap around a few lines.'},
() => this.checkLayout(this.changeContainer)
);
},
changeContainer: function() {
this.setState(
{containerStyle: {width: 280}},
() => this.checkLayout(TestModule.markTestCompleted)
);
},
checkLayout: function(next?: ?Function) {
if (!this.isMounted()) {
return;
}
this.refs.view.measure((x, y, width, height) => {
this.compare('view', {x, y, width, height}, this.state.viewLayout);
if (typeof next === 'function') {
next();
} else if (!this.state.didAnimation) {
// Trigger first state change after onLayout fires
this.animateViewLayout();
this.state.didAnimation = true;
}
});
this.refs.txt.measure((x, y, width, height) => {
this.compare('txt', {x, y, width, height}, this.state.textLayout);
});
this.refs.img.measure((x, y, width, height) => {
this.compare('img', {x, y, width, height}, this.state.imageLayout);
});
},
compare: function(node: string, measured: any, onLayout: any): void {
if (deepDiffer(measured, onLayout)) {
var data = {measured, onLayout};
throw new Error(
node + ' onLayout mismatch with measure ' +
JSON.stringify(data, null, ' ')
);
}
},
onViewLayout: function(e: LayoutEvent) {
debug('received view layout event\n', e.nativeEvent);
this.setState({viewLayout: e.nativeEvent.layout}, this.checkLayout);
},
onTextLayout: function(e: LayoutEvent) {
debug('received text layout event\n', e.nativeEvent);
this.setState({textLayout: e.nativeEvent.layout}, this.checkLayout);
},
onImageLayout: function(e: LayoutEvent) {
debug('received image layout event\n', e.nativeEvent);
this.setState({imageLayout: e.nativeEvent.layout}, this.checkLayout);
},
render: function() {
var viewStyle = [styles.view, this.state.viewStyle];
var textLayout = this.state.textLayout || {width: '?', height: '?'};
var imageLayout = this.state.imageLayout || {x: '?', y: '?'};
return (
<View style={[styles.container, this.state.containerStyle]}>
<View ref="view" onLayout={this.onViewLayout} style={viewStyle}>
<Image
ref="img"
onLayout={this.onImageLayout}
style={styles.image}
source={{uri: 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png'}}
/>
<Text>
ViewLayout: {JSON.stringify(this.state.viewLayout, null, ' ') + '\n\n'}
</Text>
<Text ref="txt" onLayout={this.onTextLayout} style={styles.text}>
A simple piece of text.{this.state.extraText}
</Text>
<Text>
{'\n'}
Text w/h: {textLayout.width}/{textLayout.height + '\n'}
Image x/y: {imageLayout.x}/{imageLayout.y}
</Text>
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
margin: 40,
},
view: {
margin: 20,
padding: 12,
borderColor: 'black',
borderWidth: 0.5,
backgroundColor: 'transparent',
},
text: {
alignSelf: 'flex-start',
borderColor: 'rgba(0, 0, 255, 0.2)',
borderWidth: 0.5,
},
image: {
width: 50,
height: 50,
marginBottom: 10,
alignSelf: 'center',
},
});
module.exports = LayoutEventsTest;

5
Libraries/Components/View/View.js
View File

@ -90,6 +90,11 @@ var View = React.createClass({
onStartShouldSetResponder: PropTypes.func,
onStartShouldSetResponderCapture: PropTypes.func,
/**
* Invoked on mount and layout changes with {x, y, width, height}.
*/
onLayout: PropTypes.func,
/**
* In the absence of `auto` property, `none` is much like `CSS`'s `none`
* value. `box-none` is as if you had applied the `CSS` class:

6
Libraries/ReactIOS/ReactIOSViewAttributes.js
View File

@ -9,8 +9,7 @@
* @providesModule ReactIOSViewAttributes
* @flow
*/
"use strict";
'use strict';
var merge = require('merge');
@ -21,6 +20,7 @@ ReactIOSViewAttributes.UIView = {
accessible: true,
accessibilityLabel: true,
testID: true,
onLayout: true,
};
ReactIOSViewAttributes.RCTView = merge(
@ -31,7 +31,7 @@ ReactIOSViewAttributes.RCTView = merge(
// For this property to be effective, it must be applied to a view that contains
// many subviews that extend outside its bound. The subviews must also have
// overflow: hidden, as should the containing view (or one of its superviews).
removeClippedSubviews: true
removeClippedSubviews: true,
});
module.exports = ReactIOSViewAttributes;

20
Libraries/ReactIOS/diffRawProperties.js
View File

@ -42,6 +42,16 @@ function diffRawProperties(
}
prevProp = prevProps && prevProps[propKey];
nextProp = nextProps[propKey];
// functions are converted to booleans as markers that the associated
// events should be sent from native.
if (typeof prevProp === 'function') {
prevProp = true;
}
if (typeof nextProp === 'function') {
nextProp = true;
}
if (prevProp !== nextProp) {
// If you want a property's diff to be detected, you must configure it
// to be so - *or* it must be a scalar property. For now, we'll allow
@ -75,6 +85,16 @@ function diffRawProperties(
}
prevProp = prevProps[propKey];
nextProp = nextProps && nextProps[propKey];
// functions are converted to booleans as markers that the associated
// events should be sent from native.
if (typeof prevProp === 'function') {
prevProp = true;
}
if (typeof nextProp === 'function') {
nextProp = true;
}
if (prevProp !== nextProp) {
if (nextProp === undefined) {
nextProp = null; // null is a sentinel we explicitly send to native

42
React/Modules/RCTUIManager.m
View File

@ -19,6 +19,7 @@
#import "RCTBridge.h"
#import "RCTConvert.h"
#import "RCTDefines.h"
#import "RCTEventDispatcher.h"
#import "RCTLog.h"
#import "RCTProfile.h"
#import "RCTRootView.h"
@ -420,17 +421,31 @@ static NSDictionary *RCTViewConfigForModule(Class managerClass, NSString *viewNa
[rootShadowView collectRootUpdatedFrames:viewsWithNewFrames
parentConstraint:(CGSize){CSS_UNDEFINED, CSS_UNDEFINED}];
// Parallel arrays
// Parallel arrays are built and then handed off to main thread
NSMutableArray *frameReactTags = [NSMutableArray arrayWithCapacity:viewsWithNewFrames.count];
NSMutableArray *frames = [NSMutableArray arrayWithCapacity:viewsWithNewFrames.count];
NSMutableArray *areNew = [NSMutableArray arrayWithCapacity:viewsWithNewFrames.count];
NSMutableArray *parentsAreNew = [NSMutableArray arrayWithCapacity:viewsWithNewFrames.count];
NSMutableArray *onLayoutEvents = [NSMutableArray arrayWithCapacity:viewsWithNewFrames.count];
for (RCTShadowView *shadowView in viewsWithNewFrames) {
[frameReactTags addObject:shadowView.reactTag];
[frames addObject:[NSValue valueWithCGRect:shadowView.frame]];
[areNew addObject:@(shadowView.isNewView)];
[parentsAreNew addObject:@(shadowView.superview.isNewView)];
id event = [NSNull null];
if (shadowView.hasOnLayout) {
event = @{
@"target": shadowView.reactTag,
@"layout": @{
@"x": @(shadowView.frame.origin.x),
@"y": @(shadowView.frame.origin.y),
@"width": @(shadowView.frame.size.width),
@"height": @(shadowView.frame.size.height),
},
};
}
[onLayoutEvents addObject:event];
}
for (RCTShadowView *shadowView in viewsWithNewFrames) {
@ -448,20 +463,30 @@ static NSDictionary *RCTViewConfigForModule(Class managerClass, NSString *viewNa
// Perform layout (possibly animated)
NSNumber *rootViewTag = rootShadowView.reactTag;
return ^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) {
RCTResponseSenderBlock callback = self->_layoutAnimation.callback;
__block NSInteger completionsCalled = 0;
for (NSUInteger ii = 0; ii < frames.count; ii++) {
NSNumber *reactTag = frameReactTags[ii];
UIView *view = viewRegistry[reactTag];
CGRect frame = [frames[ii] CGRectValue];
id event = onLayoutEvents[ii];
BOOL isNew = [areNew[ii] boolValue];
RCTAnimation *updateAnimation = isNew ? nil : _layoutAnimation.updateAnimation;
BOOL shouldAnimateCreation = isNew && ![parentsAreNew[ii] boolValue];
RCTAnimation *createAnimation = shouldAnimateCreation ? _layoutAnimation.createAnimation : nil;
void (^completion)(BOOL finished) = ^(BOOL finished) {
if (self->_layoutAnimation.callback) {
self->_layoutAnimation.callback(@[@(finished)]);
completionsCalled++;
if (event != [NSNull null]) {
[self.bridge.eventDispatcher sendInputEventWithName:@"topLayout" body:event];
}
if (callback && completionsCalled == frames.count - 1) {
callback(@[@(finished)]);
}
};
// Animate view update
BOOL isNew = [areNew[ii] boolValue];
RCTAnimation *updateAnimation = isNew ? nil: _layoutAnimation.updateAnimation;
if (updateAnimation) {
[updateAnimation performAnimations:^{
[view reactSetFrame:frame];
@ -478,9 +503,7 @@ static NSDictionary *RCTViewConfigForModule(Class managerClass, NSString *viewNa
}
// Animate view creation
BOOL shouldAnimateCreation = isNew && ![parentsAreNew[ii] boolValue];
RCTAnimation *createAnimation = _layoutAnimation.createAnimation;
if (shouldAnimateCreation && createAnimation) {
if (createAnimation) {
if ([createAnimation.property isEqualToString:@"scaleXY"]) {
view.layer.transform = CATransform3DMakeScale(0, 0, 0);
} else if ([createAnimation.property isEqualToString:@"opacity"]) {
@ -1262,6 +1285,9 @@ RCT_EXPORT_METHOD(clearJSResponder)
@"topScrollAnimationEnd": @{
@"registrationName": @"onScrollAnimationEnd"
},
@"topLayout": @{
@"registrationName": @"onLayout"
},
@"topSelectionChange": @{
@"registrationName": @"onSelectionChange"
},

1
React/Views/RCTShadowView.h
View File

@ -41,6 +41,7 @@ typedef void (^RCTApplierBlock)(RCTSparseArray *);
@property (nonatomic, assign) BOOL isBGColorExplicitlySet; // Used to propagate to children
@property (nonatomic, strong) UIColor *backgroundColor; // Used to propagate to children
@property (nonatomic, assign) RCTUpdateLifecycle layoutLifecycle;
@property (nonatomic, assign) BOOL hasOnLayout;
/**
* isNewView - Used to track the first time the view is introduced into the hierarchy. It is initialized YES, then is

2
React/Views/RCTViewManager.m
View File

@ -198,4 +198,6 @@ RCT_CUSTOM_SHADOW_PROPERTY(backgroundColor, UIColor, RCTShadowView)
view.isBGColorExplicitlySet = json ? YES : defaultView.isBGColorExplicitlySet;
}
RCT_REMAP_SHADOW_PROPERTY(onLayout, hasOnLayout, BOOL)
@end