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

@@ -1,6 +1,6 @@
 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 {
@@ -10,10 +10,7 @@ class ContextScreen extends React.Component {
     return {
       topBar: {
         title: {
-          text: 'My Screen'
-        },
-        background: {
-          color: 'red'
+          text: 'React Context API'
         }
       }
     };
@@ -21,27 +18,15 @@ class ContextScreen extends React.Component {
 
   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>
     );
   }
 }
@@ -50,17 +35,12 @@ module.exports = ContextScreen;
 
 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

@@ -38,6 +38,7 @@ class NavigationScreen  extends React.Component {
         <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}
@@ -52,6 +53,7 @@ class NavigationScreen  extends React.Component {
   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

@@ -1,5 +1,6 @@
 module.exports = {
   ExternalComponent: 'ExternalComponent',
+  ContextScreen: 'ContextScreen',
   Pushed: 'Pushed',
   Layouts: 'Layouts',
   Options: 'Options',

playground/src/screens/index.js

@@ -9,8 +9,6 @@ const TopTabOptionsScreen = require('./TopTabOptionsScreen');
 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() {
@@ -41,14 +39,18 @@ 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);