react-native/IntegrationTests/IntegrationTestsApp.js

107 lines
2.5 KiB
JavaScript
Raw Normal View History

/**
* 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.
*
* @flow
* @providesModule IntegrationTestsApp
*/
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
AppRegistry,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} = ReactNative;
// Keep this list in sync with RNTesterIntegrationTests.m
var TESTS = [
require('./IntegrationTestHarnessTest'),
require('./TimersTest'),
2015-03-18 20:37:16 +00:00
require('./AsyncStorageTest'),
[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}} ```
2015-05-07 19:11:02 +00:00
require('./LayoutEventsTest'),
2015-05-20 06:47:38 +00:00
require('./AppEventsTest'),
2015-03-24 17:20:13 +00:00
require('./SimpleSnapshotTest'),
require('./ImageCachePolicyTest'),
require('./ImageSnapshotTest'),
require('./PromiseTest'),
require('./SyncMethodTest'),
require('./WebSocketTest'),
require('./AccessibilityManagerTest'),
];
TESTS.forEach(
(test) => AppRegistry.registerComponent(test.displayName, () => test)
);
// Modules required for integration tests
require('LoggingTestModule');
type Test = any;
class IntegrationTestsApp extends React.Component {
state = {
test: (null: ?Test),
};
render() {
if (this.state.test) {
return (
<ScrollView>
<this.state.test />
</ScrollView>
);
}
return (
<View style={styles.container}>
<Text style={styles.row}>
Click on a test to run it in this shell for easier debugging and
development. Run all tests in the testing environment with cmd+U in
Xcode.
</Text>
<View style={styles.separator} />
<ScrollView>
{TESTS.map((test) => [
[Animated][BREAKING_CHANGE] Convert <TouchableOpacity> to Animated Summary: Because we don't want to integrate Animated inside of the core of React, we can only pass Animated.Value to styles of <Animated.View>. TouchableOpacity unfortunately used cloneElement. This means that we should have asked every single call site to replace their children to Animated.View. This isn't great. The other solution is to stop using cloneElement and instead wrap the children inside of an <Animated.View>. This has many advantages: - We no longer use cloneElement so we're no longer messing up with elements that are not our own. - Refs are now working correctly for children elements - No longer need to enforce that there's only one child and that this child is a native element The downside is that we're introducing a <View> into the hierarchy. Sadly with CSS there is no way to have a View that doesn't affect layout. What we need to do is to remove the inner <View> and transfer all the styles to the TouchableOpacity. It is annoying but fortunately a pretty mechanical process. I think that having a wrapper is the best solution. I will investigate to see if we can make wrappers on TouchableHighliht and TouchableWithoutFeedback as well. **Upgrade Path:** If the child is a View, move the style of the View to TouchableOpacity and remove the View itself. ``` <TouchableOpacity onPress={...}> <View style={...}> ... </View> </TouchableOpacity> --> <TouchableOpacity onPress={...} style={...}> ... </TouchableOpacity> ``` If the child is an Image or Text, on all the examples at Facebook it worked without any change. But it is a great idea to double check them anyway.
2015-07-20 23:29:40 +00:00
<TouchableOpacity
onPress={() => this.setState({test})}
style={styles.row}>
<Text style={styles.testName}>
{test.displayName}
</Text>
</TouchableOpacity>,
<View style={styles.separator} />
])}
</ScrollView>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
backgroundColor: 'white',
marginTop: 40,
margin: 15,
},
row: {
padding: 10,
},
testName: {
fontWeight: '500',
},
separator: {
height: 1,
backgroundColor: '#bbbbbb',
},
});
AppRegistry.registerComponent('IntegrationTestsApp', () => IntegrationTestsApp);