External component (#2846)

* External Component implementation

* Limit External component e2e to Android for now

e2e/ScreenStack.test.js

     await expect(elementByLabel('Screen 1')).toBeVisible();
   });
 
-  it(':ios: push native component with options', async () => {
-    await elementById(testIDs.PUSH_NATIVE_COMPONENT_BUTTON).tap();
-    await expect(elementById('TestLabel')).toBeVisible();
+  it(':android: push external component with options', async () => {
+    await elementById(testIDs.PUSH_EXTERNAL_COMPONENT_BUTTON).tap();
+    await expect(elementByLabel('This is an external component')).toBeVisible();
     await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
   });
 });

lib/android/app/src/main/java/com/reactnativenavigation/NavigationActivity.java

 package com.reactnativenavigation;
 
-import android.os.*;
-import android.support.annotation.*;
-import android.support.v7.app.*;
-import android.view.*;
-import android.widget.*;
+import android.os.Bundle;
+import android.support.annotation.Nullable;
+import android.support.v7.app.AppCompatActivity;
+import android.view.KeyEvent;
 
-import com.facebook.react.modules.core.*;
-import com.reactnativenavigation.viewcontrollers.*;
+import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
+import com.reactnativenavigation.viewcontrollers.Navigator;
 
 public class NavigationActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
 	private Navigator navigator;
 	public Navigator getNavigator() {
 		return navigator;
 	}
-
-	public void toast(final String text) {
-		Toast.makeText(this, text, Toast.LENGTH_LONG).show();
-	}
 }

lib/android/app/src/main/java/com/reactnativenavigation/NavigationApplication.java

 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.reactnativenavigation.react.ReactGateway;
