Commit Graph

169 Commits

Author SHA1 Message Date
Tim Yung 8c036ce090 RN: Remove Animated -> ScrollView -> Animated Cycle
Reviewed By: sahrens

Differential Revision: D7027223

fbshipit-source-id: 59924fada0f29a5e2ce1ae9a3694a94cfb26367c
2018-02-20 20:35:08 -08:00
Sophie Alpert 26684cf3ad Update to MIT license
Summary: Manual changes.

Reviewed By: TheSavior, yungsters

Differential Revision: D7012152

fbshipit-source-id: de7459be3db13c687868b45059856f125c4f2eb1
2018-02-16 18:31:53 -08:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
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
Janic Duplessis 10b642a7af Verify that the component passed to createAnimatedComponent is not functional
Summary:
Stateless functional components don't support refs and we need that for the component to work, it used to crash with this error message: `undefined is not an object (evaluating 'this._component.getScrollableNode')`. This makes it clear what the issue is.

Fixes some of the errors in #10635, not sure if it fixes all the cases described in the issue though.

**Test plan**
Tested that passing a component with createClass or extends Component works but passing a function causes an error.

[GENERAL] [ENHANCEMENT] [Animated] - Verify that the component passed to createAnimatedComponent is not functional
Closes https://github.com/facebook/react-native/pull/15019

Differential Revision: D6988096

Pulled By: sahrens

fbshipit-source-id: ec0ffa763245e786f44b4a1d56c0738876c25782
2018-02-14 08:02:48 -08:00
Brian Vaughn 6f007e8957 Ran rename-unsafe-lifecycles codemod on xplat/js
Reviewed By: trueadm

Differential Revision: D6889214

fbshipit-source-id: e815cda4b09f3650ae3b0b9a44ae6f5fcb48fe25
2018-02-08 10:58:31 -08:00
Jiajie Zhu 52ffa5d13e make AnimatedValueXY constructor input value immutable
Reviewed By: furdei

Differential Revision: D6741521

fbshipit-source-id: e8401982fbb3c3d6cd4bcc2581358fd4a5de12f9
2018-01-18 10:46:47 -08:00
Semen Zhydenko d2c569795c Typos in comments and log messages
Summary:
No code changes, no testing required.

alligned -> aligned
allignment -> alignment
completly -> completely
conseptually -> conceptually
decendents -> descendants
indefinetly -> indefinitely
dimention -> dimension
doesnt -> doesn't
safegaurd -> safeguard
intialization -> initialization
hierachy -> hierarchy
happend -> happened
gaurd -> guard
programatically -> programmatically
initalized -> initialized
immidiately -> immediately
occured -> occurred
unkown -> unknown
neccessary -> necessary
neccesarily -> necessarily
occuring -> occurring
comoponent -> component
propogate -> propagate
recieved -> received
referece -> reference
perfomance -> performance
recieving -> receiving
subsquently -> subsequently
scoll -> scroll
suprisingly -> surprisingly
targetting -> targeting
tranform -> transform
symetrical -> symmetrical
wtih -> with
Closes https://github.com/facebook/react-native/pull/17578

Differential Revision: D6718791

Pulled By: shergin

fbshipit-source-id: 4ab79c1131ec5971d35a0c7199eba7ec0a0918ad
2018-01-12 22:18:45 -08:00
Eli White 11a495cb32 Fixing eslint-comments warnings
Reviewed By: yungsters

Differential Revision: D6678252

fbshipit-source-id: ee93b7ee52520b750ca11fcc625cccf3cd82d075
2018-01-08 17:04:29 -08:00
Eli White 79902f99b8 Finish migration from jasmine to jest
Reviewed By: cpojer

Differential Revision: D6671373

fbshipit-source-id: e9570b9a9da6063576905719f7ffc5465cda737a
2018-01-08 14:17:55 -08:00
Andrew Imm 71751e9cc7 Allow extending props supported by native animations
Reviewed By: sahrens

