More work Context api example

Played around with context api, tried to get the wrapped component to rerender after global context
was updated - this is what I came up with.

Note: this commit makes the playground app use a newer js core as the js core which shipped with RN on Android
is missing javascript Proxy.

Closes wix#4517

Author: guyca

package.json

@@ -66,6 +66,7 @@
     "@types/react": "16.x.x",
     "@types/react-native": "0.57.7",
     "@types/react-test-renderer": "16.x.x",
+    "jsc-android": "236355.x.x",
     "detox": "9.0.6",
     "handlebars": "4.x.x",
     "jest": "23.x.x",
@@ -75,7 +76,7 @@
     "react-native-typescript-transformer": "^1.2.10",
     "react-native-view-overflow": "0.0.3",
     "react-redux": "5.x.x",
-    "react-test-renderer": "16.6.3",
+    "react-test-renderer": "16.6.1",
     "redux": "3.x.x",
     "remx": "2.x.x",
     "semver": "5.x.x",

playground/android/app/build.gradle

@@ -54,6 +54,12 @@ configurations.all {
     }
 }
 
+configurations.all {
+    resolutionStrategy {
+        force 'org.webkit:android-jsc:r236355'
+    }
+}
+
 dependencies {
     implementation fileTree(dir: 'libs', include: ['*.jar'])
     implementation 'com.android.support:design:28.0.0'

playground/android/build.gradle

@@ -27,5 +27,6 @@ allprojects {
         }
         maven { url 'https://jitpack.io' }
         maven { url 'https://oss.sonatype.org/content/repositories/snapshots' }
+        maven { url "$rootDir/../../node_modules/jsc-android/dist" }
     }
 }

playground/src/context/index.js

@@ -1,7 +1,32 @@
 const React = require('react');
-const titleContext = React.createContext('Default title from Context');
+let ctx = {
+  title: 'Title from global context',
+  count: 0
+};
+
+const stateAwareContext = (component) =>
+  new Proxy(ctx, {
+    set: function (obj, prop, value) {
+      obj[prop] = value;
+      component.setState({ context: stateAwareContext(component) });
+      return true;
+    }
+  });
+
+const GlobalContext = React.createContext({});
+class ContextProvider extends React.Component {
+  state = {context :stateAwareContext(this)};
+  render() {
+    return (
+      <GlobalContext.Provider value={this.state.context}>
+        {this.props.children}
+      </GlobalContext.Provider>
+    );
+  }
+}
 
 module.exports = {
-  TitleContext: titleContext,
+  ContextProvider,
+  GlobalContext,
   Context: React.createContext('Default value from Context')
 }

playground/src/screens/ContextScreen.js

@@ -1,7 +1,7 @@
 const React = require('react');
-const { View, Text } = require('react-native');
+const { View, Text, Button } = require('react-native');
 const testIDs = require('../testIDs');
-const { TitleContext, Context } = require('../context');
+const { GlobalContext, Context } = require('../context');
 
 class ContextScreen extends React.Component {
   static contextType = Context;
@@ -28,11 +28,18 @@ class ContextScreen extends React.Component {
         </View>
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           <Text style={styles.h2}>Provider value: </Text>
-          <TitleContext.Consumer>
-            {title => (
-              <Text style={styles.h2} testID={testIDs.CENTERED_TEXT_HEADER}>{title}</Text>
+          <GlobalContext.Consumer>
+            {ctx => (
+              <Text style={styles.h2} testID={testIDs.CENTERED_TEXT_HEADER}>{ctx.title}</Text>
             )}
-          </TitleContext.Consumer>
+          </GlobalContext.Consumer>
+        </View>
+        <View>
+          <GlobalContext.Consumer>
+            {ctx => (
+              <Button title={`clicked ${ctx.count}`} onPress={() => ctx.count++}/>
+            )}
+          </GlobalContext.Consumer>
         </View>
       </View>
     );

playground/src/screens/index.js

@@ -29,7 +29,7 @@ const KeyboardScreen = require('./KeyboardScreen');
 const BottomTabSideMenuScreen = require('./complexlayouts/BottomTabSideMenuScreen');
 const FlatListScreen = require('./FlatListScreen');
 const ContextScreen = require('./ContextScreen');
-const { TitleContext } = require('../context');
+const { ContextProvider } = require('../context');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -40,12 +40,12 @@ function registerScreens() {
   Navigation.registerComponent(`navigation.playground.LifecycleScreen`, () => LifecycleScreen);
   Navigation.registerComponent(`navigation.playground.StaticLifecycleOverlay`, () => StaticLifecycleOverlay);
   Navigation.registerComponent(`navigation.playground.TextScreen`, () => TextScreen);
-  Navigation.registerComponent(`navigation.playground.PushedScreen`, () => PushedScreen);
-  Navigation.registerComponent('navigation.playground.ContextScreen', () => (props) => (
-    <TitleContext.Provider value={'Title from Provider'}>
+  Navigation.registerComponent('navigation.playground.PushedScreen', () => PushedScreen);
+  Navigation.registerComponent('navigation.playground.ContextScreen',() => (props) =>
+    <ContextProvider>
       <ContextScreen {...props} />
-    </TitleContext.Provider>
-  ), () => ContextScreen);
+    </ContextProvider>,
+    () => ContextScreen);
   Navigation.registerComponent(`navigation.playground.OptionsScreen`, () => OptionsScreen);
   Navigation.registerComponent(`navigation.playground.OrientationSelectScreen`, () => OrientationSelectScreen);
   Navigation.registerComponent(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);