Browse Source

Update android-specific-use-cases.md (#1119)

Guy Carmeli 7 years ago
parent
commit
338278dbc4
1 changed files with 16 additions and 25 deletions
  1. 16
    25
      docs/android-specific-use-cases.md

+ 16
- 25
docs/android-specific-use-cases.md View File

@@ -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.