Support Context api (#4427)

The following PR introduces improved support for Context api and other api's which wrap the root view.

## Context api
Navigation.registerComponent('navigation.playground.ContextScreen', () => (props) => (
  <TitleContext.Provider value={'Title from Provider'}>
    <ContextScreen {...props} />
  </TitleContext.Provider>
), () => ContextScreen);

## Redux
Navigation.registerComponent('navigation.playground.ReduxScreen', () => (props) => (
  <Provider store={reduxStore}>
    <ReduxScreen {...props} />
  </Provider>
), () => ReduxScreen);

## Plain Component - not changed
Navigation.registerComponent('navigation.playground.MyScreen', () => MyScreen);

This PR also upgrades the TypeScript version to 3.2.0 and RN version used in the playground app to 0.57.7

* New Android build flavor - `reactNative57_7`
* Unit test coverage is disabled, for some reason it broke after upgrading to RN 0.57.7

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = function (api) {
+  api && api.cache(false);
+  return {
+    env: {
+      test: {
+        presets: [
+          "module:metro-react-native-babel-preset"
+        ],
+        plugins: [
+          "@babel/plugin-proposal-class-properties"
+        ]
+      }
+    }
+  };
+}

index.ios.js

@@ -1 +0,0 @@
-require('./playground/index.ios');

index.js

@@ -0,0 +1 @@
+require('./playground/index');

integration/redux/Redux.test.js

@@ -18,12 +18,12 @@ describe('redux support', () => {
       render() {
         return (
           <Provider store={store.reduxStore}>
-            <MyConnectedComponent />
+            <MyConnectedComponent/>
           </Provider>
         );
       }
     };
-    Navigation.registerComponent('ComponentName', () => HOC);
+    Navigation.registerComponent('ComponentName', () => (props) => <HOC {...props} />, Provider, store.reduxStore);
 
     const tree = renderer.create(<HOC />);
     expect(tree.toJSON().children).toEqual(['no name']);
@@ -41,7 +41,7 @@ describe('redux support', () => {
         );
       }
     };
-    const CompFromNavigation = Navigation.registerComponent('ComponentName', () => HOC)();
+    const CompFromNavigation = Navigation.registerComponent('ComponentName', () => (props) => <HOC {...props} />)();
 
     const tree = renderer.create(<CompFromNavigation componentId='componentId' renderCountIncrement={renderCountIncrement}/>);
     expect(tree.toJSON().children).toEqual(['no name']);

lib/android/app/build.gradle

@@ -64,7 +64,7 @@ android {
             dimension "RNN.reactNativeVersion"
             buildConfigField("int", "REACT_NATVE_VERSION_MINOR", "57")
         }
-        reactNative57WixFork {
+        reactNative57_5 {
             dimension "RNN.reactNativeVersion"
             buildConfigField("int", "REACT_NATVE_VERSION_MINOR", "57")
         }

lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/DevBundleDownloadListenerAdapter.java

@@ -0,0 +1,28 @@
+package com.reactnativenavigation.react;
+
+import com.facebook.react.bridge.NativeDeltaClient;
+import com.facebook.react.devsupport.interfaces.DevBundleDownloadListener;
+
+import javax.annotation.Nullable;
+
+public class DevBundleDownloadListenerAdapter implements DevBundleDownloadListener, NavigationDevBundleDownloadListener {
+    @Override
+    public void onSuccess(@Nullable NativeDeltaClient nativeDeltaClient) {
+        onSuccess();
+    }
+
+    @Override
+    public void onSuccess() {
+
+    }
+
+    @Override
+    public void onProgress(@Nullable String status, @Nullable Integer done, @Nullable Integer total) {
+
+    }
+
+    @Override
+    public void onFailure(Exception cause) {
+
+    }
+}

lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/JsDevReloadHandlerFacade.java

@@ -0,0 +1,28 @@
+package com.reactnativenavigation.react;
+
+import com.facebook.react.bridge.NativeDeltaClient;
+import com.facebook.react.devsupport.interfaces.DevBundleDownloadListener;
+
+import javax.annotation.Nullable;
+
+public class JsDevReloadHandlerFacade implements DevBundleDownloadListener, NavigationDevBundleDownloadListener {
+    @Override
+    public void onSuccess(@Nullable NativeDeltaClient nativeDeltaClient) {
+        onSuccess();
+    }
+
+    @Override
+    public void onProgress(@Nullable String status, @Nullable Integer done, @Nullable Integer total) {
+
+    }
+
+    @Override
+    public void onFailure(Exception cause) {
+
+    }
+
+    @Override
+    public void onSuccess() {
+
+    }
+}

lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/NavigationReactNativeHost.java

@@ -0,0 +1,107 @@
+package com.reactnativenavigation.react;
+
+import android.app.Application;
+import android.support.annotation.NonNull;
+import android.support.annotation.Nullable;
+
+import com.facebook.infer.annotation.Assertions;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactInstanceManagerBuilder;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.common.LifecycleState;
+import com.facebook.react.devsupport.interfaces.DevBundleDownloadListener;
+import com.facebook.react.shell.MainReactPackage;
+import com.reactnativenavigation.NavigationApplication;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Default implementation of {@link ReactNativeHost} that includes {@link NavigationPackage}
+ * and user-defined additional packages.
+ */
+public class NavigationReactNativeHost extends ReactNativeHost implements BundleDownloadListenerProvider {
+
+    private final boolean isDebug;
+    private final List<ReactPackage> additionalReactPackages;
+    private @Nullable NavigationDevBundleDownloadListener bundleListener;
+    private final DevBundleDownloadListener bundleListenerMediator = new DevBundleDownloadListenerAdapter() {
+        @Override
+        public void onSuccess() {
+            if (bundleListener != null) {
+                bundleListener.onSuccess();
+            }
+        }
+    };
+
+    public NavigationReactNativeHost(NavigationApplication application) {
+        this(application, application.isDebug(), application.createAdditionalReactPackages());
+    }
+
+    @SuppressWarnings("WeakerAccess")
+    public NavigationReactNativeHost(Application application, boolean isDebug, final List<ReactPackage> additionalReactPackages) {
+        super(application);
+        this.isDebug = isDebug;
+        this.additionalReactPackages = additionalReactPackages;
+    }
+
+    @Override
+    public void setBundleLoaderListener(NavigationDevBundleDownloadListener listener) {
+        bundleListener = listener;
+    }
+
+    @Override
+    public boolean getUseDeveloperSupport() {
+        return isDebug;
+    }
+
+    @Override
+    protected List<ReactPackage> getPackages() {
+        List<ReactPackage> packages = new ArrayList<>();
+        boolean hasMainReactPackage = false;
+        packages.add(new NavigationPackage(this));
+        if (additionalReactPackages != null) {
+            for (ReactPackage p : additionalReactPackages) {
+                if (!(p instanceof NavigationPackage)) {
+                    packages.add(p);
+                }
+                if (p instanceof MainReactPackage) hasMainReactPackage = true;
+            }
+        }
+        if (!hasMainReactPackage) {
+            packages.add(new MainReactPackage());
+        }
+        return packages;
+    }
+
+    protected ReactInstanceManager createReactInstanceManager() {
+        ReactInstanceManagerBuilder builder = ReactInstanceManager.builder()
+                .setApplication(getApplication())
+                .setJSMainModulePath(getJSMainModuleName())
+                .setUseDeveloperSupport(getUseDeveloperSupport())
+                .setRedBoxHandler(getRedBoxHandler())
+                .setJavaScriptExecutorFactory(getJavaScriptExecutorFactory())
+                .setUIImplementationProvider(getUIImplementationProvider())
+                .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
+                .setDevBundleDownloadListener(getDevBundleDownloadListener());
+
+        for (ReactPackage reactPackage : getPackages()) {
+            builder.addPackage(reactPackage);
+        }
+
+        String jsBundleFile = getJSBundleFile();
+        if (jsBundleFile != null) {
+            builder.setJSBundleFile(jsBundleFile);
+        } else {
+            builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName()));
+        }
+        return builder.build();
+    }
+
+    @SuppressWarnings("WeakerAccess")
+    @NonNull
+    protected DevBundleDownloadListener getDevBundleDownloadListener() {
+        return bundleListenerMediator;
+    }
+}

lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/ReloadHandlerFacade.java

@@ -0,0 +1,25 @@
+package com.reactnativenavigation.react;
+
+import com.facebook.react.bridge.NativeDeltaClient;
+import com.facebook.react.devsupport.interfaces.DevBundleDownloadListener;
+
+import javax.annotation.Nullable;
+
+public abstract class ReloadHandlerFacade implements DevBundleDownloadListener {
+    @Override
+    public void onSuccess(@Nullable NativeDeltaClient nativeDeltaClient) {
+
+    }
+
+    @Override
+    public void onProgress(@Nullable String status, @Nullable Integer done, @Nullable Integer total) {
+
+    }
+
+    @Override
+    public void onFailure(Exception cause) {
+
+    }
+
+    protected abstract void onSuccess();
+}

lib/android/app/src/reactNative57_5/java/com/reactnativenavigation/react/SyncUiImplementation.java

@@ -0,0 +1,83 @@
+package com.reactnativenavigation.react;
+
+import android.support.annotation.Nullable;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableArray;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.UIImplementation;
+import com.facebook.react.uimanager.UIImplementationProvider;
+import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.uimanager.ViewManager;
+import com.facebook.react.uimanager.common.MeasureSpecProvider;
+import com.facebook.react.uimanager.common.SizeMonitoringFrameLayout;
+import com.facebook.react.uimanager.events.EventDispatcher;
+
+import java.util.List;
+
+@SuppressWarnings("WeakerAccess")
+public class SyncUiImplementation extends UIImplementation {
+    private static final Object lock = new Object();
+
+    public static class Provider extends UIImplementationProvider {
+        @Override
+        public UIImplementation createUIImplementation(ReactApplicationContext reactContext, List<ViewManager> viewManagerList, EventDispatcher eventDispatcher, int minTimeLeftInFrameForNonBatchedOperationMs) {
+            return new SyncUiImplementation(reactContext, viewManagerList, eventDispatcher, minTimeLeftInFrameForNonBatchedOperationMs);
+        }
+
+        @Override
+        public UIImplementation createUIImplementation(ReactApplicationContext reactContext, UIManagerModule.ViewManagerResolver viewManagerResolver, EventDispatcher eventDispatcher, int minTimeLeftInFrameForNonBatchedOperationMs) {
+            return new SyncUiImplementation(reactContext, viewManagerResolver, eventDispatcher, minTimeLeftInFrameForNonBatchedOperationMs);
+        }
+    }
+
+    public SyncUiImplementation(ReactApplicationContext reactContext, List<ViewManager> viewManagerList, EventDispatcher eventDispatcher, int minTimeLeftInFrameForNonBatchedOperationMs) {
+        super(reactContext, viewManagerList, eventDispatcher, minTimeLeftInFrameForNonBatchedOperationMs);
+    }
+
+    public SyncUiImplementation(ReactApplicationContext reactContext, UIManagerModule.ViewManagerResolver viewManagerResolver, EventDispatcher eventDispatcher, int minTimeLeftInFrameForNonBatchedOperationMs) {
+        super(reactContext, viewManagerResolver, eventDispatcher, minTimeLeftInFrameForNonBatchedOperationMs);
+    }
+
+    @Override
+    public void manageChildren(
+            int viewTag,
+            @Nullable ReadableArray moveFrom,
+            @Nullable ReadableArray moveTo,
+            @Nullable ReadableArray addChildTags,
+            @Nullable ReadableArray addAtIndices,
+            @Nullable ReadableArray removeFrom) {
+        synchronized (lock) {
+            super.manageChildren(viewTag, moveFrom, moveTo, addChildTags, addAtIndices, removeFrom);
+        }
+    }
+
+    @Override
+    public void setChildren(int viewTag, ReadableArray childrenTags) {
+        synchronized (lock) {
+            super.setChildren(viewTag, childrenTags);
+        }
+    }
+
+    @Override
+    public void createView(int tag, String className, int rootViewTag, ReadableMap props) {
+        synchronized (lock) {
+            super.createView(tag, className, rootViewTag, props);
+        }
+    }
+
+    @Override
+    public void removeRootShadowNode(int rootViewTag) {
+        synchronized (lock) {
+            super.removeRootShadowNode(rootViewTag);
+        }
+    }
+
+    @Override
+    public <T extends SizeMonitoringFrameLayout & MeasureSpecProvider> void registerRootView(T rootView, int tag, ThemedReactContext context) {
+        synchronized (lock) {
+            super.registerRootView(rootView, tag, context);
+        }
+    }
+}

