react-native/Examples/UIExplorer/js/UIExplorerList.ios.js
Janic Duplessis df05311777 Add transform support for native animated on Android
Summary:
This adds support for the `transform` animated node. This brings feature parity with the iOS implementation and allows running the NativeAnimated UIExplorer example that was created with the iOS implementation on Android. This is based on some work by kmagiera in the exponent RN fork.

This also adds support for mixing static values with animated ones in the same transform as well which is not supported on iOS at the moment. It is also implemented in a way that rebuilds the transform matrix the same way as we build it in JS so it will be easy to remove some of the current limitations like forcing the transforms order and only supporting one of each type.

**Test plan (required)**

Tested with the NativeAnimated example on Android and iOS. Also tested mixing in static values in a transform (`[{ rotate: '45deg' }, { translateX: animatedValue }]`).
Closes https://github.com/facebook/react-native/pull/8839

Differential Revision: D3682143

fbshipit-source-id: 5e6fd4b0b8be6a76053f24a36d1785771690a6f8
2016-08-07 00:58:36 -07:00

297 lines
6.5 KiB
JavaScript

/**
* 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.
*
* 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';
export type UIExplorerExample = {
key: string;
module: Object;
};
const ComponentExamples: Array<UIExplorerExample> = [
{
key: 'ActivityIndicatorExample',
module: require('./ActivityIndicatorExample'),
},
{
key: 'DatePickerIOSExample',
module: require('./DatePickerIOSExample'),
},
{
key: 'ImageExample',
module: require('./ImageExample'),
},
{
key: 'KeyboardAvoidingViewExample',
module: require('./KeyboardAvoidingViewExample'),
},
{
key: 'LayoutEventsExample',
module: require('./LayoutEventsExample'),
},
{
key: 'ListViewExample',
module: require('./ListViewExample'),
},
{
key: 'ListViewGridLayoutExample',
module: require('./ListViewGridLayoutExample'),
},
{
key: 'ListViewPagingExample',
module: require('./ListViewPagingExample'),
},
{
key: 'MapViewExample',
module: require('./MapViewExample'),
},
{
key: 'ModalExample',
module: require('./ModalExample'),
},
{
key: 'NavigatorExample',
module: require('./Navigator/NavigatorExample'),
},
{
key: 'NavigatorIOSColorsExample',
module: require('./NavigatorIOSColorsExample'),
},
{
key: 'NavigatorIOSExample',
module: require('./NavigatorIOSExample'),
},
{
key: 'PickerExample',
module: require('./PickerExample'),
},
{
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'),
},
{
key: 'SliderExample',
module: require('./SliderExample'),
},
{
key: 'StatusBarExample',
module: require('./StatusBarExample'),
},
{
key: 'SwipeableListViewExample',
module: require('./SwipeableListViewExample')
},
{
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'),
},
];
const APIExamples: Array<UIExplorerExample> = [
{
key: 'AccessibilityIOSExample',
module: require('./AccessibilityIOSExample'),
},
{
key: 'ActionSheetIOSExample',
module: require('./ActionSheetIOSExample'),
},
{
key: 'AdSupportIOSExample',
module: require('./AdSupportIOSExample'),
},
{
key: 'AlertExample',
module: require('./AlertExample').AlertExample,
},
{
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'),
},
{
key: 'LayoutAnimationExample',
module: require('./LayoutAnimationExample'),
},
{
key: 'LayoutExample',
module: require('./LayoutExample'),
},
{
key: 'LinkingExample',
module: require('./LinkingExample'),
},
{
key: 'NativeAnimationsExample',
module: require('./NativeAnimationsExample'),
},
{
key: 'NavigationExperimentalExample',
module: require('./NavigationExperimental/NavigationExperimentalExample'),
},
{
key: 'NetInfoExample',
module: require('./NetInfoExample'),
},
{
key: 'PanResponderExample',
module: require('./PanResponderExample'),
},
{
key: 'PointerEventsExample',
module: require('./PointerEventsExample'),
},
{
key: 'PushNotificationIOSExample',
module: require('./PushNotificationIOSExample'),
},
{
key: 'RCTRootViewIOSExample',
module: require('./RCTRootViewIOSExample'),
},
{
key: 'ShareExample',
module: require('./ShareExample'),
},
{
key: 'SnapshotExample',
module: require('./SnapshotExample'),
},
{
key: 'TimerExample',
module: require('./TimerExample'),
},
{
key: 'TransformExample',
module: require('./TransformExample'),
},
{
key: 'VibrationExample',
module: require('./VibrationExample'),
},
{
key: 'WebSocketExample',
module: require('./WebSocketExample'),
},
{
key: 'XHRExample',
module: require('./XHRExample.ios'),
},
];
const Modules = {};
APIExamples.concat(ComponentExamples).forEach(Example => {
Modules[Example.key] = Example.module;
});
const UIExplorerList = {
APIExamples,
ComponentExamples,
Modules,
};
module.exports = UIExplorerList;