2015-09-14 14:35:58 +00:00
|
|
|
/**
|
2017-05-06 03:50:47 +00:00
|
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
2016-06-07 14:42:50 +00:00
|
|
|
*
|
2018-02-17 02:24:55 +00:00
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
2016-06-07 14:42:50 +00:00
|
|
|
*
|
2018-05-11 20:32:37 +00:00
|
|
|
* @format
|
2018-08-08 17:39:16 +00:00
|
|
|
* @flow
|
2015-09-14 14:35:58 +00:00
|
|
|
*/
|
2018-05-11 20:32:37 +00:00
|
|
|
|
2015-09-14 14:35:58 +00:00
|
|
|
'use strict';
|
|
|
|
|
2017-05-06 03:50:47 +00:00
|
|
|
export type RNTesterExample = {
|
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-09-14 14:35:58 +00:00
|
|
|
|
2017-05-06 03:50:47 +00:00
|
|
|
const ComponentExamples: Array<RNTesterExample> = [
|
2016-05-26 20:46:58 +00:00
|
|
|
{
|
|
|
|
key: 'ActivityIndicatorExample',
|
|
|
|
module: require('./ActivityIndicatorExample'),
|
|
|
|
},
|
2016-10-11 00:18:42 +00:00
|
|
|
{
|
|
|
|
key: 'ButtonExample',
|
|
|
|
module: require('./ButtonExample'),
|
|
|
|
},
|
2017-08-25 17:22:17 +00:00
|
|
|
{
|
|
|
|
key: 'CheckBoxExample',
|
|
|
|
module: require('./CheckBoxExample'),
|
|
|
|
},
|
2017-02-28 16:47:51 +00:00
|
|
|
{
|
|
|
|
key: 'FlatListExample',
|
|
|
|
module: require('./FlatListExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'ImageExample',
|
|
|
|
module: require('./ImageExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ListViewExample',
|
|
|
|
module: require('./ListViewExample'),
|
|
|
|
},
|
2016-09-15 18:54:46 +00:00
|
|
|
{
|
|
|
|
key: 'ListViewGridLayoutExample',
|
|
|
|
module: require('./ListViewGridLayoutExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ListViewPagingExample',
|
|
|
|
module: require('./ListViewPagingExample'),
|
|
|
|
},
|
2016-03-18 11:20:36 +00:00
|
|
|
{
|
|
|
|
key: 'ModalExample',
|
|
|
|
module: require('./ModalExample'),
|
|
|
|
},
|
2017-02-28 16:47:51 +00:00
|
|
|
{
|
|
|
|
key: 'MultiColumnExample',
|
|
|
|
module: require('./MultiColumnExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
2016-05-05 16:09:53 +00:00
|
|
|
key: 'PickerExample',
|
|
|
|
module: require('./PickerExample'),
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ProgressBarAndroidExample',
|
2018-08-13 18:14:35 +00:00
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
|
|
* when making Flow check .android.js files. */
|
2016-02-23 00:15:35 +00:00
|
|
|
module: require('./ProgressBarAndroidExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'RefreshControlExample',
|
|
|
|
module: require('./RefreshControlExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ScrollViewSimpleExample',
|
|
|
|
module: require('./ScrollViewSimpleExample'),
|
|
|
|
},
|
2017-02-28 16:47:51 +00:00
|
|
|
{
|
|
|
|
key: 'SectionListExample',
|
|
|
|
module: require('./SectionListExample'),
|
|
|
|
},
|
2016-09-15 18:54:46 +00:00
|
|
|
{
|
|
|
|
key: 'SliderExample',
|
|
|
|
module: require('./SliderExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'StatusBarExample',
|
|
|
|
module: require('./StatusBarExample'),
|
|
|
|
},
|
2017-09-29 05:14:45 +00:00
|
|
|
{
|
|
|
|
key: 'SwipeableFlatListExample',
|
2018-05-11 20:32:37 +00:00
|
|
|
module: require('./SwipeableFlatListExample'),
|
2017-09-29 05:14:45 +00:00
|
|
|
},
|
2016-07-28 00:51:58 +00:00
|
|
|
{
|
|
|
|
key: 'SwipeableListViewExample',
|
2018-05-11 20:32:37 +00:00
|
|
|
module: require('./SwipeableListViewExample'),
|
2016-07-28 00:51:58 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'SwitchExample',
|
|
|
|
module: require('./SwitchExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TextExample',
|
2018-08-13 18:14:35 +00:00
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
|
|
* when making Flow check .android.js files. */
|
2016-02-23 00:15:35 +00:00
|
|
|
module: require('./TextExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TextInputExample',
|
2018-08-13 18:14:35 +00:00
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
|
|
* when making Flow check .android.js files. */
|
2016-02-23 00:15:35 +00:00
|
|
|
module: require('./TextInputExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ToolbarAndroidExample',
|
2018-08-13 18:14:35 +00:00
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
|
|
* when making Flow check .android.js files. */
|
2016-02-23 00:15:35 +00:00
|
|
|
module: require('./ToolbarAndroidExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TouchableExample',
|
|
|
|
module: require('./TouchableExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ViewExample',
|
|
|
|
module: require('./ViewExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ViewPagerAndroidExample',
|
2018-08-13 18:14:35 +00:00
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
|
|
* when making Flow check .android.js files. */
|
2016-02-23 00:15:35 +00:00
|
|
|
module: require('./ViewPagerAndroidExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'WebViewExample',
|
|
|
|
module: require('./WebViewExample'),
|
|
|
|
},
|
2015-09-14 14:35:58 +00:00
|
|
|
];
|
|
|
|
|
2017-05-06 03:50:47 +00:00
|
|
|
const APIExamples: Array<RNTesterExample> = [
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'AccessibilityAndroidExample',
|
2018-08-13 18:14:35 +00:00
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
|
|
* when making Flow check .android.js files. */
|
2016-02-23 00:15:35 +00:00
|
|
|
module: require('./AccessibilityAndroidExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AlertExample',
|
|
|
|
module: require('./AlertExample').AlertExample,
|
|
|
|
},
|
2016-08-07 07:44:09 +00:00
|
|
|
{
|
|
|
|
key: 'AnimatedExample',
|
|
|
|
module: require('./AnimatedExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'AppStateExample',
|
|
|
|
module: require('./AppStateExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'BorderExample',
|
|
|
|
module: require('./BorderExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'CameraRollExample',
|
|
|
|
module: require('./CameraRollExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ClipboardExample',
|
|
|
|
module: require('./ClipboardExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'DatePickerAndroidExample',
|
|
|
|
module: require('./DatePickerAndroidExample'),
|
|
|
|
},
|
2017-10-21 01:55:17 +00:00
|
|
|
{
|
|
|
|
key: 'Dimensions',
|
|
|
|
module: require('./DimensionsExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'GeolocationExample',
|
|
|
|
module: require('./GeolocationExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ImageEditingExample',
|
|
|
|
module: require('./ImageEditingExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'LayoutEventsExample',
|
|
|
|
module: require('./LayoutEventsExample'),
|
|
|
|
},
|
2016-02-29 11:28:48 +00:00
|
|
|
{
|
|
|
|
key: 'LinkingExample',
|
|
|
|
module: require('./LinkingExample'),
|
|
|
|
},
|
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-08-07 07:44:09 +00:00
|
|
|
{
|
|
|
|
key: 'NativeAnimationsExample',
|
|
|
|
module: require('./NativeAnimationsExample'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
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'),
|
|
|
|
},
|
2016-06-15 16:42:51 +00:00
|
|
|
{
|
|
|
|
key: 'PermissionsExampleAndroid',
|
2018-08-13 18:14:35 +00:00
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
|
|
* when making Flow check .android.js files. */
|
2016-06-15 16:42:51 +00:00
|
|
|
module: require('./PermissionsExampleAndroid'),
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'PointerEventsExample',
|
|
|
|
module: require('./PointerEventsExample'),
|
|
|
|
},
|
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 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'TimePickerAndroidExample',
|
|
|
|
module: require('./TimePickerAndroidExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TimerExample',
|
|
|
|
module: require('./TimerExample'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ToastAndroidExample',
|
2018-08-13 18:14:35 +00:00
|
|
|
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
|
|
* when making Flow check .android.js files. */
|
2016-02-23 00:15:35 +00:00
|
|
|
module: require('./ToastAndroidExample'),
|
|
|
|
},
|
2016-06-21 18:24:31 +00:00
|
|
|
{
|
|
|
|
key: 'TransformExample',
|
|
|
|
module: require('./TransformExample'),
|
|
|
|
},
|
2016-03-03 12:08:10 +00:00
|
|
|
{
|
|
|
|
key: 'VibrationExample',
|
|
|
|
module: require('./VibrationExample'),
|
|
|
|
},
|
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'),
|
|
|
|
},
|
2015-09-14 14:35:58 +00:00
|
|
|
];
|
|
|
|
|
2016-02-23 00:15:35 +00:00
|
|
|
const Modules = {};
|
2015-09-14 14:35:58 +00:00
|
|
|
|
2016-02-23 00:15:35 +00:00
|
|
|
APIExamples.concat(ComponentExamples).forEach(Example => {
|
|
|
|
Modules[Example.key] = Example.module;
|
2015-09-14 14:35:58 +00:00
|
|
|
});
|
|
|
|
|
2017-05-06 03:50:47 +00:00
|
|
|
const RNTesterList = {
|
2016-02-23 00:15:35 +00:00
|
|
|
APIExamples,
|
|
|
|
ComponentExamples,
|
|
|
|
Modules,
|
|
|
|
};
|
|
|
|
|
2017-05-06 03:50:47 +00:00
|
|
|
module.exports = RNTesterList;
|