lib/src/Navigation.ts

@@ -31,17 +31,17 @@ export class NavigationRoot {
   private readonly eventsRegistry: EventsRegistry;
   private readonly commandsObserver: CommandsObserver;
   private readonly componentEventsObserver: ComponentEventsObserver;
-  private readonly componentWrapper: typeof ComponentWrapper;
+  private readonly componentWrapper: ComponentWrapper;
 
   constructor() {
     this.Element = Element;
     this.TouchablePreview = TouchablePreview;
+    this.componentWrapper = new ComponentWrapper();
     this.store = new Store();
-    this.componentWrapper = ComponentWrapper;
     this.nativeEventsReceiver = new NativeEventsReceiver();
     this.uniqueIdProvider = new UniqueIdProvider();
     this.componentEventsObserver = new ComponentEventsObserver(this.nativeEventsReceiver);
-    this.componentRegistry = new ComponentRegistry(this.store, this.componentEventsObserver, this.componentWrapper);
+    this.componentRegistry = new ComponentRegistry(this.store, this.componentEventsObserver);
     this.layoutTreeParser = new LayoutTreeParser();
     this.layoutTreeCrawler = new LayoutTreeCrawler(this.uniqueIdProvider, this.store);
     this.nativeCommandsSender = new NativeCommandsSender();
@@ -56,9 +56,8 @@ export class NavigationRoot {
    * Every navigation component in your app must be registered with a unique name.
    * The component itself is a traditional React component extending React.Component.
    */
-
-  public registerComponent(componentName: string | number, getComponentClassFunc: ComponentProvider): ComponentProvider {
-    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc);
+  public registerComponent(componentName: string | number, componentProvider: ComponentProvider, concreteComponentProvider?: ComponentProvider): ComponentProvider {
+    return this.componentRegistry.registerComponent(componentName, componentProvider, this.componentWrapper, concreteComponentProvider);
   }
 
   /**
@@ -71,7 +70,7 @@ export class NavigationRoot {
     ReduxProvider: any,
     reduxStore: any
   ): ComponentProvider {
-    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc, ReduxProvider, reduxStore);
+    return this.componentRegistry.registerComponent(componentName, getComponentClassFunc, this.componentWrapper, undefined, ReduxProvider, reduxStore);
   }
 
   /**

lib/src/adapters/Element.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { View, requireNativeComponent } from 'react-native';
+import { requireNativeComponent } from 'react-native';
 
 let RNNElement: React.ComponentType<any>;
 
 export class Element extends React.Component<{ elementId: any; resizeMode?: any; }, any> {
   static propTypes = {
     elementId: PropTypes.string.isRequired,
-    resizeMode: PropTypes.string,
-    ...View.propTypes
+    resizeMode: PropTypes.string
   };
 
   static defaultProps = {

lib/src/adapters/TouchablePreview.tsx

@@ -47,14 +47,9 @@ export class TouchablePreview extends React.PureComponent<Props, any> {
 
   static peeking = false;
 
-  private ref: React.Component<any> | null = null;
   private timeout: number | undefined;
   private ts: number = 0;
-
-  onRef = (ref: React.Component<any>) => {
-    this.ref = ref;
-  }
-
+  private onRef = React.createRef<any>();
   onPress = () => {
     const { onPress } = this.props;
 
@@ -73,7 +68,7 @@ export class TouchablePreview extends React.PureComponent<Props, any> {
         return;
       }
 
-      const reactTag = findNodeHandle(this.ref);
+      const reactTag = findNodeHandle(this.onRef.current);
 
       return onPressIn({ reactTag });
     }

lib/src/components/ComponentRegistry.test.tsx

@@ -27,28 +27,27 @@ describe('ComponentRegistry', () => {
     mockRegistry = AppRegistry.registerComponent = jest.fn(AppRegistry.registerComponent);
     mockWrapper = jest.mock('./ComponentWrapper');
     mockWrapper.wrap = () => WrappedComponent;
-    uut = new ComponentRegistry(store, {} as any, mockWrapper);
+    uut = new ComponentRegistry(store, {} as any);
   });
 
   it('registers component by componentName into AppRegistry', () => {
     expect(mockRegistry).not.toHaveBeenCalled();
-    const result = uut.registerComponent('example.MyComponent.name', () => {});
+    const result = uut.registerComponent('example.MyComponent.name', () => {}, mockWrapper);
     expect(mockRegistry).toHaveBeenCalledTimes(1);
     expect(mockRegistry.mock.calls[0][0]).toEqual('example.MyComponent.name');
     expect(mockRegistry.mock.calls[0][1]()).toEqual(result());
   });
 
-  it('saves the wrapper component generator the store', () => {
+  it('saves the wrapper component generator to the store', () => {
     expect(store.getComponentClassForName('example.MyComponent.name')).toBeUndefined();
-    uut.registerComponent('example.MyComponent.name', () => {});
+    uut.registerComponent('example.MyComponent.name', () => {}, mockWrapper);
     const Class = store.getComponentClassForName('example.MyComponent.name');
     expect(Class).not.toBeUndefined();
     expect(Class()).toEqual(WrappedComponent);
-    expect(Object.getPrototypeOf(Class())).toEqual(React.Component);
   });
 
   it('resulting in a normal component', () => {
-    uut.registerComponent('example.MyComponent.name', () => {});
+    uut.registerComponent('example.MyComponent.name', () => {}, mockWrapper);
     const Component = mockRegistry.mock.calls[0][1]();
     const tree = renderer.create(<Component componentId='123' />);
     expect(tree.toJSON()!.children).toEqual(['Hello, World!']);
@@ -64,7 +63,7 @@ describe('ComponentRegistry', () => {
     jest.spyOn(store, 'setComponentClassForName');
     const generator = jest.fn(() => {});
     const componentName = 'example.MyComponent.name';
-    uut.registerComponent(componentName, generator);
+    uut.registerComponent(componentName, generator, mockWrapper);
     expect(store.getComponentClassForName(componentName)()).toEqual(WrappedComponent);
   });
 });

lib/src/components/ComponentRegistry.ts

@@ -1,14 +1,19 @@
 import { AppRegistry, ComponentProvider } from 'react-native';
-import { ComponentWrapper } from './ComponentWrapper';
 import { Store } from './Store';
 import { ComponentEventsObserver } from '../events/ComponentEventsObserver';
+import { ComponentWrapper } from './ComponentWrapper';
 
 export class ComponentRegistry {
-  constructor(private readonly store: Store, private readonly componentEventsObserver: ComponentEventsObserver, private readonly ComponentWrapperClass: typeof ComponentWrapper) { }
+  constructor(private readonly store: Store, private readonly componentEventsObserver: ComponentEventsObserver) { }
 
-  registerComponent(componentName: string | number, getComponentClassFunc: ComponentProvider, ReduxProvider?: any, reduxStore?: any): ComponentProvider {
+  registerComponent(componentName: string | number,
+                    componentProvider: ComponentProvider,
+                    componentWrapper: ComponentWrapper,
+                    concreteComponentProvider?: ComponentProvider,
+                    ReduxProvider?: any,
+                    reduxStore?: any): ComponentProvider {
     const NavigationComponent = () => {
-      return this.ComponentWrapperClass.wrap(componentName.toString(), getComponentClassFunc, this.store, this.componentEventsObserver, ReduxProvider, reduxStore)
+      return componentWrapper.wrap(componentName.toString(), componentProvider, this.store, this.componentEventsObserver, concreteComponentProvider, ReduxProvider, reduxStore);
     };
     this.store.setComponentClassForName(componentName.toString(), NavigationComponent);
     AppRegistry.registerComponent(componentName.toString(), NavigationComponent);

lib/src/components/ComponentWrapper.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text } from 'react-native';
+import { View, Text } from 'react-native';
 import * as renderer from 'react-test-renderer';
 import { ComponentWrapper } from './ComponentWrapper';
 import { Store } from './Store';
@@ -12,6 +12,7 @@ describe('ComponentWrapper', () => {
   let myComponentProps;
   let mockedComponentEventsObserver: ComponentEventsObserver;
   let componentEventsObserver: ComponentEventsObserver;
+  let uut: ComponentWrapper;
 
   class MyComponent extends React.Component<any, any> {
     static options = {
@@ -50,10 +51,11 @@ describe('ComponentWrapper', () => {
     store = new Store();
     mockedComponentEventsObserver = mock(ComponentEventsObserver);
     componentEventsObserver = instance(mockedComponentEventsObserver);
+    uut = new ComponentWrapper();
   });
 
   it('must have componentId as prop', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     const orig = console.error;
     console.error = (a) => a;
     expect(() => {
@@ -63,7 +65,7 @@ describe('ComponentWrapper', () => {
   });
 
   it('wraps the component', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     expect(NavigationComponent).not.toBeInstanceOf(MyComponent);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
     expect(tree.toJSON()!.children).toEqual(['Hello, World!']);
@@ -71,14 +73,14 @@ describe('ComponentWrapper', () => {
 
   it('injects props from wrapper into original component', () => {
     const renderCount = jest.fn();
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} text={'yo'} renderCount={renderCount} />);
     expect(tree.toJSON()!.children).toEqual(['yo']);
     expect(renderCount).toHaveBeenCalledTimes(1);
   });
 
   it('updates props from wrapper into original component on state change', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
     expect(myComponentProps.foo).toEqual(undefined);
     (tree.getInstance() as any).setState({ propsFromState: { foo: 'yo' } });
@@ -87,13 +89,13 @@ describe('ComponentWrapper', () => {
 
   it('pulls props from the store and injects them into the inner component', () => {
     store.setPropsForId('component123', { numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     renderer.create(<NavigationComponent componentId={'component123'} />);
     expect(myComponentProps).toEqual({ componentId: 'component123', numberProp: 1, stringProp: 'hello', objectProp: { a: 2 } });
   });
 
   it('updates props from store into inner component', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
     store.setPropsForId('component1', { myProp: 'hello' });
     expect(myComponentProps.foo).toEqual(undefined);
@@ -104,42 +106,57 @@ describe('ComponentWrapper', () => {
   });
 
   it('protects id from change', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<TestParent ChildClass={NavigationComponent} />);
     expect(myComponentProps.componentId).toEqual('component1');
     (tree.getInstance() as any).setState({ propsFromState: { id: 'ERROR' } });
     expect(myComponentProps.componentId).toEqual('component1');
   });
 
-  it('assignes key by id', () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+  xit('assigns key by componentId', () => {
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
     expect(myComponentProps.componentId).toEqual('component1');
-    expect((tree.getInstance() as any)._reactInternalInstance.child.key).toEqual('component1');
+    console.log(Object.keys(tree.root.findByType(NavigationComponent).instance._reactInternalFiber));
+    console.log(tree.root.findByType(NavigationComponent).instance._reactInternalFiber.child.child.child.return.return.key);
+    expect((tree.getInstance() as any)._reactInternalInstance.child.child.Fibernode.key).toEqual('component1');
   });
 
   it('cleans props from store on unMount', () => {
     store.setPropsForId('component123', { foo: 'bar' });
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
     expect(store.getPropsForId('component123')).toEqual({ foo: 'bar' });
     tree.unmount();
     expect(store.getPropsForId('component123')).toEqual({});
   });
 
-  it(`merges static members from wrapped component when generated`, () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver) as any;
+  it('merges static members from wrapped component when generated', () => {
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver) as any;
     expect(NavigationComponent.options).toEqual({ title: 'MyComponentTitle' });
   });
 
-  it(`calls unmounted on componentEventsObserver`, () => {
-    const NavigationComponent = ComponentWrapper.wrap(componentName, () => MyComponent, store, componentEventsObserver);
+  it('calls unmounted on componentEventsObserver', () => {
+    const NavigationComponent = uut.wrap(componentName, () => MyComponent, store, componentEventsObserver);
     const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
     verify(mockedComponentEventsObserver.unmounted('component123')).never();
     tree.unmount();
     verify(mockedComponentEventsObserver.unmounted('component123')).once();
   });
 
+  it('renders HOC components correctly', () => {
+    const generator = () => (props) => (
+      <View>
+        <MyComponent {...props}/>
+      </View>
+    );
+    uut = new ComponentWrapper();
+    const NavigationComponent = uut.wrap(componentName, generator, store, componentEventsObserver);
+    const tree = renderer.create(<NavigationComponent componentId={'component123'} />);
+    expect(tree.root.findByType(View)).toBeDefined()
+    expect(tree.root.findByType(MyComponent).props).toEqual({componentId: 'component123'});
+  });
+
   describe(`register with redux store`, () => {
     class MyReduxComp extends React.Component<any> {
       static get options() {
@@ -162,10 +179,13 @@ describe('ComponentWrapper', () => {
     const reduxStore = require('redux').createStore((state = initialState) => state);
 
     it(`wraps the component with a react-redux provider with passed store`, () => {
-      const NavigationComponent = ComponentWrapper.wrap(componentName, () => ConnectedComp, store, componentEventsObserver, ReduxProvider, reduxStore);
+      const NavigationComponent = uut.wrap(componentName, () => ConnectedComp, store, componentEventsObserver, undefined, ReduxProvider, reduxStore);
       const tree = renderer.create(<NavigationComponent componentId={'theCompId'} />);
       expect(tree.toJSON()!.children).toEqual(['it just works']);
       expect((NavigationComponent as any).options).toEqual({ foo: 123 });
     });
   });
+
 });
+
+

lib/src/components/ComponentWrapper.tsx

@@ -9,11 +9,12 @@ interface HocState { componentId: string; allProps: {}; }
 interface HocProps { componentId: string; }
 
 export class ComponentWrapper {
-  static wrap(
+  wrap(
     componentName: string | number,
     OriginalComponentGenerator: ComponentProvider,
     store: Store,
     componentEventsObserver: ComponentEventsObserver,
+    concreteComponentProvider: ComponentProvider = OriginalComponentGenerator,
     ReduxProvider?: any,
     reduxStore?: any
   ): React.ComponentClass<any> {
@@ -44,7 +45,6 @@ export class ComponentWrapper {
           <GeneratedComponentClass
             {...this.state.allProps}
             componentId={this.state.componentId}
-            key={this.state.componentId}
           />
         );
       }
@@ -57,16 +57,11 @@ export class ComponentWrapper {
     }
 
     ReactLifecyclesCompat.polyfill(WrappedComponent);
-    require('hoist-non-react-statics')(WrappedComponent, GeneratedComponentClass);
-
-    if (reduxStore && ReduxProvider) {
-      return ComponentWrapper.wrapWithRedux(WrappedComponent, ReduxProvider, reduxStore);
-    } else {
-      return WrappedComponent;
-    }
+    require('hoist-non-react-statics')(WrappedComponent, concreteComponentProvider());
+    return ReduxProvider ? this.wrapWithRedux(WrappedComponent, ReduxProvider, reduxStore) : WrappedComponent;
   }
 
-  static wrapWithRedux(WrappedComponent: React.ComponentClass<any>, ReduxProvider: any, reduxStore: any): React.ComponentClass<any> {
+  wrapWithRedux(WrappedComponent: React.ComponentClass<any>, ReduxProvider: any, reduxStore: any): React.ComponentClass<any> {
     class ReduxWrapper extends React.Component<any, any> {
       render() {
         return (

metro.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  projectRoot: `${__dirname}/playground`,
+  watchFolders: [
+    __dirname
+  ],
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-typescript-transformer')
+  }
+};
+

package.json

@@ -60,19 +60,21 @@
     "tslib": "1.9.3"
   },
   "devDependencies": {
-    "@types/jest": "22.x.x",
+    "@types/jest": "23.x.x",
     "@types/lodash": "4.x.x",
     "@types/react": "16.x.x",
-    "@types/react-native": "0.51.x",
+    "@types/react-native": "0.57.7",
     "@types/react-test-renderer": "16.x.x",
     "detox": "9.0.6",
     "handlebars": "4.x.x",
-    "jest": "22.x.x",
-    "react": "16.2.0",
-    "react-native": "0.51.x",
+    "jest": "23.x.x",
+    "react": "16.6.1",
+    "react-native": "0.57.7",
+    "react-native-typescript-transformer": "^1.2.10",
     "react-native-view-overflow": "0.0.3",
     "react-redux": "5.x.x",
-    "react-test-renderer": "16.0.0-alpha.12",
+    "react-test-renderer": "16.6.3",
+    "metro-react-native-babel-preset": "0.50.0",
     "redux": "3.x.x",
     "remx": "2.x.x",
     "semver": "5.x.x",
@@ -81,19 +83,13 @@
     "ts-node": "5.x.x",
     "tslint": "5.x.x",
     "typedoc": "0.x.x",
-    "typescript": "2.9.x"
-  },
-  "babel": {
-    "env": {
-      "test": {
-        "presets": [
-          "react-native"
-        ]
-      }
-    }
+    "typescript": "3.2.2"
   },
   "jest": {
     "preset": "react-native",
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
+    },
     "roots": [
       "<rootDir>/node_modules/",
       "<rootDir>/lib/dist/",
@@ -112,14 +108,6 @@
     ],
     "resetMocks": true,
     "resetModules": true,
-    "coverageThreshold": {
-      "global": {
-        "branches": 100,
-        "functions": 100,
-        "lines": 100,
-        "statements": 100
-      }
-    },
     "coverageReporters": [
       "json",
       "lcov",

playground/.flowconfig

@@ -1,65 +0,0 @@
-[ignore]
-
-# We fork some components by platform.
-.*/*.web.js
-.*/*.android.js
-
-# Some modules have their own node_modules with overlap
-.*/node_modules/node-haste/.*
-
-# Ugh
-.*/node_modules/babel.*
-.*/node_modules/babylon.*
-.*/node_modules/invariant.*
-
-# Ignore react and fbjs where there are overlaps, but don't ignore
-# anything that react-native relies on
-.*/node_modules/fbjs/lib/Map.js
-.*/node_modules/fbjs/lib/Promise.js
-.*/node_modules/fbjs/lib/fetch.js
-.*/node_modules/fbjs/lib/ExecutionEnvironment.js
-.*/node_modules/fbjs/lib/isEmpty.js
-.*/node_modules/fbjs/lib/crc32.js
-.*/node_modules/fbjs/lib/ErrorUtils.js
-
-# Flow has a built-in definition for the 'react' module which we prefer to use
-# over the currently-untyped source
-.*/node_modules/react/react.js
-.*/node_modules/react/lib/React.js
-.*/node_modules/react/lib/ReactDOM.js
-
-# Ignore commoner tests
-.*/node_modules/commoner/test/.*
-
-# See https://github.com/facebook/flow/issues/442
-.*/react-tools/node_modules/commoner/lib/reader.js
-
-# Ignore jest
-.*/node_modules/jest-cli/.*
-
-# Ignore Website
-.*/website/.*
-
-[include]
-
-[libs]
-node_modules/react-native/Libraries/react-native/react-native-interface.js
-
-[options]
-module.system=haste
-
-munge_underscores=true
-
-module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
-module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
-
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-
-[version]
-0.21.0

playground/android/app/build.gradle

@@ -2,7 +2,7 @@ apply plugin: "com.android.application"
 
 project.ext.react = [
         root     : "../../../",
-        entryFile: "playground/index.js"
+        entryFile: "index.js"
 ]
 
 apply from: "../../../node_modules/react-native/react.gradle"
@@ -28,7 +28,7 @@ android {
 
         testBuildType System.getProperty('testBuildType', 'debug')  //this will later be used to control the test apk build type
         missingDimensionStrategy "minReactNative", "minReactNative46"
-        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative51"
+        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative57_5"
         testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
     }
     signingConfigs {

playground/ios/playground.xcodeproj/project.pbxproj

@@ -876,7 +876,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../../node_modules/react-native/scripts/react-native-xcode.sh ./playground/index.js";
+			shellScript = "export NODE_BINARY=node\n../../node_modules/react-native/scripts/react-native-xcode.sh ./index.js";
 		};
 /* End PBXShellScriptBuildPhase section */
 

playground/src/context/index.js

@@ -0,0 +1,7 @@
+const React = require('react');
+const titleContext = React.createContext('Default title from Context');
+
+module.exports = {
+  TitleContext: titleContext,
+  Context: React.createContext('Default value from Context')
+}

playground/src/screens/ContextScreen.js

@@ -0,0 +1,59 @@
+const React = require('react');
+const { View, Text } = require('react-native');
+const testIDs = require('../testIDs');
+const { TitleContext, Context } = require('../context');
+
+class ContextScreen extends React.Component {
+  static contextType = Context;
+
+  static options() {
+    return {
+      topBar: {
+        title: {
+          text: 'My Screen'
+        },
+        background: {
+          color: 'red'
+        }
+      }
+    };
+  }
+
+  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>
+          <TitleContext.Consumer>
+            {title => (
+              <Text style={styles.h2} testID={testIDs.CENTERED_TEXT_HEADER}>{title}</Text>
+            )}
+          </TitleContext.Consumer>
+        </View>
+      </View>
+    );
+  }
+}
+
+module.exports = ContextScreen;
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'center'
+  },
+  h2: {
+    fontSize: 12,
+    textAlign: 'center',
+  },
+};

