2015-07-23 13:43:35 +00:00
|
|
|
/**
|
2016-05-05 17:55:49 +00:00
|
|
|
* Copyright (c) 2013-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.
|
|
|
|
*
|
2015-07-23 13:43:35 +00:00
|
|
|
* 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';
|
|
|
|
|
2016-02-23 00:15:35 +00:00
|
|
|
export type UIExplorerExample = {
|
Listen to device orientation changes
Summary:
Similar to iOS, send device orientation changes events. This does not have the
`getCurrentOrientation` method, because it's not used. If necessary, we'll
add it separately.
This also adds a simple example for testing.
We listen to orientation changes in `onGlobalLayout`, and check if the rotation of the device has changed. If it has, we emit the event.
But:
- `onGlobalLayout` (and `onConfigurationChanged` - which is the method usually used for checking for device orientation changes) is *not* called when the device goes from landscape
to reverse landscape (same with portrait), as that is not a relayout / configuration change. We could detect if this happens with the help of an `OrientationEventListener`. However, this listener notifies you if the degree
of the phone changes by a single degree, which means that you need to know by how many degrees the phone needs to change in order for the orientation to change. I haven't looked into how accurate this could be, but I suspect that in practice it would cause a lot of bugs. A simple `abgs` and google search reveals that everybody uses a different margin for detecting a rotation change (from 30 to 45 degrees), so I suspect that this won't work
as expected in practice. Therefore, we're not using this here, and we're sticking to what android provides via `onConfigurationChanged`. If we find that we have issues because users need to know when the user goes
from landscape to reverse landscape, then we'll have to revisit this.
Reviewed By: foghina
Differential Revision: D3797521
fbshipit-source-id: 62508efd342a9a4b41b42b6138c73553cfdefebc
2016-09-06 10:54:27 +00:00
|
|
|
key: string,
|
|
|
|
module: Object,
|
2016-02-23 00:15:35 +00:00
|
|
|
};
|
2015-07-23 13:43:35 +00:00
|
|
|
|
2016-05-05 17:55:49 +00:00
|
|
|
const ComponentExamples: Array<UIExplorerExample> = [
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
2016-05-26 20:46:58 +00:00
|
|
|
key: 'ActivityIndicatorExample',
|
|
|
|
module: require('./ActivityIndicatorExample'),
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'DatePickerIOSExample',
|
|
|
|
module: require('./DatePickerIOSExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ImageExample',
|
|
|
|
module: require('./ImageExample'),
|
|
|
|
},
|
2016-06-07 14:42:50 +00:00
|
|
|
{
|
|
|
|
key: 'KeyboardAvoidingViewExample',
|
|
|
|
module: require('./KeyboardAvoidingViewExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'LayoutEventsExample',
|
|
|
|
module: require('./LayoutEventsExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ListViewExample',
|
|
|
|
module: require('./ListViewExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ListViewGridLayoutExample',
|
|
|
|
module: require('./ListViewGridLayoutExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ListViewPagingExample',
|
|
|
|
module: require('./ListViewPagingExample'),
|
|
|
|
},
|
|
|
|
{
|
2016-04-06 11:49:47 +00:00
|
|
|
key: 'MapViewExample',
|
|
|
|
module: require('./MapViewExample'),
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ModalExample',
|
|
|
|
module: require('./ModalExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'NavigatorExample',
|
|
|
|
module: require('./Navigator/NavigatorExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'NavigatorIOSColorsExample',
|
|
|
|
module: require('./NavigatorIOSColorsExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'NavigatorIOSExample',
|
|
|
|
module: require('./NavigatorIOSExample'),
|
|
|
|
},
|
2016-05-05 16:09:53 +00:00
|
|
|
{
|
|
|
|
key: 'PickerExample',
|
|
|
|
module: require('./PickerExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'PickerIOSExample',
|
|
|
|
module: require('./PickerIOSExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ProgressViewIOSExample',
|
|
|
|
module: require('./ProgressViewIOSExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'RefreshControlExample',
|
|
|
|
module: require('./RefreshControlExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ScrollViewExample',
|
|
|
|
module: require('./ScrollViewExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'SegmentedControlIOSExample',
|
|
|
|
module: require('./SegmentedControlIOSExample'),
|
|
|
|
},
|
|
|
|
{
|
2016-04-06 11:49:47 +00:00
|
|
|
key: 'SliderExample',
|
|
|
|
module: require('./SliderExample'),
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'StatusBarExample',
|
|
|
|
module: require('./StatusBarExample'),
|
|
|
|
},
|
2016-07-28 00:51:58 +00:00
|
|
|
{
|
|
|
|
key: 'SwipeableListViewExample',
|
|
|
|
module: require('./SwipeableListViewExample')
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'SwitchExample',
|
|
|
|
module: require('./SwitchExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TabBarIOSExample',
|
|
|
|
module: require('./TabBarIOSExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TextExample',
|
|
|
|
module: require('./TextExample.ios'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TextInputExample',
|
|
|
|
module: require('./TextInputExample.ios'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TouchableExample',
|
|
|
|
module: require('./TouchableExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TransparentHitTestExample',
|
|
|
|
module: require('./TransparentHitTestExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ViewExample',
|
|
|
|
module: require('./ViewExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'WebViewExample',
|
|
|
|
module: require('./WebViewExample'),
|
|
|
|
},
|
2015-07-23 13:43:35 +00:00
|
|
|
];
|
|
|
|
|
2016-05-05 17:55:49 +00:00
|
|
|
const APIExamples: Array<UIExplorerExample> = [
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'AccessibilityIOSExample',
|
|
|
|
module: require('./AccessibilityIOSExample'),
|
2015-07-23 13:43:35 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'ActionSheetIOSExample',
|
|
|
|
module: require('./ActionSheetIOSExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AdSupportIOSExample',
|
|
|
|
module: require('./AdSupportIOSExample'),
|
|
|
|
},
|
2016-05-05 16:09:53 +00:00
|
|
|
{
|
|
|
|
key: 'AlertExample',
|
|
|
|
module: require('./AlertExample').AlertExample,
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'AlertIOSExample',
|
|
|
|
module: require('./AlertIOSExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AnimatedExample',
|
|
|
|
module: require('./AnimatedExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AnExApp',
|
|
|
|
module: require('./AnimatedGratuitousApp/AnExApp'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AppStateExample',
|
|
|
|
module: require('./AppStateExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AsyncStorageExample',
|
|
|
|
module: require('./AsyncStorageExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'BorderExample',
|
|
|
|
module: require('./BorderExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'BoxShadowExample',
|
|
|
|
module: require('./BoxShadowExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'CameraRollExample',
|
|
|
|
module: require('./CameraRollExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ClipboardExample',
|
|
|
|
module: require('./ClipboardExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'GeolocationExample',
|
|
|
|
module: require('./GeolocationExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ImageEditingExample',
|
|
|
|
module: require('./ImageEditingExample'),
|
|
|
|
},
|
2016-04-25 07:08:42 +00:00
|
|
|
{
|
|
|
|
key: 'LayoutAnimationExample',
|
|
|
|
module: require('./LayoutAnimationExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'LayoutExample',
|
|
|
|
module: require('./LayoutExample'),
|
|
|
|
},
|
2016-02-29 11:28:48 +00:00
|
|
|
{
|
|
|
|
key: 'LinkingExample',
|
|
|
|
module: require('./LinkingExample'),
|
|
|
|
},
|
2016-08-07 07:44:09 +00:00
|
|
|
{
|
|
|
|
key: 'NativeAnimationsExample',
|
|
|
|
module: require('./NativeAnimationsExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'NavigationExperimentalExample',
|
|
|
|
module: require('./NavigationExperimental/NavigationExperimentalExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'NetInfoExample',
|
|
|
|
module: require('./NetInfoExample'),
|
|
|
|
},
|
Listen to device orientation changes
Summary:
Similar to iOS, send device orientation changes events. This does not have the
`getCurrentOrientation` method, because it's not used. If necessary, we'll
add it separately.
This also adds a simple example for testing.
We listen to orientation changes in `onGlobalLayout`, and check if the rotation of the device has changed. If it has, we emit the event.
But:
- `onGlobalLayout` (and `onConfigurationChanged` - which is the method usually used for checking for device orientation changes) is *not* called when the device goes from landscape
to reverse landscape (same with portrait), as that is not a relayout / configuration change. We could detect if this happens with the help of an `OrientationEventListener`. However, this listener notifies you if the degree
of the phone changes by a single degree, which means that you need to know by how many degrees the phone needs to change in order for the orientation to change. I haven't looked into how accurate this could be, but I suspect that in practice it would cause a lot of bugs. A simple `abgs` and google search reveals that everybody uses a different margin for detecting a rotation change (from 30 to 45 degrees), so I suspect that this won't work
as expected in practice. Therefore, we're not using this here, and we're sticking to what android provides via `onConfigurationChanged`. If we find that we have issues because users need to know when the user goes
from landscape to reverse landscape, then we'll have to revisit this.
Reviewed By: foghina
Differential Revision: D3797521
fbshipit-source-id: 62508efd342a9a4b41b42b6138c73553cfdefebc
2016-09-06 10:54:27 +00:00
|
|
|
{
|
|
|
|
key: 'OrientationChangeExample',
|
|
|
|
module: require('./OrientationChangeExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'PanResponderExample',
|
|
|
|
module: require('./PanResponderExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'PointerEventsExample',
|
|
|
|
module: require('./PointerEventsExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'PushNotificationIOSExample',
|
|
|
|
module: require('./PushNotificationIOSExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'RCTRootViewIOSExample',
|
|
|
|
module: require('./RCTRootViewIOSExample'),
|
|
|
|
},
|
2016-08-19 03:49:25 +00:00
|
|
|
{
|
|
|
|
key: 'RTLExample',
|
|
|
|
module: require('./RTLExample'),
|
|
|
|
},
|
2016-07-25 10:34:06 +00:00
|
|
|
{
|
|
|
|
key: 'ShareExample',
|
|
|
|
module: require('./ShareExample'),
|
|
|
|
},
|
2016-02-23 10:26:11 +00:00
|
|
|
{
|
|
|
|
key: 'SnapshotExample',
|
|
|
|
module: require('./SnapshotExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'TimerExample',
|
|
|
|
module: require('./TimerExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TransformExample',
|
|
|
|
module: require('./TransformExample'),
|
|
|
|
},
|
|
|
|
{
|
2016-03-03 12:08:10 +00:00
|
|
|
key: 'VibrationExample',
|
|
|
|
module: require('./VibrationExample'),
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2016-04-18 22:42:42 +00:00
|
|
|
{
|
|
|
|
key: 'WebSocketExample',
|
|
|
|
module: require('./WebSocketExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'XHRExample',
|
|
|
|
module: require('./XHRExample.ios'),
|
|
|
|
},
|
|
|
|
];
|
2015-11-04 01:10:15 +00:00
|
|
|
|
2016-02-23 00:15:35 +00:00
|
|
|
const Modules = {};
|
2015-07-23 13:43:35 +00:00
|
|
|
|
2016-02-23 00:15:35 +00:00
|
|
|
APIExamples.concat(ComponentExamples).forEach(Example => {
|
|
|
|
Modules[Example.key] = Example.module;
|
2015-07-23 13:43:35 +00:00
|
|
|
});
|
|
|
|
|
2016-02-23 00:15:35 +00:00
|
|
|
const UIExplorerList = {
|
|
|
|
APIExamples,
|
|
|
|
ComponentExamples,
|
|
|
|
Modules,
|
|
|
|
};
|
|
|
|
|
2015-07-23 13:43:35 +00:00
|
|
|
module.exports = UIExplorerList;
|