Implement a JSTester example for the Dimensions API

Summary:
JSTester is missing a page for the Dimensions API. This also makes it hard to test out some things in the tester app that affect the app's frame when you need to know how they affect the dimensions.

![screenshot_1508500992](https://user-images.githubusercontent.com/53399/31820157-d28dc1cc-b554-11e7-84a1-4bb39204adab.png)
![simulator screen shot - iphone 7 plus - 2017-10-20 at 05 03 08](https://user-images.githubusercontent.com/53399/31820158-d2a52204-b554-11e7-9eb4-84c757830871.png)

* [INTERNAL] [ENHANCEMENT] [JSTester] - Dimensions example added to JSTester
Closes https://github.com/facebook/react-native/pull/16473

Differential Revision: D6117984

Pulled By: hramos

fbshipit-source-id: 8f42ca7aaf42b76f8b9771317ce82a2cfce47ffa
This commit is contained in:
Daniel Friesen 2017-10-20 18:55:17 -07:00 committed by Facebook Github Bot
parent 165b38ab7a
commit 28824f8eb3
3 changed files with 70 additions and 0 deletions

View File

@ -0,0 +1,61 @@
/**
* 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 DimensionsExample
* @flow
*/
'use strict';
const React = require('react');
const ReactNative = require('react-native');
const {
Dimensions,
Text,
View
} = ReactNative;
class DimensionsSubscription extends React.Component<{dim: string}, {dims: Object}> {
state = {
dims: Dimensions.get(this.props.dim),
};
componentDidMount() {
Dimensions.addEventListener('change', this._handleDimensionsChange);
}
componentWillUnmount() {
Dimensions.removeEventListener('change', this._handleDimensionsChange);
}
_handleDimensionsChange = (dimensions) => {
this.setState({
dims: dimensions[this.props.dim],
});
};
render() {
return (
<View>
<Text>{JSON.stringify(this.state.dims)}</Text>
</View>
);
}
}
exports.title = 'Dimensions';
exports.description = 'Dimensions of the viewport';
exports.examples = [
{
title: 'window',
render(): React.Element<any> { return <DimensionsSubscription dim="window" />; }
},
{
title: 'screen',
render(): React.Element<any> { return <DimensionsSubscription dim="screen" />; }
},
];

View File

@ -160,6 +160,10 @@ const APIExamples: Array<RNTesterExample> = [
key: 'DatePickerAndroidExample',
module: require('./DatePickerAndroidExample'),
},
{
key: 'Dimensions',
module: require('./DimensionsExample'),
},
{
key: 'GeolocationExample',
module: require('./GeolocationExample'),

View File

@ -271,6 +271,11 @@ const APIExamples: Array<RNTesterExample> = [
module: require('./ClipboardExample'),
supportsTVOS: false,
},
{
key: 'Dimensions',
module: require('./DimensionsExample'),
supportsTVOS: true,
},
{
key: 'GeolocationExample',
module: require('./GeolocationExample'),