Differential Revision: D6523618

fbshipit-source-id: 547ed7ab1a92f01a18006241d7a74af9cac25c58
2017-12-13 13:53:07 -08:00
David Buchan-Swanson 76a2ca4c9c Fix some flow errors that appear
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

There are some errors I noticed after upgrading my flow version.  I had them in my project, and they were also reported in #11655.  These errors were ignored on master, but I went through and fixed them so the static analysis will work still.

After these changes, I receive no errors using flow `0.60.1` on latest master, or using `0.59` in my local project (which does not have the requisite ignores included).

- init a new project
     `react-native init --version <path-to-repo> helloworld`
- add the flow binary
     `yarn add -D flow-bin`
- run flow
     `yarn flow`
- make sure there are no errors in the project.
     ```
     No errors!
       Done in 23.60s.
     ```

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->

[GENERAL][BUGFIX][./Libraries] - Fix up some flow definitions
Closes https://github.com/facebook/react-native/pull/17086

Differential Revision: D6509112

Pulled By: hramos

fbshipit-source-id: a61145b5306c666ab6510ccb9eea02d96f3decb3
2017-12-07 08:31:37 -08:00
Adam Ernst 9f33fe2583 Upgrade to 1.9.1
Reviewed By: vjeux

Differential Revision: D6497877

fbshipit-source-id: 3b88b96e375ddf1fbe039a0593569bbdde40a2dc
2017-12-06 17:34:26 -08:00
garlic-rice-with-butter 6e1db1f1ee Change doc link to point to AnimatedValueXY
Summary:
Currently goes to the same page

<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

Online doc was not helpful because the link kept going to the wrong page. Someone told me to make a pull request

Documentation change
Go to original link https://facebook.github.io/react-native/docs/animated.html#animatedvaluexy
See that it does not have any info on valuexy

Go to https://facebook.github.io/react-native/releases/next/docs/animatedvaluexy.html
See that the page loads and has information about valuexy

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/16999

Differential Revision: D6467512

Pulled By: shergin

fbshipit-source-id: 69887e34446c3ea57ad831ed870be4e1a8a7a514
2017-12-01 23:32:35 -08:00
Héctor Ramos 79e24ede40 Migrate additional docs to the new format
Summary:
[DOCS]
Closes https://github.com/facebook/react-native/pull/16874

Differential Revision: D6375515

Pulled By: hramos

fbshipit-source-id: 64359b45a37c7b478919121573ca04dbb1ce6609
2017-11-20 13:16:12 -08:00
Caleb Meredith eb0d6470e5 Flow 0.59 xplat/js deploy
Reviewed By: avikchaudhuri

Differential Revision: D6300238

fbshipit-source-id: a6839fa2a9bbc50c3832a3f5b1cac2a6d2bd96b7
2017-11-10 21:15:48 -08:00
Miguel Jimenez Esun 3d7cf4f0cf Fix encoding of various files
Reviewed By: jeanlauliac

Differential Revision: D6220214

fbshipit-source-id: dc97d7ec75a0a52cac5fe2acb980b455094ea7a6
2017-11-02 08:00:56 -07:00
Miguel Jimenez Esun 834b9d4e6e Adding @email tags to most of the tests
Reviewed By: rafeca

Differential Revision: D6185623

fbshipit-source-id: 30df83288fe85516d8d5a1617a4fb8fea826ed6f
2017-11-02 06:25:03 -07:00
Brian Vaughn 870f540336 Updated createAnimatedComponent to account for async rendering
Reviewed By: sahrens

Differential Revision: D6149113

fbshipit-source-id: f28b597c1fe9280ca990fe72efc7b841665de957
2017-10-31 11:29:53 -07:00
Andreas Amsenius c4f8551fd7 Allow shadowOpacity and shadowRadius in NativeAnimated
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

