2015-07-23 13:43:35 +00:00
|
|
|
/**
|
2018-09-11 22:27:47 +00:00
|
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
2016-05-05 17:55:49 +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-05-05 17:55:49 +00:00
|
|
|
*
|
2018-05-11 20:32:37 +00:00
|
|
|
* @format
|
2015-07-23 13:43:35 +00:00
|
|
|
* @flow
|
|
|
|
*/
|
2018-05-11 20:32:37 +00:00
|
|
|
|
2015-07-23 13:43:35 +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,
|
2018-05-11 20:32:37 +00:00
|
|
|
supportsTVOS: boolean,
|
2016-02-23 00:15:35 +00:00
|
|
|
};
|
2015-07-23 13:43:35 +00:00
|
|
|
|
2017-05-06 03:50:47 +00:00
|
|
|
const ComponentExamples: Array<RNTesterExample> = [
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
2016-05-26 20:46:58 +00:00
|
|
|
key: 'ActivityIndicatorExample',
|
|
|
|
module: require('./ActivityIndicatorExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2017-05-25 15:37:55 +00:00
|
|
|
{
|
|
|
|
key: 'ARTExample',
|
|
|
|
module: require('./ARTExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-10-11 00:18:42 +00:00
|
|
|
{
|
|
|
|
key: 'ButtonExample',
|
|
|
|
module: require('./ButtonExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-10-11 00:18:42 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'DatePickerIOSExample',
|
|
|
|
module: require('./DatePickerIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2017-02-28 16:47:51 +00:00
|
|
|
{
|
|
|
|
key: 'FlatListExample',
|
|
|
|
module: require('./FlatListExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'ImageExample',
|
|
|
|
module: require('./ImageExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2018-02-28 01:45:15 +00:00
|
|
|
{
|
|
|
|
key: 'InputAccessoryViewExample',
|
|
|
|
module: require('./InputAccessoryViewExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-06-07 14:42:50 +00:00
|
|
|
{
|
|
|
|
key: 'KeyboardAvoidingViewExample',
|
|
|
|
module: require('./KeyboardAvoidingViewExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-06-07 14:42:50 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'LayoutEventsExample',
|
|
|
|
module: require('./LayoutEventsExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ListViewExample',
|
|
|
|
module: require('./ListViewExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ListViewGridLayoutExample',
|
|
|
|
module: require('./ListViewGridLayoutExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ListViewPagingExample',
|
|
|
|
module: require('./ListViewPagingExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
MaskedViewIOS -- A way to apply alpha masks to views on iOS
Summary:
It's very important in complex UIs to be able to apply alpha channel-based masks to arbitrary content. Common use cases include adding gradient masks at the top or bottom of scroll views, creating masked text effects, feathering images, and generally just masking views while still allowing transparency of those views.
The original motivation for creating this component stemmed from work on `react-navigation`. As I tried to mimic behavior in the native iOS header, I needed to be able to achieve the effect pictured here (this is a screenshot from a native iOS application):
![iOS native navbar animation](https://slack-imgs.com/?c=1&url=https%3A%2F%2Fd3vv6lp55qjaqc.cloudfront.net%2Fitems%2F0N3g1Q3H423P3m1c1z3E%2FScreen%2520Shot%25202017-07-06%2520at%252011.57.29%2520AM.png)
In this image, there are two masks:
- A mask on the back button chevron
- A gradient mask on the right button
In addition, the underlying view in the navigation bar is intended to be a UIBlurView. Thus, alpha masking is the only way to achieve this effect.
Behind the scenes, the `maskView` property on `UIView` is used. This is a shortcut to setting the mask on the CALayer directly.
This gives us the ability to mask any view with any other view. While building this component (and testing in the context of an Expo app), I was able to use a `GLView` (a view that renders an OpenGL context) to mask a `Video` component!
I chose to implement this only on iOS right now, as the Android implementation is a) significantly more complicated and b) will most likely not be as performant (especially when trying to mask more complex views).
Review the `<MaskedViewIOS>` section in the RNTester app, observe that views are masked appropriately.
![example](https://d3vv6lp55qjaqc.cloudfront.net/items/250X092v2k3f212f3O16/Screen%20Recording%202017-07-07%20at%2012.18%20PM.gif?X-CloudApp-Visitor-Id=abb33b3e3769bbe2f7b26d13dc5d1442&v=5f9e2d4c)
Closes https://github.com/facebook/react-native/pull/14898
Differential Revision: D5398721
Pulled By: javache
fbshipit-source-id: 343af874e2d664541aca1fefe922cf7d82aea701
2017-07-11 22:00:54 +00:00
|
|
|
{
|
|
|
|
key: 'MaskedViewExample',
|
|
|
|
module: require('./MaskedViewExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'ModalExample',
|
|
|
|
module: require('./ModalExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2017-02-28 16:47:51 +00:00
|
|
|
{
|
|
|
|
key: 'MultiColumnExample',
|
|
|
|
module: require('./MultiColumnExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-05-05 16:09:53 +00:00
|
|
|
{
|
|
|
|
key: 'PickerExample',
|
|
|
|
module: require('./PickerExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-05-05 16:09:53 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'PickerIOSExample',
|
|
|
|
module: require('./PickerIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ProgressViewIOSExample',
|
|
|
|
module: require('./ProgressViewIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'RefreshControlExample',
|
|
|
|
module: require('./RefreshControlExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2018-09-07 18:12:28 +00:00
|
|
|
{
|
|
|
|
key: 'ScrollViewSimpleExample',
|
|
|
|
module: require('./ScrollViewSimpleExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2017-09-25 05:57:33 +00:00
|
|
|
{
|
|
|
|
key: 'SafeAreaViewExample',
|
|
|
|
module: require('./SafeAreaViewExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'ScrollViewExample',
|
|
|
|
module: require('./ScrollViewExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2017-02-28 16:47:51 +00:00
|
|
|
{
|
|
|
|
key: 'SectionListExample',
|
|
|
|
module: require('./SectionListExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'SegmentedControlIOSExample',
|
|
|
|
module: require('./SegmentedControlIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
2016-04-06 11:49:47 +00:00
|
|
|
key: 'SliderExample',
|
|
|
|
module: require('./SliderExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'StatusBarExample',
|
|
|
|
module: require('./StatusBarExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2017-09-29 05:14:45 +00:00
|
|
|
{
|
|
|
|
key: 'SwipeableFlatListExample',
|
|
|
|
module: require('./SwipeableFlatListExample'),
|
|
|
|
supportsTVOS: false,
|
|
|
|
},
|
2016-07-28 00:51:58 +00:00
|
|
|
{
|
|
|
|
key: 'SwipeableListViewExample',
|
2016-12-19 14:26:07 +00:00
|
|
|
module: require('./SwipeableListViewExample'),
|
|
|
|
supportsTVOS: false,
|
2016-07-28 00:51:58 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'SwitchExample',
|
|
|
|
module: require('./SwitchExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TabBarIOSExample',
|
|
|
|
module: require('./TabBarIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2017-08-25 07:03:17 +00:00
|
|
|
{
|
|
|
|
key: 'TabBarIOSBarStyleExample',
|
|
|
|
module: require('./TabBarIOSBarStyleExample'),
|
|
|
|
supportsTVOS: false,
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'TextExample',
|
|
|
|
module: require('./TextExample.ios'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TextInputExample',
|
|
|
|
module: require('./TextInputExample.ios'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TouchableExample',
|
|
|
|
module: require('./TouchableExample'),
|
onPress animation with magnification
Summary:
Related to: #15454
Motivation: Improve tvOS feeling for TouchableHighlight
![changewithaniamtion](https://user-images.githubusercontent.com/7658664/29193477-b99b4a10-7e25-11e7-8b31-e0e4ca9d7720.gif)
- When you select the button he is focus and the underlay is show
- When you press the button, there is an animation, but after the animation, the focus is on the button and the underlay is show
Play with tvParallaxProperties on tvOS, test with and without patch just to see the actual behaviour
```
<TouchableHighlight
tvParallaxProperties={{
enabled: true,
shiftDistanceX: 0,
shiftDistanceY: 0,
tiltAngle: 0,
magnification: 1.1,
pressMagnification: 1.0,
pressDuration: 0.3,
}}
underlayColor="black"
onShowUnderlay={() => (console.log("onShowUnderlay")}
onHideUnderlay={() => (console.log("onHideUnderlay")}
onPress={() => (console.log("onPress")}
>
<Image
style={styles.image}
source={ uri: 'https://www.facebook.com/images/fb_icon_325x325.png' }
/>
</TouchableHighlight>
```
Closes https://github.com/facebook/react-native/pull/15455
Differential Revision: D6887437
Pulled By: hramos
fbshipit-source-id: e18b695068bc99643ba4006fb3f39215b38a74c1
2018-02-27 20:52:21 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TransparentHitTestExample',
|
|
|
|
module: require('./TransparentHitTestExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ViewExample',
|
|
|
|
module: require('./ViewExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'WebViewExample',
|
|
|
|
module: require('./WebViewExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2015-07-23 13:43:35 +00:00
|
|
|
];
|
|
|
|
|
2017-05-06 03:50:47 +00:00
|
|
|
const APIExamples: Array<RNTesterExample> = [
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'AccessibilityIOSExample',
|
|
|
|
module: require('./AccessibilityIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2015-07-23 13:43:35 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'ActionSheetIOSExample',
|
|
|
|
module: require('./ActionSheetIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2016-05-05 16:09:53 +00:00
|
|
|
{
|
|
|
|
key: 'AlertExample',
|
|
|
|
module: require('./AlertExample').AlertExample,
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-05-05 16:09:53 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'AlertIOSExample',
|
|
|
|
module: require('./AlertIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AnimatedExample',
|
|
|
|
module: require('./AnimatedExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AnExApp',
|
|
|
|
module: require('./AnimatedGratuitousApp/AnExApp'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AppStateExample',
|
|
|
|
module: require('./AppStateExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'AsyncStorageExample',
|
|
|
|
module: require('./AsyncStorageExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'BorderExample',
|
|
|
|
module: require('./BorderExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'BoxShadowExample',
|
|
|
|
module: require('./BoxShadowExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'CameraRollExample',
|
|
|
|
module: require('./CameraRollExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ClipboardExample',
|
|
|
|
module: require('./ClipboardExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2017-10-21 01:55:17 +00:00
|
|
|
{
|
|
|
|
key: 'Dimensions',
|
|
|
|
module: require('./DimensionsExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'GeolocationExample',
|
|
|
|
module: require('./GeolocationExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'ImageEditingExample',
|
|
|
|
module: require('./ImageEditingExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2016-04-25 07:08:42 +00:00
|
|
|
{
|
|
|
|
key: 'LayoutAnimationExample',
|
|
|
|
module: require('./LayoutAnimationExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-04-25 07:08:42 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'LayoutExample',
|
|
|
|
module: require('./LayoutExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2016-02-29 11:28:48 +00:00
|
|
|
{
|
|
|
|
key: 'LinkingExample',
|
|
|
|
module: require('./LinkingExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-29 11:28:48 +00:00
|
|
|
},
|
2016-08-07 07:44:09 +00:00
|
|
|
{
|
|
|
|
key: 'NativeAnimationsExample',
|
|
|
|
module: require('./NativeAnimationsExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-08-07 07:44:09 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'NetInfoExample',
|
|
|
|
module: require('./NetInfoExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
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-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
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
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'PanResponderExample',
|
|
|
|
module: require('./PanResponderExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'PointerEventsExample',
|
|
|
|
module: require('./PointerEventsExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'PushNotificationIOSExample',
|
|
|
|
module: require('./PushNotificationIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'RCTRootViewIOSExample',
|
|
|
|
module: require('./RCTRootViewIOSExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2016-08-19 03:49:25 +00:00
|
|
|
{
|
|
|
|
key: 'RTLExample',
|
|
|
|
module: require('./RTLExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-08-19 03:49:25 +00:00
|
|
|
},
|
2016-07-25 10:34:06 +00:00
|
|
|
{
|
|
|
|
key: 'ShareExample',
|
|
|
|
module: require('./ShareExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-07-25 10:34:06 +00:00
|
|
|
},
|
2016-02-23 10:26:11 +00:00
|
|
|
{
|
|
|
|
key: 'SnapshotExample',
|
|
|
|
module: require('./SnapshotExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 10:26:11 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'TimerExample',
|
|
|
|
module: require('./TimerExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
key: 'TransformExample',
|
|
|
|
module: require('./TransformExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2017-07-31 10:53:09 +00:00
|
|
|
{
|
|
|
|
key: 'TVEventHandlerExample',
|
|
|
|
module: require('./TVEventHandlerExample'),
|
|
|
|
supportsTVOS: true,
|
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
2016-03-03 12:08:10 +00:00
|
|
|
key: 'VibrationExample',
|
|
|
|
module: require('./VibrationExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: false,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
2016-04-18 22:42:42 +00:00
|
|
|
{
|
|
|
|
key: 'WebSocketExample',
|
|
|
|
module: require('./WebSocketExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-04-18 22:42:42 +00:00
|
|
|
},
|
2016-02-23 00:15:35 +00:00
|
|
|
{
|
|
|
|
key: 'XHRExample',
|
2017-01-15 02:55:42 +00:00
|
|
|
module: require('./XHRExample'),
|
2016-12-19 14:26:07 +00:00
|
|
|
supportsTVOS: true,
|
2016-02-23 00:15:35 +00:00
|
|
|
},
|
|
|
|
];
|
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
|
|
|
});
|
|
|
|
|
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;
|