Browse Source

Document Options.animations

Guy Carmeli 6 years ago
parent
commit
d794bd7fef

+ 86
- 1
docs/docs/styling.md View File

@@ -211,4 +211,89 @@ If you'd like to use a custom font, you'll first have to edit your project.
211 211
 
212 212
 * iOS - follow this [guide](https://medium.com/@dabit3/adding-custom-fonts-to-react-native-b266b41bff7f)
213 213
 
214
-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.
214
+## Customizing screen animations
215
+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.
216
+
217
+## Animation properties
218
+
219
+The following properties can be animated:
220
+* x
221
+* y
222
+* alpha
223
+* scaleX
224
+* scaleY
225
+* rotationX
226
+* rotationY
227
+* rotation
228
+
229
+```js
230
+{
231
+  from: 0, // Mandatory, initial value
232
+  to: 1, // Mandatory, end value
233
+  duration: 400, // Default value is 300 ms
234
+  startDelay: 100, // Default value is 0
235
+  interpolation: 'accelerate' | 'decelerate' // Optional
236
+}
237
+```
238
+
239
+For example, changing the animation used when the app is first launched:
240
+```js
241
+Navigation.setDefaultOptions({
242
+  animations: {
243
+    startApp: {
244
+      y: {
245
+        from: 1000,
246
+        to: 0,
247
+        duration: 500,
248
+        interpolation: 'accelerate',
249
+      },
250
+      alpha: {
251
+        from: 0,
252
+        to: 1,
253
+        duration: 400,
254
+        startDelay: 100,
255
+        interpolation: 'accelerate'
256
+      }
257
+    }
258
+  }
259
+});
260
+```
261
+
262
+## Customizing navigation commands animation
263
+
264
+Animations for the following set of commands can be customized
265
+* startApp
266
+* push
267
+* pop
268
+* showModal
269
+* dismissModal
270
+
271
+## Customizing stack command animation
272
+
273
+When *pushing* and *popping* screens to and from a stack, you can control the TopBar, BottomTabs and actual content animations as separately.
274
+
275
+```js
276
+animations: {
277
+  push: {
278
+    topBar: {
279
+      id: 'TEST', // Optional, id of the TopBar we'd like to animate.
280
+      alpha: {
281
+        from: 0,
282
+        to: 1
283
+      }
284
+    },
285
+    bottomTabs: {
286
+      alpha: {
287
+        from: 0,
288
+        to: 1
289
+      }
290
+    },
291
+    content: {
292
+      alpha: {
293
+        from: 0,
294
+        to: 1
295
+      }
296
+    }
297
+  }
298
+}
299
+```

+ 3
- 3
lib/android/app/src/main/java/com/reactnativenavigation/parse/parsers/InterpolationParser.java View File

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

+ 0
- 14
playground/src/app.js View File

@@ -63,20 +63,6 @@ function start() {
63 63
               interpolation: 'decelerate'
64 64
             }
65 65
           },
66
-          bottomTabs: {
67
-            y: {
68
-              from: 1000,
69
-              to: 0,
70
-              duration: 500,
71
-              interpolation: 'decelerate',
72
-            },
73
-            alpha: {
74
-              from: 0,
75
-              to: 1,
76
-              duration: 500,
77
-              interpolation: 'decelerate'
78
-            }
79
-          },
80 66
           content: {
81 67
             y: {
82 68
               from: 1000,