I want to animate `shadowOpacity` style property with Native Animated (`useNativeDriver: true`). This is useful for example in an ios-like navigation transition where the shadow fades in with the view that is sliding in from the side. Code comment for `STYLES_WHITELIST` says:
_In general native animated implementation should support any numeric property that doesn't need to be updated through the shadow view hierarchy (all non-layout properties)._
so I just added `shadowOpacity` (and `shadowRadius` too because why not?).

Before this change, setting `shadowOpacity` (or `shadowRadius`) to an `AnimatedValue` (with `useNativeDriver: true`) would throw the error: `Style property 'shadowOpacity' is not supported by the native animated module`.

After adding `shadowOpacity` (and `shadowRadius`), there is no error. The animation looks correct so it seems to be working. I also tried setting a ridiculously large `shadowRadius` and could see that working too.

Please advice on any further testing I should do.

[IOS] [ENHANCEMENT] [NativeAnimated] - Allow `shadowRadius` and `shadowOpacity` as NativeAnimated style properties.
Closes https://github.com/facebook/react-native/pull/16603

Differential Revision: D6195364

Pulled By: hramos

fbshipit-source-id: a55630df43df3c8f9db9921dab0bfbf925b6a09f
2017-10-31 06:06:20 -07:00
Arman Dezfuli-Arjomandi a59d157df4 Update Animated docs to mention potential issues with VirtualizedList
Summary:
Doc update to clarify how to prevent `Animated.loop` and other animations from pre-empting `VirtualizedList` rendering as discussed in #16092.
Closes https://github.com/facebook/react-native/pull/16136

Differential Revision: D6057466

Pulled By: hramos

fbshipit-source-id: 946bcde97b364c623b48ddaeb643309630c072c9
2017-10-13 17:50:17 -07:00
Gustavo Gard 57b4f49db0 Remove broken links
Summary:
Issue https://github.com/facebook/react-native/issues/16255

Remove broken links
Closes https://github.com/facebook/react-native/pull/16262

Differential Revision: D6017751

Pulled By: hramos

fbshipit-source-id: a9465a8a8212dc7b5e1aae21c73b46e60e24c10e
2017-10-09 22:02:09 -07:00
Chris Geirman e3a6be5d37 explicitly show how to add the optional listener
Summary:
The previous example only showed where to add the optional "listener" but didn't show how to make use of it.

<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

(Write your motivation here.)

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Closes https://github.com/facebook/react-native/pull/15576

Differential Revision: D5911716

Pulled By: shergin

fbshipit-source-id: 60023470d23c2cbbde47ab9aa82c7ecef73be467
2017-09-26 10:26:22 -07:00
Adam Miskiewicz 26133beda9 Add closed-form damped harmonic oscillator algorithm to Animated.spring
Summary:
As I was working on mimicking iOS animations for my ongoing work with `react-navigation`, one task I had was to match the "push from right" animation that is common in UINavigationController.

I was able to grab the exact animation values for this animation with some LLDB magic, and found that the screen is animated using a `CASpringAnimation` with the parameters:

- stiffness: 1000
- damping: 500
- mass: 3

After spending a considerable amount of time attempting to replicate the spring created with these values by CASpringAnimation by specifying values for tension and friction in the current `Animated.spring` implementation, I was unable to come up with mathematically equivalent values that could replicate the spring _exactly_.

After doing some research, I ended up disassembling the QuartzCore framework, reading the assembly, and determined that Apple's implementation of `CASpringAnimation` does not use an integrated, numerical animation model as we do in Animated.spring, but instead solved for the closed form of the equations that govern damped harmonic oscillation (the differential equations themselves are [here](https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator), and a paper describing the math to arrive at the closed-form solution to the second-order ODE that describes the DHO is [here](http://planetmath.org/sites/default/files/texpdf/39745.pdf)).

Though we can get the currently implemented RK4 integration close by tweaking some values, it is, the current model is at it's core, an approximation. It seemed that if I wanted to implement the `CASpringAnimation` behavior _exactly_, I needed to implement the analytical model (as is implemented in `CASpringAnimation`) in `Animated`.

