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
 # Android Specific Use Cases
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
 In order to listen to activity lifecycle callbacks, set `ActivityCallback` in `MainApplication.onCreate` as follows:
4
 In order to listen to activity lifecycle callbacks, set `ActivityCallback` in `MainApplication.onCreate` as follows:
14
 
5
 
15
 ```java
6
 ```java
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
 `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`.
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
 Override `getSplashLayout` or `createSplashLayout` in `MainActivity` to provide a splash layout which will be displayed while Js context initialises.
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
 A screen can have a header, either an image or a react component, that collapses as the screen is scrolled.
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
 ```js
78
 ```js
88
 export default class CollapsingReactViewScreen extends Component {
79
 export default class CollapsingReactViewScreen extends Component {
98
 }
89
 }
99
 ```
90
 ```
100
 
91
 
101
-## Collapsing react view with top tabs
92
+### Collapsing react view with top tabs
102
 
93
 
103
 **Note:** `example.header` represents a component that's registered as a screen:
94
 **Note:** `example.header` represents a component that's registered as a screen:
104
 ```js
95
 ```js
138
     ]
129
     ]
139
 });
130
 });
140
 ```
131
 ```
141
-# Shared Element Transition
132
+## Shared Element Transition
142
 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.
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
 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.
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
 * Scale
138
 * Scale
148
 * Text color
139
 * Text color
149
 * Linear translation
140
 * Linear translation
150
 * Curved motion translation
141
 * Curved motion translation
151
 * 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.
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
 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:
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
 ```js
147
 ```js
191
   }
182
   }
192
 });
183
 });
193
 ```
184
 ```
194
-## Animating image bounds and scale
185
+### Animating image bounds and scale
195
 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.
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
 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.
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
 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/>'.
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
 ```js
194
 ```js
254
 });
245
 });
255
 ```
246
 ```
256
 
247
 
257
-## Easing
248
+### Easing
258
 specify the rate of change of a parameter over time
249
 specify the rate of change of a parameter over time
259
 
250
 
260
 * `accelerateDecelerate` - the rate of change starts and ends slowly but accelerates through the middle.
251
 * `accelerateDecelerate` - the rate of change starts and ends slowly but accelerates through the middle.
263
 * `fastOutSlowIn` - the rate of change starts fast but decelerates slowly.
254
 * `fastOutSlowIn` - the rate of change starts fast but decelerates slowly.
264
 * `linear` - the rate of change is constant (default)
255
 * `linear` - the rate of change is constant (default)
265
 
256
 
266
-## Screen animation
257
+### Screen animation
267
 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.
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
 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.
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.