Update React Context API example

This is an example of how to use React’s Context API and RNN. This solution isn’t ideal, hopefully someone
would be able to build upon this example and improve it.

playground/src/screens/ContextScreen.js

 const React = require('react');
-const { View, Text, Button } = require('react-native');
-const testIDs = require('../testIDs');
+const { Text, Button } = require('react-native');
+const Root = require('../components/Root');
 const { GlobalContext, Context } = require('../context');
 
 class ContextScreen extends React.Component {
     return {
       topBar: {
         title: {
-          text: 'My Screen'
-        },
-        background: {
-          color: 'red'
+          text: 'React Context API'
         }
       }
     };
 
   render() {
     return (
-      <View style={styles.root}>
-        <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
-          <Text style={styles.h2}>Default value: </Text>
-          <Text style={styles.h2} testID={testIDs.CENTERED_TEXT_HEADER}>{this.context}</Text>
-        </View>
-        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-          <Text style={styles.h2}>Provider value: </Text>
-          <GlobalContext.Consumer>
-            {ctx => (
-              <Text style={styles.h2} testID={testIDs.CENTERED_TEXT_HEADER}>{ctx.title}</Text>
-            )}
-          </GlobalContext.Consumer>
-        </View>
-        <View>
-          <GlobalContext.Consumer>
-            {ctx => (
-              <Button title={`clicked ${ctx.count}`} onPress={() => ctx.count++}/>
-            )}
-          </GlobalContext.Consumer>
-        </View>
-      </View>
+      <Root style={styles.root}>
+        <Text style={styles.text}>Default value: {this.context}</Text>
+        <GlobalContext.Consumer>
+          {ctx => <Text style={styles.text}>Provider value: {ctx.title}</Text>}
+        </GlobalContext.Consumer>
+        <GlobalContext.Consumer>
+          {ctx => <Button title={`clicked ${ctx.count}`} onPress={() => ctx.count++} />}
+        </GlobalContext.Consumer>
+      </Root>
     );
   }
 }
 
 const styles = {
   root: {
-    flexGrow: 1,
     justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5fcff'
+    alignItems: 'center'
   },
-  h1: {
-    fontSize: 24,
-    textAlign: 'center'
-  },
-  h2: {
-    fontSize: 12,
+  text: {
+    fontSize: 14,
     textAlign: 'center',
-  },
+    marginBottom: 8
+  }
 };

playground/src/screens/NavigationScreen.js

         <Button label='External Component' testID={EXTERNAL_COMP_BTN} onPress={this.externalComponent} />
         <Button label='Static Events' testID={SHOW_STATIC_EVENTS_SCREEN} onPress={this.pushStaticEventsScreen} />
         <Button label='Orientation' testID={SHOW_ORIENTATION_SCREEN} onPress={this.orientation} />
+        <Button label='React Context API' onPress={this.pushContextScreen} />
         <Navigation.TouchablePreview
           touchableComponent={Button}
           onPressIn={this.preview}
   externalComponent = () => Navigation.showModal(Screens.ExternalComponent);
   pushStaticEventsScreen = () => Navigation.showModal(Screens.EventsScreen)
   orientation = () => Navigation.showModal(Screens.Orientation);
+  pushContextScreen = () => Navigation.push(this, Screens.ContextScreen);
   preview = ({reactTag}) => {
     Navigation.push(this.props.componentId, {
       component: {

playground/src/screens/Screens.js

 module.exports = {
   ExternalComponent: 'ExternalComponent',
+  ContextScreen: 'ContextScreen',
   Pushed: 'Pushed',
   Layouts: 'Layouts',
   Options: 'Options',

playground/src/screens/index.js

 const CustomTextButton = require('./CustomTextButton');
 const TopBarBackground = require('./TopBarBackground');
 const KeyboardScreen = require('./KeyboardScreen');
-const ContextScreen = require('./ContextScreen');
-const { ContextProvider } = require('../context');
 const Screens = require('./Screens');
 
 function registerScreens() {
   Navigation.registerComponent(Screens.Search, () => require('./SearchScreen'));
   Navigation.registerComponent(Screens.ExternalComponent, () => require('./ExternalComponentScreen'));
 
-  Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
-  Navigation.registerComponent(`navigation.playground.CustomTransitionOrigin`, () => CustomTransitionOrigin);
-  Navigation.registerComponent(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
-  Navigation.registerComponent('navigation.playground.ContextScreen', () => (props) =>
+  const { ContextProvider } = require('../context');
+  const ContextScreen = require('./ContextScreen');
+  Navigation.registerComponent(Screens.ContextScreen, () => (props) =>
     <ContextProvider>
       <ContextScreen {...props} />
     </ContextProvider>,
     () => ContextScreen);
+
+  Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
+  Navigation.registerComponent(`navigation.playground.CustomTransitionOrigin`, () => CustomTransitionOrigin);
+  Navigation.registerComponent(`navigation.playground.ScrollViewScreen`, () => ScrollViewScreen);
+
   Navigation.registerComponent('navigation.playground.CustomDialog', () => CustomDialog);
   Navigation.registerComponent('navigation.playground.CustomDialogWithScroll', () => CustomDialogWithScroll);
   Navigation.registerComponent('navigation.playground.TopTabScreen', () => TopTabScreen);