We add three new optional parameters to `Animated.spring` (to both the JS and native implementations):

- `stiffness`, a value describing the spring's stiffness coefficient
- `damping`, a value defining how the spring's motion should be damped due to the forces of friction (technically called the _viscous damping coefficient_).
- `mass`, a value describing the mass of the object attached to the end of the simulated spring

Just like if a developer were to specify `bounciness`/`speed` and `tension`/`friction` in the same config, specifying any of these new parameters while also specifying the aforementioned config values will cause an error to be thrown.

~Defaults for `Animated.spring` across all three implementations (JS/iOS/Android) stay the same, so this is intended to be *a non-breaking change*.~

~If `stiffness`, `damping`, or `mass` are provided in the config, we switch to animating the spring with the new damped harmonic oscillator model (`DHO` as described in the code).~

We replace the old RK4 integration implementation with our new analytic implementation. Tension/friction nicely correspond directly to stiffness/damping with the mass of the spring locked at 1. This is intended to be *a non-breaking change*, but there may be very slight differences in people's springs (maybe not even noticeable to the naked eye), given the fact that this implementation is more accurate.

The DHO animation algorithm will calculate the _position_ of the spring at time _t_ explicitly and in an analytical fashion, and use this calculation to update the animation's value. It will also analytically calculate the velocity at time _t_, so as to allow animated value tracking to continue to work as expected.

Also, docs have been updated to cover the new configuration options (and also I added docs for Animated configuration options that were missing, such as `restDisplacementThreshold`, etc).

Run tests. Run "Animated Gratuitous App" and "NativeAnimation" example in RNTester.
Closes https://github.com/facebook/react-native/pull/15322

Differential Revision: D5794791

Pulled By: hramos

fbshipit-source-id: 58ed9e134a097e321c85c417a142576f6a8952f8
2017-09-20 23:38:16 -07:00
Miguel Jimenez Esun bae5505902 Migrate tests away from "jsdom" environment
Reviewed By: leebyron

Differential Revision: D5748304

fbshipit-source-id: c66df45f1f35333f994c41eb8ff4cfccc1bb04d4
2017-09-11 09:49:11 -07:00
Spencer Ahrens 1afc93d18a Fix Animated spring jest test
Reviewed By: TheSavior

Differential Revision: D5786252

fbshipit-source-id: 9f97b36bd2d6faebc95f2f78889fb382a3544479
2017-09-08 16:31:50 -07:00
Caleb Meredith 63f990121a Fix React Native open source
Reviewed By: hramos, TheSavior

Differential Revision: D5728356

fbshipit-source-id: fb751d67c16ba9273de93d9b6d5acd65b1555dca
2017-08-29 15:01:05 -07:00
Alex b8d347d113 Update AnimatedImplementation.js
Summary:
Typo at line 513. "The simplest workflow for creating an animation is TO TO create an"

<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

(Write your motivation here.)

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work. Bonus points for screenshots and videos!)
Closes https://github.com/facebook/react-native/pull/15676

Differential Revision: D5719554

Pulled By: hramos

fbshipit-source-id: ccb220136dfbc4632c84ec58a13d95a03c864c2b
2017-08-29 00:45:30 -07:00
Rafael Oleza dc792690bd Add @providesModule annotation to Animated files
Reviewed By: mjesun

Differential Revision: D5687435

fbshipit-source-id: 515512167bc9f579a944b45de9e6427da39c9f0d
2017-08-23 03:55:19 -07:00
Janic Duplessis 5590b1b5ad Split up AnimatedImplementation.js
Summary:
AnimatedImplementation.js is getting pretty hard to navigate and reason about so I split it up into different modules. Also took the opportunity to run prettier on that code and do some minor const/let refactorings. This doesn't change any logic, mostly just moves code around and add proper imports / exports.

This opens the door for further cleanup and flow type improvements but want to keep this already big PR as small as possible.

