status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
react-native/RNTester/js
History
Krzysztof Magiera b48f7e5605 Support for animated tracking in native driver 
Summary:
This PR adds support for Animated tracking to Animated Native Driver implementation on Android and iOS.

Animated tracking allows for animation to be started with a "dynamic" end value. Instead of passing a fixed number as end value we can pass a reference to another Animated.Value. Then when that value changes, the animation will be reconfigured to drive the animation to the new destination point. What is important is that animation will keep its state in the process of updating "toValue". That is if it is a spring animation and the end value changes while the previous animation still hasn't settled the new animation will start from the current position and will inherit current velocity. This makes end value transitions very smooth.

Animated tracking is available in JS implementation of Animated library but not in the native implementation. Therefore until now, it wasn't possible to utilize native driver when using animated tracking. Offloading animation from JS thread turns out to be crucial for gesture driven animations. This PR is a step forward towards feature parity between JS and native implementations of Animated.

Here is a link to example video that shows how tracking can be used to implement chat heads effect: https://twitter.com/kzzzf/status/958362032650244101

In addition this PR fixes an issue with frames animation driver on Android that because of rounding issues was taking one extra frame to start. Because of that change I had to update a number of Android unit tests that were relying on that behavior and running that one additional animation step prior to performing checks.

As a part of this PR I'm adding three unit tests for each of the platforms that verifies most important aspects of this implementation. Please refer to the code and look at the test cases top level comments to learn what they do.

I'm also adding a section to "Native Animated Example" screen in RNTester app that provides a test case for tracking. In the example we have blue square that fallows the red line drawn on screen. Line uses Animated.Value for it's position while square is connected via tracking spring animation to that value. So it is ought to follow the line. When user taps in the area surrounding the button new position for the red line is selected at random and the value updates. Then we can watch blue screen animate to that position.

You can also refer to this video that I use to demonstrate how tracking can be linked with native gesture events using react-native-gesture-handler lib: https://twitter.com/kzzzf/status/958362032650244101

[GENERAL][FEATURE][Native Animated] - Added support for animated tracking to native driver. Now you can use `useNativeDriver` flag with animations that track other Animated.Values
Closes https://github.com/facebook/react-native/pull/17896

Differential Revision: D6974170

Pulled By: hramos

fbshipit-source-id: 50e918b36ee10f80c1deb866c955661d4cc2619b
 		2018-02-16 12:10:01 -08:00
