diff --git a/RNTester/js/DimensionsExample.js b/RNTester/js/DimensionsExample.js new file mode 100644 index 00000000000..9560a43d31d --- /dev/null +++ b/RNTester/js/DimensionsExample.js @@ -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 ( + + {JSON.stringify(this.state.dims)} + + ); + } +} + +exports.title = 'Dimensions'; +exports.description = 'Dimensions of the viewport'; +exports.examples = [ + { + title: 'window', + render(): React.Element { return ; } + }, + { + title: 'screen', + render(): React.Element { return ; } + }, +]; diff --git a/RNTester/js/RNTesterList.android.js b/RNTester/js/RNTesterList.android.js index 5f5e4e6c8f5..eee084dd023 100644 --- a/RNTester/js/RNTesterList.android.js +++ b/RNTester/js/RNTesterList.android.js @@ -160,6 +160,10 @@ const APIExamples: Array = [ key: 'DatePickerAndroidExample', module: require('./DatePickerAndroidExample'), }, + { + key: 'Dimensions', + module: require('./DimensionsExample'), + }, { key: 'GeolocationExample', module: require('./GeolocationExample'), diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js index a547363cbc5..b01a54d792b 100644 --- a/RNTester/js/RNTesterList.ios.js +++ b/RNTester/js/RNTesterList.ios.js @@ -271,6 +271,11 @@ const APIExamples: Array = [ module: require('./ClipboardExample'), supportsTVOS: false, }, + { + key: 'Dimensions', + module: require('./DimensionsExample'), + supportsTVOS: true, + }, { key: 'GeolocationExample', module: require('./GeolocationExample'),