A framework for building native apps with React. http://facebook.github.io/react-native/
Go to file
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
.github add node/npm version to ISSUE_TEMPLATE.md 2017-09-19 15:05:35 -07:00
ContainerShip
IntegrationTests @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
Libraries Add closed-form damped harmonic oscillator algorithm to Animated.spring 2017-09-20 23:38:16 -07:00
RNTester Add closed-form damped harmonic oscillator algorithm to Animated.spring 2017-09-20 23:38:16 -07:00
React Fix Content-Type header checking of React/RCTJavascriptLoader.mm #15791 2017-09-19 19:50:07 -07:00
ReactAndroid Add closed-form damped harmonic oscillator algorithm to Animated.spring 2017-09-20 23:38:16 -07:00
ReactCommon Fix shrinking in non strech alignments 2017-09-20 13:31:11 -07:00
babel-preset Upgrade babel-plugin-react-transform to v3.x 2017-09-14 07:36:43 -07:00
blog Add missing links to blog article 2017-09-01 11:01:02 -07:00
bots Add radko93 to GitHub Issue task force 2017-08-31 10:45:46 -07:00
danger Flag large pull requests, add large-pr command 2017-08-16 21:00:44 -07:00
docs Add props for overriding native component 2017-09-19 16:01:02 -07:00
flow Upgrade fbsource/xplat/js to Flow v0.53.0 2017-08-17 18:45:01 -07:00
gradle/wrapper
jest Fix test for RN asset 2017-09-07 01:55:56 -07:00
keystores
lib
local-cli use `uniqBy` for iteratee support 2017-09-18 02:45:32 -07:00
react-native-cli
react-native-git-upgrade
scripts Fixed issue with path containing spaces 2017-08-22 23:30:06 -07:00
third-party-podspecs
website Adding Soundcloud Pulse play store link to showcase 2017-09-08 09:49:12 -07:00
.buckconfig
.buckjavaargs
.editorconfig
.eslintignore
.eslintrc Bump react/jsx-no-undef (undefined require) from warning to error 2017-09-15 12:01:04 -07:00
.flowconfig @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
.gitattributes
.gitignore
.npmignore
.travis.yml Use Node 8 instead of 7 in Travis CI 2017-09-12 10:15:58 -07:00
CONTRIBUTING.md
DockerTests.md
Jenkinsfile
LICENSE
LICENSE-docs
PATENTS
README.md README: Remove broken link to section 2017-09-05 10:53:17 -07:00
React.podspec BREAKING: iOS: Fix case sensitivity build warning in Xcode 8.3 2017-08-25 04:45:06 -07:00
Releases.md
breaking-changes.md
build.gradle
circle.yml Comment out Flow tests 2017-09-07 23:15:52 -07:00
cli.js
gradlew
gradlew.bat
jest-preset.json Asset basenames in Jest snapshots 2017-09-06 03:33:43 -07:00
package.json Synchronize all relay packages 2017-09-19 22:50:29 -07:00
react.gradle
rn-cli.config.js
rn-get-polyfills.js
runXcodeTests.sh
settings.gradle
setupBabel.js Make prospective syntax compatible 2017-08-16 16:42:16 -07:00

README.md

React Native · Travis CI Status Circle CI Status npm version PRs Welcome

Learn once, write anywhere: Build mobile apps with React.

  • Build native mobile apps using JavaScript and React: React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
  • A React Native app is a real mobile app: With React Native, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C, Java, or Swift. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
  • Don't waste time recompiling: React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
  • Use native code when you need to: React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.

The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

See the official React Native website for an introduction to React Native.

Supported operating systems are >= Android 4.1 (API 16) and >= iOS 8.0.

Getting Started

Follow the Getting Started guide. The recommended way to install React Native depends on your project. Here you can find short guides for the most common scenarios:

Documentation

The websites documentation is divided into multiple sections.

Another great way to learn more about the components and APIs included with React Native is to read their source. Look under the Libraries/Components directory for components like ScrollView and TextInput, for example. The RNTester example is also here to demonstrate some of the ways to use these components. From the source you can get an accurate understanding of each components behavior and API.

The React Native documentation only discusses the components, APIs and topics specific to React Native (React on iOS and Android). For further documentation on the React API that is shared between React Native and React DOM, refer to the React documentation.

Upgrading

React Native is under active development. See the guide on upgrading React Native to keep your project up-to-date.

Contributing

Read below to learn how you can take part in improving React Native.

Code of Conduct

Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes to React Native.

Beginner Friendly Bugs

We have a list of beginner friendly issues to help you get your feet wet in the React Native codebase and familiar with our contribution process. This is a great place to get started.

License

React is BSD licensed. We also provide an additional patent grant.

React documentation is Creative Commons licensed.