Document Options.animations

docs/docs/styling.md

@@ -211,4 +211,89 @@ If you'd like to use a custom font, you'll first have to edit your project.
 
 * iOS - follow this [guide](https://medium.com/@dabit3/adding-custom-fonts-to-react-native-b266b41bff7f)
 
-All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-navigation). There's also an example project there showcasing all the different styles.
+## Customizing screen animations
+Animation used for navigation commands that modify the layout hierarchy can be controlled in options. Animations can be modified per command and it's also possible to change the default animation for each command.
+
+## Animation properties
+
+The following properties can be animated:
+* x
+* y
+* alpha
+* scaleX
+* scaleY
+* rotationX
+* rotationY
+* rotation
+
+```js
+{
+  from: 0, // Mandatory, initial value
+  to: 1, // Mandatory, end value
+  duration: 400, // Default value is 300 ms
+  startDelay: 100, // Default value is 0
+  interpolation: 'accelerate' | 'decelerate' // Optional
+}
+```
+
+For example, changing the animation used when the app is first launched:
+```js
+Navigation.setDefaultOptions({
+  animations: {
+    startApp: {
+      y: {
+        from: 1000,
+        to: 0,
+        duration: 500,
+        interpolation: 'accelerate',
+      },
+      alpha: {
+        from: 0,
+        to: 1,
+        duration: 400,
+        startDelay: 100,
+        interpolation: 'accelerate'
+      }
+    }
+  }
+});
+```
+
+## Customizing navigation commands animation
+
+Animations for the following set of commands can be customized
+* startApp
+* push
+* pop
+* showModal
+* dismissModal
+
+## Customizing stack command animation
+
+When *pushing* and *popping* screens to and from a stack, you can control the TopBar, BottomTabs and actual content animations as separately.
+
+```js
+animations: {
+  push: {
+    topBar: {
+      id: 'TEST', // Optional, id of the TopBar we'd like to animate.
+      alpha: {
+        from: 0,
+        to: 1
+      }
+    },
+    bottomTabs: {
+      alpha: {
+        from: 0,
+        to: 1
+      }
+    },
+    content: {
+      alpha: {
+        from: 0,
+        to: 1
+      }
+    }
+  }
+}
+```

lib/android/app/src/main/java/com/reactnativenavigation/parse/parsers/InterpolationParser.java

@@ -6,10 +6,10 @@ import com.reactnativenavigation.parse.params.Interpolation;
 import org.json.JSONObject;
 
 public class InterpolationParser {
-    public static Interpolation parse(JSONObject json, String intepolation) {
+    public static Interpolation parse(JSONObject json, String interpolation) {
         Interpolation result = Interpolation.DEFAULT;
-        if (json.has(intepolation)) {
-            switch (json.optString(intepolation)) {
+        if (json.has(interpolation)) {
+            switch (json.optString(interpolation)) {
                 case "decelerate":
                     result = Interpolation.DECELERATING;
                     break;

playground/src/app.js

@@ -63,20 +63,6 @@ function start() {
               interpolation: 'decelerate'
             }
           },
-          bottomTabs: {
-            y: {
-              from: 1000,
-              to: 0,
-              duration: 500,
-              interpolation: 'decelerate',
-            },
-            alpha: {
-              from: 0,
-              to: 1,
-              duration: 500,
-              interpolation: 'decelerate'
-            }
-          },
           content: {
             y: {
               from: 1000,