react-native/RNTester/js/RNTesterList.android.js

281 lines
6.3 KiB
JavaScript
Raw Normal View History

/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow
*/
'use strict';
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,
};
const ComponentExamples: Array<RNTesterExample> = [
{
key: 'ActivityIndicatorExample',
module: require('./ActivityIndicatorExample'),
},
{
key: 'ButtonExample',
module: require('./ButtonExample'),
},
{
key: 'CheckBoxExample',
module: require('./CheckBoxExample'),
},
{
key: 'FlatListExample',
module: require('./FlatListExample'),
},
{
key: 'ImageExample',
module: require('./ImageExample'),
},
{
key: 'ListViewExample',
module: require('./ListViewExample'),
},
{
key: 'ListViewGridLayoutExample',
module: require('./ListViewGridLayoutExample'),
},
{
key: 'ListViewPagingExample',
module: require('./ListViewPagingExample'),
},
{
key: 'ModalExample',
module: require('./ModalExample'),
},
{
key: 'MultiColumnExample',
module: require('./MultiColumnExample'),
},
{
key: 'PickerExample',
module: require('./PickerExample'),
},
{
key: 'ProgressBarAndroidExample',
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
module: require('./ProgressBarAndroidExample'),
},
{
key: 'RefreshControlExample',
module: require('./RefreshControlExample'),
},
{
key: 'ScrollViewSimpleExample',
module: require('./ScrollViewSimpleExample'),
},
{
key: 'SectionListExample',
module: require('./SectionListExample'),
},
{
key: 'SliderExample',
module: require('./SliderExample'),
},
{
key: 'StatusBarExample',
module: require('./StatusBarExample'),
},
{
key: 'SwipeableFlatListExample',
module: require('./SwipeableFlatListExample'),
},
{
key: 'SwipeableListViewExample',
module: require('./SwipeableListViewExample'),
},
{
key: 'SwitchExample',
module: require('./SwitchExample'),
},
{
key: 'TextExample',
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
module: require('./TextExample'),
},
{
key: 'TextInputExample',
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
module: require('./TextInputExample'),
},
{
key: 'ToolbarAndroidExample',
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
module: require('./ToolbarAndroidExample'),
},
{
key: 'TouchableExample',
module: require('./TouchableExample'),
},
{
key: 'ViewExample',
module: require('./ViewExample'),
},
{
key: 'ViewPagerAndroidExample',
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
module: require('./ViewPagerAndroidExample'),
},
{
key: 'WebViewExample',
module: require('./WebViewExample'),
},
];
const APIExamples: Array<RNTesterExample> = [
{
key: 'AccessibilityAndroidExample',
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
module: require('./AccessibilityAndroidExample'),
},
{
key: 'AlertExample',
module: require('./AlertExample').AlertExample,
},
{
key: 'AnimatedExample',
module: require('./AnimatedExample'),
},
{
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'),
},
{
key: 'Dimensions',
module: require('./DimensionsExample'),
},
{
key: 'GeolocationExample',
module: require('./GeolocationExample'),
},
{
key: 'ImageEditingExample',
module: require('./ImageEditingExample'),
},
{
key: 'LayoutEventsExample',
module: require('./LayoutEventsExample'),
},
{
key: 'LinkingExample',
module: require('./LinkingExample'),
},
{
key: 'LayoutAnimationExample',
module: require('./LayoutAnimationExample'),
},
{
key: 'LayoutExample',
module: require('./LayoutExample'),
},
{
key: 'NativeAnimationsExample',
module: require('./NativeAnimationsExample'),
},
{
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'),
},
{
key: 'PanResponderExample',
module: require('./PanResponderExample'),
},
{
key: 'PermissionsExampleAndroid',
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
module: require('./PermissionsExampleAndroid'),
},
{
key: 'PointerEventsExample',
module: require('./PointerEventsExample'),
},
{
key: 'RTLExample',
module: require('./RTLExample'),
},
{
key: 'ShareExample',
module: require('./ShareExample'),
},
{
key: 'TimePickerAndroidExample',
module: require('./TimePickerAndroidExample'),
},
{
key: 'TimerExample',
module: require('./TimerExample'),
},
{
key: 'ToastAndroidExample',
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
* when making Flow check .android.js files. */
module: require('./ToastAndroidExample'),
},
{
key: 'TransformExample',
module: require('./TransformExample'),
},
{
key: 'VibrationExample',
module: require('./VibrationExample'),
},
{
key: 'WebSocketExample',
module: require('./WebSocketExample'),
},
{
key: 'XHRExample',
module: require('./XHRExample'),
},
];
const Modules = {};
APIExamples.concat(ComponentExamples).forEach(Example => {
Modules[Example.key] = Example.module;
});
const RNTesterList = {
APIExamples,
ComponentExamples,
Modules,
};
module.exports = RNTesterList;