..
AnimatedGratuitousApp Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
Thumbnails Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ARTExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AccessibilityAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
AccessibilityIOSExample.js Add accessibilityElementsHidden prop 2018-01-29 14:44:11 -08:00
ActionSheetIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ActivityIndicatorExample.js @allow-large-files [Flow] Upgrade xplat/js to flow v0.63 2018-01-08 12:49:53 -08:00
AlertExample.js Alert - allow for hiding alert title on iOS 2017-08-30 17:16:17 -07:00
AlertIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AnimatedExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AppStateExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AssetScaledImageExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
AsyncStorageExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
BorderExample.js Implement border(Left|Right|Top|Bottom)Color for rounded borders 2017-10-18 19:33:30 -07:00
BoxShadowExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ButtonExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
CameraRollExample.js Codemod to 1.7.0 2017-09-26 23:45:48 -07:00
CameraRollView.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
CheckBoxExample.js Upgrade to 1.9.1 2017-12-06 17:34:26 -08:00
ClipboardExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
DatePickerAndroidExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
DatePickerIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
DimensionsExample.js Implement a JSTester example for the Dimensions API 2017-10-20 19:00:54 -07:00
ExampleTypes.js Fix React Native open source 2017-08-29 15:01:05 -07:00
FlatListExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
GeolocationExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ImageCapInsetsExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ImageEditingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ImageExample.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
KeyboardAvoidingViewExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
LayoutAnimationExample.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
LayoutEventsExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
LayoutExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
LinkingExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ListExampleShared.js Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) 2017-11-09 13:54:54 -08:00
ListViewExample.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
ListViewGridLayoutExample.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
ListViewPagingExample.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
MaskedViewExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ModalExample.js Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) 2017-11-09 13:54:54 -08:00
MultiColumnExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
NativeAnimationsExample.js Support for animated tracking in native driver 2018-02-16 12:10:01 -08:00
NavigatorIOSBarStyleExample.js fix missing @providesModule 2017-08-25 11:00:00 -07:00
NavigatorIOSColorsExample.js Expose barStyle for NavigatorIOS and TabBarIOS 2017-08-25 00:14:46 -07:00
NavigatorIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
NetInfoExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
OrientationChangeExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
PanResponderExample.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
PermissionsExampleAndroid.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
PickerExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
PickerIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
PointerEventsExample.js Fix React Native open source 2017-08-29 15:01:05 -07:00
ProgressBarAndroidExample.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ProgressViewIOSExample.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
PushNotificationIOSExample.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
RCTRootViewIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterActions.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterApp.android.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
RNTesterApp.ios.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
RNTesterBlock.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterButton.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterExampleContainer.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterExampleList.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterList.android.js Implement a JSTester example for the Dimensions API 2017-10-20 19:00:54 -07:00
RNTesterList.ios.js Implement a JSTester example for the Dimensions API 2017-10-20 19:00:54 -07:00
RNTesterNavigationReducer.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RNTesterPage.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RNTesterSettingSwitchRow.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
RNTesterStatePersister.js Fix React Native open source 2017-08-29 15:01:05 -07:00
RNTesterTitle.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
RTLExample.js Add examples to RTLExample 2017-10-18 19:33:33 -07:00
RefreshControlExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
RootViewSizeFlexibilityExampleApp.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SafeAreaViewExample.js DeviceInfo.isIPhoneX_deprecated: ugly and temporary way to fix your UI on iPhone X 2017-10-02 23:00:03 -07:00
ScrollViewExample.js Typos in code 2018-01-29 19:17:33 -08:00
ScrollViewSimpleExample.js Adding support to float values for Android snapToInterval 2018-01-09 12:32:53 -08:00
SectionListExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SegmentedControlIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SetPropertiesExampleApp.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ShareExample.js "subject" field for Share 2017-10-23 11:32:44 -07:00
SliderExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SnapshotExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
StatusBarExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
SwipeableFlatListExample.js Run eslint --fix 2017-10-09 17:46:44 -07:00
SwipeableListViewExample.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
SwitchExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TVEventHandlerExample.js Run eslint --fix 2017-10-09 17:46:44 -07:00
TabBarIOSBarStyleExample.js fix missing @providesModule 2017-08-25 11:00:00 -07:00
TabBarIOSExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TextExample.android.js Text to Spannable conversion is now using PRIORITY flag to enforce the order of spans 2017-09-17 22:00:16 -07:00
TextExample.ios.js Demo illustrated `base-line` metric exposure 2018-02-15 17:46:41 -08:00
TextInputExample.android.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
TextInputExample.ios.js Ran rename-unsafe-lifecycles codemod on xplat/js 2018-02-08 10:58:31 -08:00
TimePickerAndroidExample.js Add TimePicker modes 2017-10-08 12:38:45 -07:00
TimerExample.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
ToastAndroidExample.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ToolbarAndroidExample.android.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TouchableExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TransformExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
TransparentHitTestExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
URIActionMap.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
VibrationExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
VibrationIOSExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
ViewExample.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
ViewPagerAndroidExample.android.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
WebSocketExample.js Codemod to 1.7.0 2017-09-26 23:45:48 -07:00
WebViewExample.js Fixing eslint-comments warnings 2018-01-08 17:04:29 -08:00
XHRExample.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleBinaryUpload.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleCookies.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleDownload.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleFetch.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleFormData.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
XHRExampleHeaders.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
XHRExampleOnTimeOut.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
bunny.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
createExamplePage.js Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
flux@3x.png fixed image in RNTester snapshot example 2017-08-31 15:16:05 -07:00
hawk.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
helloworld.html Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
http_test_server.js RNTester http_server send cookie fix 2018-02-13 10:46:53 -08:00
imageMask.png MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
messagingtest.html Typos in comments and log messages 2018-01-12 22:18:45 -08:00
relay@3x.png fixed image in RNTester snapshot example 2017-08-31 15:16:05 -07:00
slider-left.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-left@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-right.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider-right@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
slider@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_comment_highlighted@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_comment_normal@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_big.png Revert D5189017: [RN] Native implementation of <Image> intrinsic content size on iOS 2017-10-25 08:20:48 -07:00
uie_thumb_normal@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
uie_thumb_selected@2x.png Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00
websocket_test_server.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00