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

docs/android-specific-use-cases.md

@@ -1,13 +1,13 @@
 # Android Specific Use Cases
 
-TOC
-* [Activity Lifecycle and onActivityResult](https://github.com/wix/react-native-navigation/wiki/Android#activity-lifecycle-and-onactivityresult)
-* [Adjusting soft input mode](https://github.com/wix/react-native-navigation/wiki/Android/#adjusting-soft-input-mode)
-* [Splash screen](https://github.com/wix/react-native-navigation/wiki/Android/#splash-screen)
-* [Collapsing React header](https://github.com/wix/react-native-navigation/wiki/Android/#collapsing-react-header---android-only)
-  * [Collapsing react view](https://github.com/wix/react-native-navigation/wiki/Android/#collapsing-react-view)
-  * [Collapsing react view with top tabs](https://github.com/wix/react-native-navigation/wiki/Android/_edit#collapsing-react-view-with-top-tabs)
-* [Reloading from terminal](https://github.com/wix/react-native-navigation/wiki/Android/#reloading-from-terminal)
+* [Activity Lifecycle and onActivityResult](https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=activity-lifecycle-and-onactivityresult)
+* [Adjusting soft input mode](https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=adjusting-soft-input-mode)
+* [Splash screen](https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=splash-screen)
+* [Collapsing React header](https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=collapsing-react-header)
+  * [Collapsing react view](https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=collapsing-react-view)
+  * [Collapsing react view with top tabs](https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=collapsing-react-view-with-top-tabs)
+* [Shared Element Transition](https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=shared-element-transition)
+* [Reloading from terminal](https://wix.github.io/react-native-navigation/#/android-specific-use-cases?id=reloading-from-terminal)
 
 # Activity Lifecycle and onActivityResult
 In order to listen to activity lifecycle callbacks, set `ActivityCallback` in `MainApplication.onCreate` as follows:
@@ -79,7 +79,7 @@ public class MyApplication extends NavigationApplication {
 # Splash screen
 Override `getSplashLayout` or `createSplashLayout` in `MainActivity` to provide a splash layout which will be displayed while Js context initialises.
 
-# Collapsing React header - Android only
+# Collapsing React header
 A screen can have a header, either an image or a react component, that collapses as the screen is scrolled.
 
 ## Collapsing react view
@@ -138,6 +138,63 @@ Navigation.startSingleScreenApp({
     ]
 });
 ```
+# Shared Element Transition
+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.
+
+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.
+
+>When you Shared Element Transition is used, the default cross-fading transition is activated between the entering and exiting screens. To disable the corss-fade animation set `animated: false` when pushing the second screen.
+
+## Supported transitions
+* Scale
+* Text color
+* Linear translation
+* Curved motion translation
+* 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.
+
+## Specifying shared elements
+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:
+
+```js
+<SharedElementTransition sharedElementId={'SharedTextId'}>
+    <Text style={{color: 'blue'}}>React Native Navigation</Text>
+</SharedElementTransition>
+```
+<br>In the second screen, we also wrap the corresponding `<Text/>` element but this time, we also specify the transition props:
+
+```js
+<SharedElementTransition
+    sharedElementId={'SharedTextId'}
+    showDuration={600}
+    hideDuration={400}
+    showInterpolation={
+          {
+            type: 'linear',
+            easing: 'FastOutSlowIn'
+          }
+        }
+    hideInterpolation={
+          {
+            type: 'linear',
+            easing:'FastOutSlowIn'
+          }
+        }
+  >
+    <Text style={{color: 'green'}}>React Native Navigation</Text>
+  </SharedElementTransition>
+</View>
+```
+<br>Finally, specify the elements you'd like to transition when pushing the second screen:
+
+```js
+this.props.navigator.push({
+    screen: 'SharedElementScreen',
+    sharedElements: ['SharedTextId']
+  }
+});
+```
+## Animating image bounds and scale
+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.
 
 # Reloading from terminal
-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.
+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.