Discussion points:
- Should I use haste for this? Animated is pretty much a standalone module, it still uses a few haste imports but for new modules I used commonjs imports to avoid polluting the haste global namespace too much. The new modules are all internal to Animated and should not be imported externally.
- We're using `requestAnimationFrame` from fbjs instead of the one available globally in RN and browsers is there a reason for that?
- Should we even support web in this implementation? There is a standalone repo that exist for Animated web. Is this implementation of Animated web used internally at facebook?
- Probably still related to web, we used some weird Set polyfill is that still needed?

Notes:
There is a small regression for docs where the type of some classes that are exported like AnimatedValue show up as CallExpression instead if Class.

<img width="655" alt="screen shot 2017-08-14 at 3 19 18 am" src="https://user-images.githubusercontent.com/2677334/29261820-8f243036-809f-11e7-8bf0-0fe9f93939ca.png">

**Test plan**
Tested that all Animated related examples still work in RNTester on iOS and Android.
Tested that the doc is still working
Ran unit tests
Closes https://github.com/facebook/react-native/pull/15485

Differential Revision: D5679886

Pulled By: sahrens

fbshipit-source-id: d3e9b6987ab5ff2cd20108c3b9d860c7536be8a0
2017-08-22 18:01:20 -07:00
Caleb Meredith 90eaeb019b Upgrade fbsource/xplat/js to Flow v0.53.0
Reviewed By: avikchaudhuri

Differential Revision:
D5648819
Ninja: T20988071

fbshipit-source-id: 66e5b6747c79ae66b6eb69d40ede5e982c26174f
2017-08-17 18:45:01 -07:00
Caleb Meredith 30d9c3d279 Add suppressions for Flow v0.53.0 before React changes
Reviewed By: avikchaudhuri

Differential Revision: D5648801

fbshipit-source-id: c4eb1bee198a177b69b6e9414111ce957b4d27ff
2017-08-17 05:18:33 -07:00
Brian Vaughn 046f600cc2 React 16 beta 5 sync (5495e49...c3718c4)
Reviewed By: spicyj

Differential Revision: D5564030

fbshipit-source-id: fd3e6133df7ee8e7488a3c515ce6c783c11d9401
2017-08-09 12:35:30 -07:00
James Reggio 8d757e5ad7 Export `Animated.Node` for ease of type checking
Summary:
At present, there's no uniform way of determining whether you've received an Animated value node which can be attached to an animated prop.

You can attempt to use `instanceof Animated.Value`, but this fails for interpolated values. You can use `instanceof Animated.Interpolation`, but this fails for the values that are returned from the math functions (e.g., `Animated.Add`).

This commit exposes the base type from which all of these value nodes derive. As such, it is now possible to do the following:

```js
import React, { Component, PropTypes } from 'react';
import { Animated } from 'react-native';

class Widget extends Component {
  static propTypes = {
    progress: PropTypes.instanceOf(Animated.Node).isRequired,
  }
  // ...
}
```

Unnecessary for cosmetic change.
Closes https://github.com/facebook/react-native/pull/14688

Differential Revision: D5581539

Pulled By: shergin

fbshipit-source-id: 98f40e63a463241c7f91c72391c26c3b4153e4cd
2017-08-07 22:06:53 -07:00
Ranjan Shrestha 1afee0bc0e Native Animated - Override __makeNative in AnimatedInterpolation
Summary:
Fixes the error `Trying to update interpolation node that has not been
attached to the parent` in android which occurs when using multiple
Animated.Values along with interpolation and an animation is run before
another one that uses interpolation. On ios, no error is thrown in such
case but the animation also doesn't work as expected.

You can check the snack code here which works properly without
useNativeDriver: true. But fails on android and skips the first stage
of animation on ios.
  https://snack.expo.io/HyD3zdjSZ

**Test Plan**
The animations worked properly after the __makeNative override made
the parent node native as well.

<!--
Thank you for sending the PR!

