React Context API & MobX integration doc (#6116)

What's changed:
- Added a new side bar, `Third party integration` and to that added `React Context API` and `MobX` documentation. 
- Added a limitation of using React Context API with RNN so people are informed of such caveat.
- Informed the readers that if they wish to trigger re-renders across all screens, they need to use the alternatives such as MobX or Redux.

website/docs/third-party-mobx.mdx

@@ -0,0 +1,117 @@
+---
+id: third-party-mobx
+title: MobX
+sidebar_label: MobX
+---
+
+## MobX
+MobX is one of the most popular state management libraries used by applications sized from small to large. 
+With the introduction of the new React Context API, MobX can now be very easily integrated in React Native Navigation
+projects.
+
+In the example we will be creating a small Counter app.
+
+:::info Note
+With the introduction of the new Context API, there is no need to use `Provider` pattern with MobX and you
+can now just use the React Context API.
+
+Also the example uses `mobx-react-lite` but you can use the normal `mobx-react`.
+:::
+
+## Create a Counter store.
+Let's first create a counter store using MobX.
+
+```tsx
+// counter.store.js
+import React from 'react'
+import { observable, action } from 'mobx'
+
+class CounterStore {
+  @observable count = 0
+
+  @action.bound
+  increment() {
+    this.count += 1
+  }
+
+  @action.bound
+  decrement() {
+    this.count -= 1
+  }
+}
+
+// Instantiate the counter store.
+const counterStore = new CounterStore()
+// Create a React Context with the counter store instance.
+export const CounterStoreContext = React.createContext(counterStore)
+```
+
+## Consuming the store
+You can consume the Counter store in any React components using `React.useContext`.
+
+```tsx
+// Counter.js
+import React from 'react'
+import { Button, Text, View } from 'react-native'
+import { observer } from 'mobx-react-lite'
+import { CounterStoreContext } from './counter.store'
+
+const CounterScreen = observer(() => {
+  const { count, increment, decrement } = React.useContext(CounterStoreContext)
+
+  return (
+    <View>
+      <Text>{`Clicked ${count} times!`}</Text>
+      <Button title="Increment" onPress={increment} />
+      <Button title="Decrement" onPress={decrement} />
+    </View>
+  )
+})
+```
+
+## How to use MobX persistent data
+Often the app will require a persistent data solution and with MobX you can use [`mobx-react-persist`](https://github.com/pinqy520/mobx-persist).
+It only takes few extra steps to integrate the library.
+
+```tsx
+//counter.store.js
+import React from 'react'
+import { observable, action } from 'mobx'
+import { persist } from 'mobx-persist' // add this.
+
+class CounterStore {
+  @persist @observable count = 0 // count is now persistent.
+
+  @action.bound
+  increment() {
+    this.count += 1
+  }
+
+  @action.bound
+  decrement() {
+    this.count -= 1
+  }
+}
+
+export const counterStore = new CounterStore() // You need to export the counterStore instance.
+export const CounterStoreContext = React.createContext(counterStore)
+
+// index.js
+import { Navigation } from 'react-native-navigation
+import AsyncStorage from '@react-native-community/async-storage'
+import { create } from 'mobx-persist'
+import { counterStore } from './counter.store // import the counter store instance.
+
+// Create a store hydration function.
+async function hydrateStores() {
+  const hydrate = create({ storage: AsyncStorage })
+
+  await hydrate('CounterStore', counterStore)
+}
+
+Navigation.events().registerAppLaunchedListener(() => {
+  hydrateStores().then(() => {
+    // ...register screens and start the app.
+  })
+})
+```

website/docs/third-party-react-context.mdx

@@ -0,0 +1,117 @@
+---
+id: third-party-react-context
+title: React Context API
+sidebar_label: React Context API
+---
+
+## React Context API 
+React Context API provides a easy way to pass data through the component tree without having to pass props down 
+manually at every level. You can find more about the Context API in [React documentation](https://reactjs.org/docs/context.html).
+
+You can use the React Context API with React Native Navigation with a limitation. In this example, we are going to create a screen which uses the Counter Context.
+
+:::important Limitation
+As RNN screens are not part of the same component tree, updating the values in the shared context does not trigger a re-render across all screens.
+However you can still use the React.Context per RNN screen component tree.
+
+If you need to trigger a re-render across all screens, there are many popular third party libraries such as 
+[MobX](third-party-mobx.mdx) or Redux.
+:::
+
+## Create a Counter context
+
+```tsx
+// CounterContext.js
+import React from 'react
+
+// Declaring the state object globally.
+const initialCounterState = {
+  count: 0
+}
+
+const counterContextWrapper = (component) => ({
+  ...initialCounterState,
+  increment: () => {
+    initialCounterState.count += 1
+    component.setState({ context: contextWrapper(component) })
+  },
+  decrement: () => {
+    initialCounterState.count -= 1
+    component.setState({ context: contextWrapper(component) })
+  },
+})
+
+export const CounterContext = React.createContext({})
+
+export class CounterContextProvider extends React.Component {
+  state = {
+    context: counterContextWrapper(this)
+  }
+
+  render() {
+    return (
+      <CounterContext.Provider value={this.state.context}>
+        {this.props.children}
+      </CounterContext.Provider>
+    )
+  }
+}
+```
+
+## Register the screen
+When registering the screen that will be using the Counter Context, we need to wrap it
+with the Counter Context Provider we created earlier.
+
+```tsx
+// index.js
+import { Navigation } from 'react-native-navigation
+import { CounterContextProvider } from './CounterContext
+import { App } from './App
+
+Navigation.registerComponent(
+  'App', 
+  () => props => (
+    <CounterContextProvider>
+      <App {...props} />
+    </CounterContextProvider>
+  ),
+  () => App
+)
+```
+
+## Consuming the context
+You can consume the Counter Context any way you want such as `Provider.Consumer` or `React.useContext` like in the 
+example below.
+
+```tsx
+// App.js
+import React from 'react'
+import { Button, Text, View } from 'react-native'
+import { CounterContext } from './CounterContext'
+
+export const App = () => {
+  // Using useContext API
+  const { count, increment, decrement } = React.useContext(CounterContext)
+
+  return (
+    <View>
+      <Text>{`Clicked ${count} times!`}</Text>
+      <Button title="Increment" onPress={increment} />
+      <Button title="Decrement" onPress={decrement} />
+    </View>
+  )
+
+  // Using Context consumer
+  return (
+    <CounterContext.Consumer>
+      {({ count, increment, decrement }) => (
+        <View>
+          <Text>{`Clicked ${count} times!`}</Text>
+          <Button title="Increment" onPress={increment} />
+          <Button title="Decrement" onPress={decrement} />
+        </View>
+      )}
+    </CounterContext.Consumer>
+  )
+}
+```

website/sidebars.js

@@ -32,6 +32,10 @@ module.exports = {
       'style-fonts',
       'style-constants'
     ],
+    'Third party integration': [
+      'third-party-react-context',
+      'third-party-mobx'
+    ],
     Meta: [
       'meta-contributing'
     ]