+import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 public abstract class NavigationApplication extends Application implements ReactApplication {
 
 	private ReactGateway reactGateway;
 	public static NavigationApplication instance;
+	final Map<String, ExternalComponentCreator> externalComponents = new HashMap<>();
 
 	@Override
 	public void onCreate() {
      */
 	@Nullable
 	public abstract List<ReactPackage> createAdditionalReactPackages();
+
+    /**
+     * Register a native View which can be displayed using the given {@code name}
+     * @param name Unique name used to register the native view
+     * @param creator Used to create the view at runtime
+     */
+    public void registerExternalComponent(String name, ExternalComponentCreator creator) {
+        if (externalComponents.containsKey(name)) {
+            throw new RuntimeException("A component has already been registered with this name: " + name);
+        }
+        externalComponents.put(name, creator);
+    }
+
+    public final Map<String, ExternalComponentCreator> getExternalComponents() {
+        return externalComponents;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/parse/ExternalComponent.java

 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.parse.parsers.TextParser;
 
+import org.json.JSONException;
 import org.json.JSONObject;
 
 public class ExternalComponent {
 
-    public Text classCreator = new NullText();
+    public Text name = new NullText();
+    public JSONObject passProps = new JSONObject();
 
     public static ExternalComponent parse(JSONObject json) {
         ExternalComponent options = new ExternalComponent();
             return options;
         }
 
-        options.classCreator = TextParser.parse(json, "classCreator");
-        if (!options.classCreator.hasValue()) {
-            throw new RuntimeException("ExternalClass must declare classCreator - a fully qualified method name");
+        options.name = TextParser.parse(json, "name");
+        if (!options.name.hasValue()) {
+            throw new RuntimeException("ExternalComponent must have a name");
         }
-
+        options.passProps = parsePassProps(json);
         return options;
     }
 
+    private static JSONObject parsePassProps(JSONObject json) {
+        if (json.has("passProps")) {
+            try {
+                return json.getJSONObject("passProps");
+            } catch (JSONException e) {
+                e.printStackTrace();
+            }
+        }
+        return new JSONObject();
+    }
+
     public void mergeWith(ExternalComponent other) {
-        if (other.classCreator.hasValue()) {
-            classCreator = other.classCreator;
+        if (other.name.hasValue()) {
+            name = other.name;
+        }
+        if (other.passProps.length() > 0) {
+            passProps = other.passProps;
         }
     }
 
     public void mergeWithDefault(ExternalComponent defaultOptions) {
-        if (!classCreator.hasValue()) {
-            classCreator = defaultOptions.classCreator;
+        if (!name.hasValue()) {
+            name = defaultOptions.name;
+        }
+        if (passProps.length() == 0) {
+            passProps = defaultOptions.passProps;
         }
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutFactory.java

 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.NoOpPromise;
 import com.reactnativenavigation.utils.TypefaceLoader;
-import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController;
 import com.reactnativenavigation.viewcontrollers.ComponentViewController;
 import com.reactnativenavigation.viewcontrollers.SideMenuController;
 import com.reactnativenavigation.viewcontrollers.StackController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController;
+import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
+import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentViewController;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsController;
 import com.reactnativenavigation.views.ComponentViewCreator;
 import com.reactnativenavigation.views.TopTabsLayoutCreator;
 
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Map;
 
 public class LayoutFactory {
 
 	private final Activity activity;
 	private final ReactInstanceManager reactInstanceManager;
+    private Map<String, ExternalComponentCreator> externalComponentCreators;
     private Options defaultOptions;
     private final TypefaceLoader typefaceManager;
 
-    public LayoutFactory(Activity activity, final ReactInstanceManager reactInstanceManager, Options defaultOptions) {
+    public LayoutFactory(Activity activity, final ReactInstanceManager reactInstanceManager, Map<String, ExternalComponentCreator> externalComponentCreators, Options defaultOptions) {
 		this.activity = activity;
 		this.reactInstanceManager = reactInstanceManager;
+        this.externalComponentCreators = externalComponentCreators;
         this.defaultOptions = defaultOptions;
         typefaceManager = new TypefaceLoader(activity);
     }
 		switch (node.type) {
 			case Component:
 				return createComponent(node);
+            case ExternalComponent:
+                return createExternalComponent(node);
 			case Stack:
 				return createStack(node);
 			case BottomTabs:
         );
 	}
 
+    private ViewController createExternalComponent(LayoutNode node) {
+        final Options options = Options.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
+        ExternalComponent externalComponent = ExternalComponent.parse(node.data);
+        return new ExternalComponentViewController(activity,
+                node.id,
+                externalComponent,
+                externalComponentCreators.get(externalComponent.name.get()),
+                options
+        );
+    }
+
 	private ViewController createStack(LayoutNode node) {
         final Options options = Options.parse(typefaceManager, node.getNavigationOptions(), defaultOptions);
 		StackController stackController = new StackController(activity, node.id, options);

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutNode.java

 public class LayoutNode {
 	public enum Type {
 		Component,
+        ExternalComponent,
 		Stack,
 		BottomTabs,
 		SideMenuRoot,

lib/android/app/src/main/java/com/reactnativenavigation/parse/Options.java

         result.fabOptions = FabOptions.parse(json.optJSONObject("fab"));
         result.animationsOptions = AnimationsOptions.parse(json.optJSONObject("animations"));
         result.sideMenuRootOptions = SideMenuRootOptions.parse(json.optJSONObject("sideMenu"));
-        result.externalComponent = ExternalComponent.parse(json.optJSONObject("externalComponent"));
 
         return result.withDefaultOptions(defaultOptions);
     }
     @NonNull public FabOptions fabOptions = new FabOptions();
     @NonNull public AnimationsOptions animationsOptions = new AnimationsOptions();
     @NonNull public SideMenuRootOptions sideMenuRootOptions = new SideMenuRootOptions();
-    @NonNull public ExternalComponent externalComponent = new ExternalComponent();
 
     void setTopTabIndex(int i) {
         topTabOptions.tabIndex = i;
         result.fabOptions.mergeWith(fabOptions);
         result.animationsOptions.mergeWith(animationsOptions);
         result.sideMenuRootOptions.mergeWith(sideMenuRootOptions);
-        result.externalComponent.mergeWith(externalComponent);
         return result;
     }
 
         result.fabOptions.mergeWith(other.fabOptions);
         result.animationsOptions.mergeWith(other.animationsOptions);
         result.sideMenuRootOptions.mergeWith(other.sideMenuRootOptions);
-        result.externalComponent.mergeWith(other.externalComponent);
         return result;
     }
 
         fabOptions.mergeWithDefault(other.fabOptions);
         animationsOptions.mergeWithDefault(other.animationsOptions);
         sideMenuRootOptions.mergeWithDefault(other.sideMenuRootOptions);
-        externalComponent.mergeWithDefault(other.externalComponent);
         return this;
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/presentation/FabOptionsPresenter.java

 
 import com.reactnativenavigation.R;
 import com.reactnativenavigation.parse.FabOptions;
-import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.views.Fab;
 import com.reactnativenavigation.views.FabMenu;
 import com.reactnativenavigation.views.ReactComponent;

lib/android/app/src/main/java/com/reactnativenavigation/presentation/OptionsPresenter.java

 
 import android.app.Activity;
 
-import com.reactnativenavigation.parse.OrientationOptions;
-import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.OrientationOptions;
 import com.reactnativenavigation.parse.TopBarOptions;
 import com.reactnativenavigation.parse.TopTabOptions;
 import com.reactnativenavigation.parse.TopTabsOptions;
-import com.reactnativenavigation.views.ReactComponent;
+import com.reactnativenavigation.parse.params.Button;
+import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.views.Component;
 import com.reactnativenavigation.views.TopBar;
 
 import java.util.ArrayList;
 
 public class OptionsPresenter {
     private TopBar topBar;
-    private ReactComponent component;
+    private Component component;
 
-    public OptionsPresenter(TopBar topBar, ReactComponent component) {
+    public OptionsPresenter(TopBar topBar, Component component) {
         this.topBar = topBar;
         this.component = component;
     }
         }
 
         if (options.hideOnScroll.isTrue()) {
-            topBar.enableCollapse(component.getScrollEventListener());
+            if (component instanceof IReactView) {
+                topBar.enableCollapse(((IReactView) component).getScrollEventListener());
+            }
         } else if (options.hideOnScroll.isTrue()) {
             topBar.disableCollapse();
         }

lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

 import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.ReadableMap;
 import com.reactnativenavigation.NavigationActivity;
+import com.reactnativenavigation.NavigationApplication;
 import com.reactnativenavigation.parse.LayoutFactory;
 import com.reactnativenavigation.parse.LayoutNode;
-import com.reactnativenavigation.parse.parsers.LayoutNodeParser;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.parsers.LayoutNodeParser;
 import com.reactnativenavigation.utils.TypefaceLoader;
 import com.reactnativenavigation.utils.UiThread;
 import com.reactnativenavigation.viewcontrollers.Navigator;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 
 import org.json.JSONObject;
 
+import java.util.Map;
+
 public class NavigationModule extends ReactContextBaseJavaModule {
 	private static final String NAME = "RNNBridgeModule";
 	private final ReactInstanceManager reactInstanceManager;
 		handle(() -> navigator().dismissOverlay(componentId));
 	}
 
-	private NavigationActivity activity() {
-		return (NavigationActivity) getCurrentActivity();
-	}
-
 	private Navigator navigator() {
 		return activity().getNavigator();
 	}
 
 	@NonNull
 	private LayoutFactory newLayoutFactory() {
-		return new LayoutFactory(activity(), reactInstanceManager, navigator().getDefaultOptions());
+		return new LayoutFactory(activity(),
+                reactInstanceManager,
+                externalComponentCreator(),
+                navigator().getDefaultOptions()
+        );
 	}
 
+	private Map<String, ExternalComponentCreator> externalComponentCreator() {
+        return ((NavigationApplication) activity().getApplication()).getExternalComponents();
+    }
+
 	private void handle(Runnable task) {
 		if (activity() == null || activity().isFinishing()) return;
 		UiThread.post(task);
 	}
+
+    private NavigationActivity activity() {
+        return (NavigationActivity) getCurrentActivity();
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ParentController.java

 import android.view.ViewGroup;
 
 import com.reactnativenavigation.parse.Options;
-import com.reactnativenavigation.views.ReactComponent;
+import com.reactnativenavigation.views.Component;
 
 import java.util.Collection;
 
 	}
 
 	@Override
-    public boolean containsComponent(ReactComponent component) {
+    public boolean containsComponent(Component component) {
         if (super.containsComponent(component)) {
             return true;
         }
     }
 
     @CallSuper
-    public void applyOptions(Options options, ReactComponent childComponent) {
+    public void applyOptions(Options options, Component childComponent) {
         mergeChildOptions(options);
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/SideMenuController.java

 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.NavigationOptionsListener;
 import com.reactnativenavigation.presentation.SideMenuOptionsPresenter;
-import com.reactnativenavigation.views.ReactComponent;
+import com.reactnativenavigation.views.Component;
 
 import java.util.ArrayList;
 import java.util.Collection;
 	}
 
     @Override
-    public void applyOptions(Options options, ReactComponent childComponent) {
+    public void applyOptions(Options options, Component childComponent) {
         super.applyOptions(options, childComponent);
         applyOnParentController(parentController ->
                 ((ParentController) parentController).applyOptions(this.options, childComponent)

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/StackController.java

 import com.reactnativenavigation.anim.NavigationAnimator;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.utils.NoOpPromise;
+import com.reactnativenavigation.views.Component;
 import com.reactnativenavigation.views.ReactComponent;
 import com.reactnativenavigation.views.StackLayout;
 import com.reactnativenavigation.views.TopBar;
     }
 
     @Override
-    public void applyOptions(Options options, ReactComponent component) {
+    public void applyOptions(Options options, Component component) {
         super.applyOptions(options, component);
         getView().applyOptions(this.options, component);
         applyOnParentController(parentController ->
                 ((ParentController) parentController).applyOptions(this.options.copy().clearTopBarOptions(), component)
         );
-        fabOptionsPresenter.applyOptions(options.fabOptions, component, getView());
+        if (component instanceof ReactComponent) {
+            fabOptionsPresenter.applyOptions(options.fabOptions, (ReactComponent) component, getView());
+        }
         animator.setOptions(options.animationsOptions);
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ViewController.java

 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.utils.StringUtils;
 import com.reactnativenavigation.utils.Task;
-import com.reactnativenavigation.views.ReactComponent;
+import com.reactnativenavigation.views.Component;
 
 public abstract class ViewController<T extends ViewGroup> implements ViewTreeObserver.OnGlobalLayoutListener {
 
         return isSameId(id) ? this : null;
     }
 
-    public boolean containsComponent(ReactComponent component) {
+    public boolean containsComponent(Component component) {
         return getView().equals(component);
     }
 
         applyOptions(options);
         applyOnParentController(parentController -> {
             parentController.clearOptions();
-            if (getView() instanceof ReactComponent) parentController.applyOptions(options, (ReactComponent) getView());
+            if (getView() instanceof Component) parentController.applyOptions(options, (Component) getView());
         });
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabFinder.java

 import android.support.annotation.IntRange;
 
 import com.reactnativenavigation.viewcontrollers.ViewController;
-import com.reactnativenavigation.views.ReactComponent;
+import com.reactnativenavigation.views.Component;
 
 import java.util.List;
 
     private List<ViewController> tabs;
 
     @IntRange(from = -1)
-    public int findByComponent(ReactComponent component) {
+    int findByComponent(Component component) {
         for (int i = 0; i < tabs.size(); i++) {
             if (tabs.get(i).containsComponent(component)) {
                 return i;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java

 import com.reactnativenavigation.viewcontrollers.ParentController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.BottomTabs;
-import com.reactnativenavigation.views.ReactComponent;
+import com.reactnativenavigation.views.Component;
 
 import java.util.ArrayList;
 import java.util.Collection;
     }
 
     @Override
-    public void applyOptions(Options options, ReactComponent childComponent) {
+    public void applyOptions(Options options, Component childComponent) {
         super.applyOptions(options, childComponent);
         int tabIndex = bottomTabFinder.findByComponent(childComponent);
         if (tabIndex >= 0) new BottomTabsOptionsPresenter(bottomTabs, bottomTabFinder).present(this.options, tabIndex);

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/externalcomponent/ExternalComponent.java

+package com.reactnativenavigation.viewcontrollers.externalcomponent;
+
+import android.view.View;
+
+public interface ExternalComponent {
+    View asView();
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/externalcomponent/ExternalComponentCreator.java

+package com.reactnativenavigation.viewcontrollers.externalcomponent;
+
+import android.support.v4.app.FragmentActivity;
+
+import org.json.JSONObject;
+
+public interface ExternalComponentCreator {
+    ExternalComponent create(FragmentActivity activity, JSONObject props);
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/externalcomponent/ExternalComponentViewController.java

+package com.reactnativenavigation.viewcontrollers.externalcomponent;
+
+import android.app.Activity;
+import android.support.v4.app.FragmentActivity;
+
+import com.reactnativenavigation.parse.ExternalComponent;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.views.ExternalComponentLayout;
+
+public class ExternalComponentViewController extends ViewController<ExternalComponentLayout> {
+    private final ExternalComponent externalComponent;
+    private final ExternalComponentCreator componentCreator;
+
+    public ExternalComponentViewController(Activity activity, String id, ExternalComponent externalComponent, ExternalComponentCreator componentCreator, Options initialOptions) {
+        super(activity, id, initialOptions);
+        this.externalComponent = externalComponent;
+        this.componentCreator = componentCreator;
+    }
+
+    @Override
+    public void applyOptions(Options options) {
+        getView().applyOptions(options);
+    }
+
+    @Override
+    protected ExternalComponentLayout createView() {
+        ExternalComponentLayout content = new ExternalComponentLayout(getActivity());
+        content.addView(componentCreator.create(getActivity(), externalComponent.passProps).asView());
+        return content;
+    }
+
+    @Override
+    public void sendOnNavigationButtonPressed(String buttonId) {
+
+    }
+
+    public FragmentActivity getActivity() {
+        return (FragmentActivity) super.getActivity();
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/toptabs/TopTabsController.java

 import com.reactnativenavigation.viewcontrollers.ParentController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.ViewVisibilityListenerAdapter;
-import com.reactnativenavigation.views.ReactComponent;
+import com.reactnativenavigation.views.Component;
 import com.reactnativenavigation.views.TopTabsLayoutCreator;
 import com.reactnativenavigation.views.TopTabsViewPager;
 
     }
 
     @Override
-    public void applyOptions(Options options, ReactComponent childComponent) {
+    public void applyOptions(Options options, Component childComponent) {
         super.applyOptions(options, childComponent);
         applyOnParentController(parentController -> {
                 Options opt = this.options.copy();

lib/android/app/src/main/java/com/reactnativenavigation/views/ExternalComponentLayout.java

+package com.reactnativenavigation.views;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+import android.widget.FrameLayout;
+import android.widget.RelativeLayout;
+
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.presentation.ComponentOptionsPresenter;
+
+import static android.widget.RelativeLayout.BELOW;
+
+@SuppressLint("ViewConstructor")
+public class ExternalComponentLayout extends FrameLayout implements Component {
+    public ExternalComponentLayout(Context context) {
+		super(context);
+        setContentDescription("ExternalComponentLayout");
+    }
+
+    @Override
+    public void applyOptions(Options options) {
+        new ComponentOptionsPresenter(this).present(options);
+    }
+
+    @Override
+    public void drawBehindTopBar() {
+        if (getParent() instanceof RelativeLayout) {
+            RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) getLayoutParams();
+            layoutParams.removeRule(BELOW);
+            setLayoutParams(layoutParams);
+        }
+    }
+
+    @Override
+    public void drawBelowTopBar(TopBar topBar) {
+        if (getParent() instanceof RelativeLayout) {
+            RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) getLayoutParams();
+            layoutParams.addRule(BELOW, topBar.getId());
+            setLayoutParams(layoutParams);
+        }
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/views/StackLayout.java

         new OptionsPresenter(topBar).applyOrientation(options.orientationOptions);
     }
 
-    public void applyOptions(Options options, ReactComponent component) {
+    public void applyOptions(Options options, Component component) {
         new OptionsPresenter(topBar, component).applyOptions(options);
     }
 

lib/android/app/src/test/java/com/reactnativenavigation/parse/OptionsTest.java

     private static final String BOTTOM_TABS_BADGE = "3";
     private static final String BOTTOM_TABS_CURRENT_TAB_ID = "ComponentId";
     private static final Number BOTTOM_TABS_CURRENT_TAB_INDEX = new Number(1);
-    private static final String EXTERNAL_CLASS_CREATOR = "com.rnn.creators.Creator.createFragment";
     private TypefaceLoader mockLoader;
 
     @Override
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar(TOP_BAR_VISIBLE.get()))
                 .put("fab", createFab())
-                .put("externalComponent", createExternalComponent())
                 .put("bottomTabs", createBottomTabs());
         Options result = Options.parse(mockLoader, json);
         assertResult(result);
         assertThat(result.fabOptions.hideOnScroll.get()).isEqualTo(FAB_HIDE_ON_SCROLL);
         assertThat(result.fabOptions.alignVertically.get()).isEqualTo(FAB_ALIGN_VERTICALLY);
         assertThat(result.fabOptions.alignHorizontally.get()).isEqualTo(FAB_ALIGN_HORIZONTALLY);
-        assertThat(result.externalComponent.classCreator.get()).isEqualTo(EXTERNAL_CLASS_CREATOR);
     }
 
     @NonNull
                 .put("visible", FAB_VISIBLE);
     }
 
-    private JSONObject createExternalComponent() throws JSONException {
-        return new JSONObject()
-                .put("classCreator", EXTERNAL_CLASS_CREATOR);
-    }
-
     @NonNull
     private JSONObject createOtherFab() throws JSONException {
         return new JSONObject()
                 .put("tabBadge", BOTTOM_TABS_BADGE);
     }
 
-    private JSONObject createOtherExternalClass() {
-        return new JSONObject();
-    }
-
     @Test
     public void mergeDoesNotMutate() throws Exception {
         JSONObject json1 = new JSONObject();
         JSONObject json = new JSONObject()
                 .put("topBar", createTopBar(TOP_BAR_VISIBLE.get()))
                 .put("fab", createFab())
-                .put("bottomTabs", createBottomTabs())
-                .put("externalComponent", createExternalComponent());
+                .put("bottomTabs", createBottomTabs());
         Options defaultOptions = Options.parse(mockLoader, json);
         Options options = new Options();
 
         JSONObject defaultJson = new JSONObject()
                 .put("topBar", createOtherTopBar())
                 .put("fab", createOtherFab())
-                .put("bottomTabs", createOtherBottomTabs())
-                .put("externalComponent", createExternalComponent());
+                .put("bottomTabs", createOtherBottomTabs());
         Options defaultOptions = Options.parse(mockLoader, defaultJson);
 
         JSONObject json = new JSONObject()

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/ExternalComponentViewControllerTest.java

+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+import android.support.v4.app.FragmentActivity;
+import android.widget.FrameLayout;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.parse.ExternalComponent;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentViewController;
+import com.reactnativenavigation.viewcontrollers.externalcomponent.FragmentCreatorMock;
+import com.reactnativenavigation.views.ExternalComponentLayout;
+
+import org.json.JSONObject;
+import org.junit.Test;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.spy;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+
+public class ExternalComponentViewControllerTest extends BaseTest {
+    private ExternalComponentViewController uut;
+    private FragmentCreatorMock componentCreator;
+    private Activity activity;
+    private ExternalComponent ec;
+
+    @Override
+    public void beforeEach() {
+        componentCreator = spy(new FragmentCreatorMock());
+        activity = newActivity();
+        ec = createExternalComponent();
+        uut = spy(new ExternalComponentViewController(activity,
+                "fragmentId",
+                ec,
+                componentCreator,
+                new Options())
+        );
+    }
+
+    private ExternalComponent createExternalComponent() {
+        ExternalComponent component = new ExternalComponent();
+        component.name = new Text("fragmentComponent");
+        component.passProps = new JSONObject();
+        return component;
+    }
+
+    @Test
+    public void createView_returnsFrameLayout() throws Exception {
+        ExternalComponentLayout view = uut.getView();
+        assertThat(FrameLayout.class.isAssignableFrom(view.getClass())).isTrue();
+    }
+
+    @Test
+    public void createView_createsExternalComponent() throws Exception {
+        ExternalComponentLayout view = uut.getView();
+        verify(componentCreator, times(1)).create((FragmentActivity) activity, ec.passProps);
+        assertThat(view.getChildCount()).isGreaterThan(0);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/externalcomponent/FragmentCreatorMock.java

+package com.reactnativenavigation.viewcontrollers.externalcomponent;
+
+import android.app.Activity;
+import android.app.FragmentManager;
+import android.app.FragmentTransaction;
+import android.support.v4.app.FragmentActivity;
+import android.widget.FrameLayout;
+
+import com.reactnativenavigation.R;
+
+import org.json.JSONObject;
+
+public class FragmentCreatorMock implements ExternalComponentCreator {
+    @Override
+    public ExternalComponent create(FragmentActivity activity, JSONObject props) {
+        return createContent(activity);
+    }
+
+    private ExternalComponent createContent(Activity activity) {
+        FrameLayout content = new FrameLayout(activity) {
+            @Override
+            protected void onAttachedToWindow() {
+                super.onAttachedToWindow();
+                FragmentManager fm = activity.getFragmentManager();
+                FragmentTransaction ft = fm.beginTransaction();
+                ft.add(R.id.fragment_screen_content, new SomeFragment());
+                ft.commitAllowingStateLoss();
+            }
+        };
+        content.setId(R.id.fragment_screen_content);
+        return () -> content;
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/externalcomponent/SomeFragment.java

+package com.reactnativenavigation.viewcontrollers.externalcomponent;
+
+import android.app.Fragment;
+
+public class SomeFragment extends Fragment {
+    public SomeFragment() {
+    }
+}

lib/src/commands/LayoutTreeParser.ts

     return {
       id: api.id,
       type: LayoutType.ExternalComponent,
-      data: { name: api.className, options: api.options, passProps: api.passProps },
+      data: { name: api.name, options: api.options, passProps: api.passProps },
       children: []
     };
   }

playground/android/app/src/main/java/com/reactnativenavigation/playground/FragmentComponent.java

+package com.reactnativenavigation.playground;
+
+import android.os.Bundle;
+import android.support.annotation.NonNull;
+import android.support.v4.app.FragmentActivity;
+import android.support.v4.app.FragmentManager;
+import android.support.v4.app.FragmentTransaction;
+import android.view.View;
+import android.widget.FrameLayout;
+
+import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponent;
+
+import org.json.JSONObject;
+
+public class FragmentComponent implements ExternalComponent {
+    private final FrameLayout content;
+
+    FragmentComponent(FragmentActivity activity, JSONObject props) {
+        content = new FrameLayout(activity) {
+            @Override
+            protected void onAttachedToWindow() {
+                super.onAttachedToWindow();
+                addFragmentAfterContainerIsAttached(activity, props);
+            }
+        };
+        content.setId(R.id.fragment_screen_content);
+    }
+
+    private void addFragmentAfterContainerIsAttached(FragmentActivity activity, JSONObject props) {
+        FragmentManager fm = activity.getSupportFragmentManager();
+        FragmentTransaction transaction = fm.beginTransaction();
+        transaction.add(R.id.fragment_screen_content, createFragment(props));
+        transaction.commitAllowingStateLoss();
+    }
+
+    @NonNull
+    private FragmentScreen createFragment(JSONObject props) {
+        FragmentScreen fragment = new FragmentScreen();
+        Bundle args = new Bundle();
+        args.putString("text", props.optString("text", ""));
+        fragment.setArguments(args);
+        return fragment;
+    }
+
+    @Override
+    public View asView() {
+        return content;
+    }
+}

playground/android/app/src/main/java/com/reactnativenavigation/playground/FragmentCreator.java

+package com.reactnativenavigation.playground;
+
+import android.support.v4.app.FragmentActivity;
+
+import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponent;
+import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
+
+import org.json.JSONObject;
+
+public class FragmentCreator implements ExternalComponentCreator {
+    @Override
+    public ExternalComponent create(FragmentActivity activity, JSONObject props) {
+        return new FragmentComponent(activity, props);
+    }
+}

playground/android/app/src/main/java/com/reactnativenavigation/playground/FragmentScreen.java

+package com.reactnativenavigation.playground;
+
+import android.os.Bundle;
+import android.support.annotation.Nullable;
+import android.support.v4.app.Fragment;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.TextView;
+
+public class FragmentScreen extends Fragment {
+    @Nullable
+    @Override
+    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
+        View view = inflater.inflate(R.layout.fragment_screen, container, false);
+        ((TextView) view.findViewById(R.id.text)).setText(getArguments().getString("text"));
+        return view;
+    }
+}

playground/android/app/src/main/java/com/reactnativenavigation/playground/MainApplication.java

 package com.reactnativenavigation.playground;
 
-import android.support.annotation.*;
+import android.support.annotation.Nullable;
 
-import com.facebook.react.*;
-import com.reactnativenavigation.*;
+import com.facebook.react.ReactPackage;
+import com.reactnativenavigation.NavigationApplication;
 
-import java.util.*;
+import java.util.List;
 
 public class MainApplication extends NavigationApplication {
 
+    @Override
+    public void onCreate() {
+        super.onCreate();
+        registerExternalComponent("RNNCustomComponent", new FragmentCreator());
+    }
+
     @Override
     public boolean isDebug() {
         return BuildConfig.DEBUG;

playground/android/app/src/main/res/layout/fragment_screen.xml

+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@android:color/holo_green_light">
+
+    <TextView
+        android:id="@+id/text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_centerInParent="true"
+        android:text="@string/app_name"/>
+</RelativeLayout>

playground/src/screens/WelcomeScreen.js

         <Button title='Static Lifecycle Events' testID={testIDs.PUSH_STATIC_LIFECYCLE_BUTTON} onPress={this.onClickShowStaticLifecycleOverlay} />
         <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
         <Button title='Push Options Screen' testID={testIDs.PUSH_OPTIONS_BUTTON} onPress={this.onClickPushOptionsScreen} />
-        <Button title='Push Native Component' testID={testIDs.PUSH_NATIVE_COMPONENT_BUTTON} onPress={this.onClickPushExternalComponent} />
+        <Button title='Push External Component' testID={testIDs.PUSH_EXTERNAL_COMPONENT_BUTTON} onPress={this.onClickPushExternalComponent} />
         {Platform.OS === 'android' && <Button title='Push Top Tabs screen' testID={testIDs.PUSH_TOP_TABS_BUTTON} onPress={this.onClickPushTopTabsScreen} />}
         {Platform.OS === 'android' && <Button title='Back Handler' testID={testIDs.BACK_HANDLER_BUTTON} onPress={this.onClickBackHandler} />}
         <Button title='Show Modal' testID={testIDs.SHOW_MODAL_BUTTON} onPress={this.onClickShowModal} />
   async onClickPushExternalComponent() {
     await Navigation.push(this.props.componentId, {
       externalComponent: {
-        className: 'RNNCustomViewController',
+        name: 'RNNCustomComponent',
+        passProps: {
+          text: 'This is an external component'
+        },
         options: {
           topBar: {
             title: 'pushed',

playground/src/testIDs.js

   OK_BUTTON: `OK_BUTTON`,
   MODAL_WITH_STACK_BUTTON: `MODAL_WITH_STACK_BUTTON`,
   CUSTOM_TRANSITION_BUTTON: `CUSTOM_TRANSITION_BUTTON`,
-  PUSH_NATIVE_COMPONENT_BUTTON: `PUSH_NATIVE_COMPONENT_BUTTON`,
+  PUSH_EXTERNAL_COMPONENT_BUTTON: `PUSH_EXTERNAL_COMPONENT_BUTTON`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,