If you changed any code, please provide us with clear instructions on how you verified your changes work. In other words, a test plan is *required*. Bonus points for screenshots and videos!

Please read the Contribution Guidelines at https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md to learn more about contributing to React Native.

Happy contributing!
-->
Closes https://github.com/facebook/react-native/pull/15077

Differential Revision: D5449066

Pulled By: shergin

fbshipit-source-id: 2f0b6ea712a0ab12c1c545514a3686a9a6aeebed
2017-07-18 18:02:22 -07:00
Belal Sejouk 9c2ce53b89 Add delay support to Animated.spring
Summary:
Aadding a `delay` option to `Animated.spring` works now 👇:

![spring_delay](https://user-images.githubusercontent.com/18269100/28255417-7650233e-6a6b-11e7-87a3-ed15794b9ed8.gif)
Closes https://github.com/facebook/react-native/pull/15043

Differential Revision: D5436307

Pulled By: hramos

fbshipit-source-id: df0652d20ee5810986b322486f1ec417fe2d0a0a
2017-07-17 20:31:47 -07:00
Héctor Ramos 18c795bfcc Update AnimatedImplementation.js
Summary:
Small sample code fix, based on #12175
Closes https://github.com/facebook/react-native/pull/14948

Differential Revision: D5399724

Pulled By: hramos

fbshipit-source-id: dd4de3b06dcec090f0c636b8d4c1f315cefc8b1b
2017-07-11 12:31:15 -07:00
James Burnett 51c0e81557 remove disableAutomock from jest tests (new default) @bypass-lint
Reviewed By: cpojer

Differential Revision: D5237192

fbshipit-source-id: dccca52a91259d7fea27931f92bca94184a82d4a
2017-06-13 15:04:09 -07:00
Janic Duplessis f7044419be Native Animated - Call x.__makeNative before super.__makeNative
Summary:
This fixes a `Attempt to get native tag from node not marked as "native"` error that happens because some animated values are not converted to native before calling the base class `__makeNative`. This makes sure we call the `__makeNative` method of input nodes before calling `super.__makeNative`.

**Test plan**
Tested that it fixes the issue I encountered and that native animations still work with properly in RNTester.
Closes https://github.com/facebook/react-native/pull/14435

Differential Revision: D5236092

Pulled By: javache

fbshipit-source-id: cb02616aec05f220c65b58831ca4334b58d0383b
2017-06-13 08:45:42 -07:00
James Burnett 3360999431 disable automock by default in as many places as possible @bypass-lint
Reviewed By: cpojer

Differential Revision: D5190858

fbshipit-source-id: d3125cf81427dbbe3362ef1f958413394a6dc51d
2017-06-08 07:45:54 -07:00
Reem Helou cd49a5b289 Add missing documentation to animated spring config
Reviewed By: ericvicenti

Differential Revision: D5136367

fbshipit-source-id: 69e7afb80406196fd5c3352d5f80e23cf7463491
2017-05-30 14:36:06 -07:00
Janic Duplessis c87524e0a6 Native Animated: Prevent views driven by native animated from being optimized away
Summary:
When using native animated we don't go through the shadow thread and use the NativeViewHierachyOptimizer so we have to make sure the views won't get optimized away. Also since we are not passing certain props because they are driven by native it is possible that the view will be marked as layout only when in fact it is not.

**Test plan**
Animated a simple view that will be collapsed with native animated and reproduce the error (it's actually just an error log in logcat now and no longer a redscreen) and checked that this fixes it.

Fixes #12975
Closes https://github.com/facebook/react-native/pull/12983

Differential Revision: D4811420

Pulled By: javache

fbshipit-source-id: f217f244baca64df2b76cbe08cce2d847c0dc985
2017-05-26 04:46:51 -07:00
Emily Janzer 8ae4c3fcfd Add request/cancelAnimationFrame to jest setup
Reviewed By: cpojer

Differential Revision: D5005587

fbshipit-source-id: 653c281df9025a75ed8eecd22a2e64eaf188bf3e
2017-05-04 17:35:06 -07:00
Andres Suarez 37f3ce1f2c Fix parseFloat mistaken uses of "radix"
Summary: It doesn't take a radix. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

Reviewed By: yungsters

Differential Revision: D5000954

fbshipit-source-id: fe13896196f0369b1dce132cd4f30d086638740e
2017-05-03 23:00:39 -07:00
Sue Ann Ioanis cc4648ba86 Omit units from zero values.
Summary:
It's recommended to remove units for all zero length values because
these units aren't being used and therefore can be safely removed to
save bytes.
Closes https://github.com/facebook/react-native/pull/13518

Differential Revision: D4905286

Pulled By: javache

fbshipit-source-id: 4119eb8034b4b5b864228316c5a450978d4328e9
2017-04-18 14:00:18 -07:00
Janic Duplessis c233191485 Animated - Add missing super calls to fix native animated crash
Summary:
There was some missing super.__detach calls in some Animated nodes, we rely on the base class being called to drop the node in the native implementation, not doing so will cause some nodes to leak. It also resulted in a crash when removing certain nodes because they would get updated after being detached.

**Test plan**
Reproduced the crash by unmounting a view that uses a DiffClamp node and made sure this fixes it. Also tested that other native animations still worked properly.

Fixes #11317
Closes https://github.com/facebook/react-native/pull/12910

Differential Revision: D4718188

Pulled By: javache

fbshipit-source-id: 179ec1334532152c124a9c0f447f488311925d0a
2017-03-29 04:02:22 -07:00
Brian Vaughn 1129c6096d Replaced View.propTypes with a static getter that warned about deprecation
Reviewed By: spicyj

Differential Revision: D4766860

fbshipit-source-id: c0ef46df58b6167178e801d9dbe481101c0dc773
2017-03-28 11:32:09 -07:00
Janic Duplessis fb54a1eb3e Native Animated - Fix timing animation delay on iOS
Summary:
Delay was broken with native animations on iOS. After checking what android does to handle delay, I noticed it does nothing at all since the delay is already handled when generating the animation frames. This removes all code that tried to handle delay on iOS since it is not needed and breaks it. Also updated an example to have delay in UI explorer.

Fixes #12388

**Test plan**
Tested that delay works in UIExplorer on iOS and Android.
Closes https://github.com/facebook/react-native/pull/12443

Differential Revision: D4582514

Pulled By: javache

fbshipit-source-id: dc53295e716c8476c71ccd578380962f056de2be
2017-03-28 09:16:58 -07:00
Janic Duplessis 87b0378eb8 Native Animated - Restore, reorganize and add new tests
Summary:
Native Animated tests were removed a while back because they were failing, this restores the existing tests and reorganize / cleanup them. It also adds new ones so we have at least one test for each public API. These tests mostly assert that the native animated module is called with the proper args.
Closes https://github.com/facebook/react-native/pull/12775

Differential Revision: D4684968

Pulled By: ericvicenti

fbshipit-source-id: 4783d5edd08101cab7c0ce2eec4f3ccd0fbc1d27
2017-03-27 11:46:05 -07:00
Spencer Ahrens 9c3e6ae9f0 Fix Animated.event attach/detach on component re-render
Summary:
Need to make sure `detach` happens on the old `scrollableNode` before it's unmounted and that `attach` happens on the new `scrollableNode` after it's mounted. This should also be more performant because the detach step no longer requires iterating through all the props, most of which are not animated, and we filter out unneeded updates if props or ref haven't changed.

= Test Plan =

Hook up native onscroll events in `FlatListExample` and toggle "debug" - before, the events would stop working because they would try to attach to the old unmounted node, but with this diff it keeps working as expected.

Reviewed By: fkgozali

Differential Revision: D4687186

fbshipit-source-id: 313a7964d4614190308490a51fc4f56abb6690f8
2017-03-17 22:15:40 -07:00