|
@@ -1,15 +1,6 @@
|
1
|
1
|
# Android Specific Use Cases
|
2
|
2
|
|
3
|
|
-TOC
|
4
|
|
-* [Activity Lifecycle and onActivityResult](https://github.com/wix/react-native-navigation/wiki/Android#activity-lifecycle-and-onactivityresult)
|
5
|
|
-* [Adjusting soft input mode](https://github.com/wix/react-native-navigation/wiki/Android/#adjusting-soft-input-mode)
|
6
|
|
-* [Splash screen](https://github.com/wix/react-native-navigation/wiki/Android/#splash-screen)
|
7
|
|
-* [Collapsing React header](https://github.com/wix/react-native-navigation/wiki/Android/#collapsing-react-header---android-only)
|
8
|
|
- * [Collapsing react view](https://github.com/wix/react-native-navigation/wiki/Android/#collapsing-react-view)
|
9
|
|
- * [Collapsing react view with top tabs](https://github.com/wix/react-native-navigation/wiki/Android/_edit#collapsing-react-view-with-top-tabs)
|
10
|
|
-* [Reloading from terminal](https://github.com/wix/react-native-navigation/wiki/Android/#reloading-from-terminal)
|
11
|
|
-
|
12
|
|
-# Activity Lifecycle and onActivityResult
|
|
3
|
+## Activity Lifecycle and onActivityResult
|
13
|
4
|
In order to listen to activity lifecycle callbacks, set `ActivityCallback` in `MainApplication.onCreate` as follows:
|
14
|
5
|
|
15
|
6
|
```java
|
|
@@ -73,16 +64,16 @@ public class MyApplication extends NavigationApplication {
|
73
|
64
|
}
|
74
|
65
|
```
|
75
|
66
|
|
76
|
|
-## Why overriding these methods in `MainActivity` won't work
|
|
67
|
+### Why overriding these methods in `MainActivity` won't work
|
77
|
68
|
`MainActivity` extends `SplashActiviy` which is used to start the react context. Once react is up and running `MainActivity` is **stopped** and another activity takes over to run our app: `NavigationActivity`. Due to this design, there's usually no point in overriding lifecycle callbacks in `MainActivity`.
|
78
|
69
|
|
79
|
|
-# Splash screen
|
|
70
|
+## Splash screen
|
80
|
71
|
Override `getSplashLayout` or `createSplashLayout` in `MainActivity` to provide a splash layout which will be displayed while Js context initialises.
|
81
|
72
|
|
82
|
|
-# Collapsing React header
|
|
73
|
+## Collapsing React header
|
83
|
74
|
A screen can have a header, either an image or a react component, that collapses as the screen is scrolled.
|
84
|
75
|
|
85
|
|
-## Collapsing react view
|
|
76
|
+### Collapsing react view
|
86
|
77
|
|
87
|
78
|
```js
|
88
|
79
|
export default class CollapsingReactViewScreen extends Component {
|
|
@@ -98,7 +89,7 @@ static navigatorStyle = {
|
98
|
89
|
}
|
99
|
90
|
```
|
100
|
91
|
|
101
|
|
-## Collapsing react view with top tabs
|
|
92
|
+### Collapsing react view with top tabs
|
102
|
93
|
|
103
|
94
|
**Note:** `example.header` represents a component that's registered as a screen:
|
104
|
95
|
```js
|
|
@@ -138,19 +129,19 @@ Navigation.startSingleScreenApp({
|
138
|
129
|
]
|
139
|
130
|
});
|
140
|
131
|
```
|
141
|
|
-# Shared Element Transition
|
|
132
|
+## Shared Element Transition
|
142
|
133
|
Screen transitions provide visual connections between different states through motion and transformations between common elements. You can specify custom animations for transitions of shared elements between screens.
|
143
|
134
|
|
144
|
135
|
The `<SharedElementTransition>` component determines how views that are shared between two screens transition between these screens. For example, if two screens have the same image in different positions and sizes, the `<SharedElementTransition>` will translate and scale the image smoothly between these screens.
|
145
|
136
|
|
146
|
|
-## Supported transitions
|
|
137
|
+### Supported transitions
|
147
|
138
|
* Scale
|
148
|
139
|
* Text color
|
149
|
140
|
* Linear translation
|
150
|
141
|
* Curved motion translation
|
151
|
142
|
* Image bounds and scale transformation - Unlike the basic scale transformation, this transformation will change the actual image scale and bounds, instead of simply scaling it up or down.
|
152
|
143
|
|
153
|
|
-## Specifying shared elements
|
|
144
|
+### Specifying shared elements
|
154
|
145
|
First, wrap the view you would like to transition in a `<SharedElementTransition/>` and give it a unique id. This is how our `<Text/>` element is defined in the first screen:
|
155
|
146
|
|
156
|
147
|
```js
|
|
@@ -191,13 +182,13 @@ this.props.navigator.push({
|
191
|
182
|
}
|
192
|
183
|
});
|
193
|
184
|
```
|
194
|
|
-## Animating image bounds and scale
|
|
185
|
+### Animating image bounds and scale
|
195
|
186
|
By default, when animating images, a basic scale transition is used. This is good enough for basic use cases where both images have the same aspect ratio. If the images have different size and scale, you can animate their bounds and scale by setting `animateClipBounds={true}` on the final `<SharedElementTransition/>` element.
|
196
|
187
|
|
197
|
|
-## Curved motion
|
|
188
|
+### Curved motion
|
198
|
189
|
The `path` interpolator transitions elements along a curved path based on Bézier curves. This interpolator specifies a motion curve in a 1x1 square, with anchor points at (0,0) and (1,1) and control points specified using the `showInterpolation` and `hideInterpolation` props.
|
199
|
190
|
|
200
|
|
-### Using curved motion
|
|
191
|
+#### Using curved motion
|
201
|
192
|
First, wrap the view you would like to transition in a `<SharedElementTransition/>` and give it a unique id. In this example we are going to transition an `<Image/>'.
|
202
|
193
|
|
203
|
194
|
```js
|
|
@@ -254,7 +245,7 @@ this.props.navigator.push({
|
254
|
245
|
});
|
255
|
246
|
```
|
256
|
247
|
|
257
|
|
-## Easing
|
|
248
|
+### Easing
|
258
|
249
|
specify the rate of change of a parameter over time
|
259
|
250
|
|
260
|
251
|
* `accelerateDecelerate` - the rate of change starts and ends slowly but accelerates through the middle.
|
|
@@ -263,10 +254,10 @@ specify the rate of change of a parameter over time
|
263
|
254
|
* `fastOutSlowIn` - the rate of change starts fast but decelerates slowly.
|
264
|
255
|
* `linear` - the rate of change is constant (default)
|
265
|
256
|
|
266
|
|
-## Screen animation
|
|
257
|
+### Screen animation
|
267
|
258
|
When Shared Element Transition is used, a cross-fade transition is used between the entering and exiting screens. Make sure the root `View` has a background color in order for the cross-fade animation to be visible.
|
268
|
259
|
|
269
|
260
|
To disable the corss-fade animation, set `animated: false` when pushing the second screen. Disabling this animation is useful if you'd like to animate the reset of the elements on screen your self.
|
270
|
261
|
|
271
|
|
-# Reloading from terminal
|
272
|
|
-You can easily reload your app from terminal using `adb shell am broadcast -a react.native.RELOAD`. This is particularly useful when debugging on device.
|
|
262
|
+## Reloading from terminal
|
|
263
|
+You can easily reload your app from terminal using `adb shell am broadcast -a react.native.RELOAD`. This is particularly useful when debugging on device.
|