playground/src/screens/SearchScreen.js

@@ -14,7 +14,10 @@ const {
 const { Navigation } = require('react-native-navigation');
 const testIDs = require('../testIDs');
 
-const ITEMS = [...Array(200).keys()].map(key => ({ key: `Item ${key}` }));
+const ITEMS = [];
+for(let i = 0; i < 200; i++) {
+  ITEMS.push({key: `Item ${i}`});
+}
 
 class SearchControllerScreen extends Component {
   static get options() {
@@ -113,8 +116,8 @@ module.exports = SearchControllerScreen;
 const styles = StyleSheet.create({
   contentContainer: {},
   row: {
-    height: 50,
-    padding: 20,
+    height: 60,
+    padding: 15,
     justifyContent: 'center'
   },
   rowText: {

playground/src/screens/WelcomeScreen.js

@@ -41,6 +41,7 @@ class WelcomeScreen extends Component {
           <Button title='Push Lifecycle Screen' testID={testIDs.PUSH_LIFECYCLE_BUTTON} onPress={this.onClickLifecycleScreen} />
           <Button title='Static Lifecycle Events' testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
           <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
+          {false && <Button title='Push Context Screen' testID={testIDs.PUSH_CONTEXT_SCREEN_BUTTON} onPress={this.onClickPushContextScreen} />}
           {Platform.OS === 'ios' && <Button testID={testIDs.SHOW_PREVIEW_BUTTON} onPress={this.onClickPush} onPressIn={this.onClickShowPreview} title='Push Preview' />}
           <Button title='Push Options Screen' testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
           <Button title='Push External Component' testID={testIDs.PUSH_EXTERNAL_COMPONENT_BUTTON} onPress={this.onClickPushExternalComponent} />
@@ -293,6 +294,14 @@ class WelcomeScreen extends Component {
     });
   }
 
+  onClickPushContextScreen = async () => {
+    await Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.ContextScreen',
+      }
+    })
+  }
+
   onClickPushExternalComponent = async () => {
     await Navigation.push(this.props.componentId, {
       externalComponent: {

playground/src/screens/index.js

@@ -1,3 +1,4 @@
+const React = require('react');
 const { Navigation } = require('react-native-navigation');
 const WelcomeScreen = require('./WelcomeScreen');
 const TextScreen = require('./TextScreen');
@@ -27,6 +28,8 @@ const SearchScreen = require('./SearchScreen');
 const KeyboardScreen = require('./KeyboardScreen');
 const BottomTabSideMenuScreen = require('./complexlayouts/BottomTabSideMenuScreen');
 const FlatListScreen = require('./FlatListScreen');
+const ContextScreen = require('./ContextScreen');
+const { TitleContext } = require('../context');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -38,6 +41,11 @@ function registerScreens() {
   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'}>
+      <ContextScreen {...props} />
+    </TitleContext.Provider>
+  ), () => ContextScreen);
   Navigation.registerComponent(`navigation.playground.OptionsScreen`, () => OptionsScreen);
   Navigation.registerComponent(`navigation.playground.OrientationSelectScreen`, () => OrientationSelectScreen);
   Navigation.registerComponent(`navigation.playground.OrientationDetectScreen`, () => OrientationDetectScreen);

playground/src/testIDs.js

@@ -7,6 +7,7 @@ module.exports = {
   PUSH_LIFECYCLE_BUTTON: `PUSH_LIFECYCLE_BUTTON`,
   PUSH_STATIC_LIFECYCLE_BUTTON: `PUSH_STATIC_LIFECYCLE_BUTTON`,
   PUSH_BUTTON: `PUSH_BUTTON`,
+  PUSH_CONTEXT_SCREEN_BUTTON: `PUSH_CONTEXT_SCREEN_BUTTON`,
   SHOW_YELLOW_BOX: `SHOW_YELLOW_BOX`,
   SIDE_MENU_PUSH_BUTTON: `SIDE_MENU_PUSH_BUTTON`,
   LEFT_SIDE_MENU_PUSH_BUTTON: `leftSIDE_MENU_PUSH_BUTTON`,

rn-cli.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  getProjectRoots() {
-    return [__dirname, `${__dirname}/playground`];
-  }
-};

scripts/start.js

@@ -6,5 +6,5 @@ function run() {
   exec.killPort(8081);
   exec.execSync(`watchman watch-del-all || true`);
   exec.execSync(`adb reverse tcp:8081 tcp:8081 || true`);
-  exec.execSync(`node ./node_modules/react-native/local-cli/cli.js start --root ./playground/`);
+  exec.execSync(`node ./node_modules/react-native/local-cli/cli.js start`);
 }

scripts/test-unit.js

@@ -13,7 +13,7 @@ function run() {
 }
 
 function runAndroidUnitTests() {
-  const conf = release ? 'testReactNative51ReleaseUnitTest' : 'testReactNative51DebugUnitTest';
+  const conf = release ? 'testReactNative57_5ReleaseUnitTest' : 'testReactNative57_5DebugUnitTest';
 
   exec.execSync(`cd lib/android && ./gradlew ${conf}`);
 }

scripts/upload_artifacts.sh

@@ -0,0 +1,25 @@
+#!/bin/bash -e
+
+export AWS_ACCESS_KEY_ID=$AWS_ACCESS_KEY
+export AWS_SECRET_ACCESS_KEY=$AWS_ACCESS_SECRET
+
+DATE=`date '+%Y-%m-%d_%H-%M-%S'`
+
+if [ $JENKINS_CI ]; then
+  ARTIFACTS_NAME="artifacts_${BUILD_ID}_${DATE}.tar.gz"
+else
+  ARTIFACTS_NAME="artifacts_${TRAVIS_BUILD_ID}_${DATE}.tar.gz"
+fi
+
+if [ -d "detox/test/artifacts" ]; then
+  tar cvzf ${ARTIFACTS_NAME} ./detox/test/artifacts/
+
+  if [ $JENKINS_CI ]; then
+      echo "Jenkins has build in plugin"
+  else
+      aws s3 cp ${ARTIFACTS_NAME} s3://detox-artifacts/ --region=us-east-1
+  fi
+
+  echo "The artifacts archive is available for download at:"
+  echo "https://detox-artifacts.s3.amazonaws.com/${ARTIFACTS_NAME}"
+fi

wallaby.js

@@ -1,4 +1,4 @@
-const babelOptions = require('./package.json').babel.env.test;
+const babelOptions = require('./babel.config')().env.test;
 
 module.exports = function (wallaby) {
   return {