V2 custom component refactor (#2997)

* pass props for topBar background component

* refactored custom components

* pass props for topBar background component

* refactored custom components

* refactored RNNOptions object

* Use margin to control component position relative to TopBar

RelativeLayout rules caused excessive CPU usage due to issues with RN's
keyboard detection mechanism (based on global layout listener)

* Skip custom transition e2e on Android

* Improved the clarity of the top-level API doc (#2984)

I clarified some of the language here so that it is easier for the beginner to understand. (It was a little bit awkward before)

* Increase gradle daemon process memory

* Disable Orientation test on Android

* Fix SideMenu e2e

* Fix popTo

* Use margin instead of RelativeLayout rules to align component to BottomTabs

Rules caused excessive CPU usage due to RN issue with global layout listener
and keyboard visibility detection.

* Update README.md

for triggering build

* Update README.md

* Consolidate pop and animatePop

* Update top-level-api.md ... more copyediting. (#3002)

Further clarification of some of the top level API stuff.

* popTo animates top screen

* Refactor component options on Android

* Stop processing passProps from options

* removed comments

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

@@ -0,0 +1,40 @@
+package com.reactnativenavigation.parse;
+
+import com.reactnativenavigation.parse.params.NullText;
+import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.parse.parsers.TextParser;
+
+import org.json.JSONObject;
+
+public class Component {
+    public static Component parse(JSONObject json) {
+        Component result = new Component();
+        if (json == null) return result;
+
+        result.name = TextParser.parse(json, "name");
+        result.componentId = TextParser.parse(json, "componentId");
+        result.alignment = Alignment.fromString(TextParser.parse(json, "alignment").get(""));
+
+        return result;
+    }
+
+    public Text name = new NullText();
+    public Text componentId = new NullText();
+    public Alignment alignment = Alignment.Default;
+
+    void mergeWith(Component other) {
+        if (other.componentId.hasValue()) componentId = other.componentId;
+        if (other.name.hasValue()) name = other.name;
+        if (other.alignment != Alignment.Default) alignment = other.alignment;
+    }
+
+    public void mergeWithDefault(Component defaultOptions) {
+        if (!componentId.hasValue()) componentId = defaultOptions.componentId;
+        if (!name.hasValue()) name = defaultOptions.name;
+        if (alignment == Alignment.Default) alignment = defaultOptions.alignment;
+    }
+
+    public boolean hasValue() {
+        return name.hasValue();
+    }
+}

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

@@ -2,9 +2,7 @@ package com.reactnativenavigation.parse;
 
 import android.graphics.Typeface;
 import android.support.annotation.Nullable;
-import android.util.Log;
 
-import com.reactnativenavigation.BuildConfig;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.parse.params.NullColor;
@@ -22,19 +20,14 @@ public class TitleOptions {
 
     public static TitleOptions parse(TypefaceLoader typefaceManager, JSONObject json) {
         final TitleOptions options = new TitleOptions();
-        if (json == null) {
-            return options;
-        }
+        if (json == null) return options;
 
+        options.component = Component.parse(json.optJSONObject("component"));
         options.text = TextParser.parse(json, "text");
         options.color = ColorParser.parse(json, "color");
         options.fontSize = FractionParser.parse(json, "fontSize");
         options.fontFamily = typefaceManager.getTypeFace(json.optString("fontFamily", ""));
         options.alignment = Alignment.fromString(TextParser.parse(json, "alignment").get(""));
-        options.component = TextParser.parse(json, "component");
-        options.componentAlignment = Alignment.fromString(TextParser.parse(json, "componentAlignment").get(""));
-
-        validate(options);
 
         return options;
     }
@@ -44,8 +37,7 @@ public class TitleOptions {
     public Fraction fontSize = new NullFraction();
     public Alignment alignment = Alignment.Default;
     @Nullable public Typeface fontFamily;
-    public Text component = new NullText();
-    public Alignment componentAlignment = Alignment.Default;
+    public Component component = new Component();
 
     void mergeWith(final TitleOptions other) {
         if (other.text.hasValue()) text = other.text;
@@ -54,8 +46,6 @@ public class TitleOptions {
         if (other.fontFamily != null) fontFamily = other.fontFamily;
         if (other.alignment != Alignment.Default) alignment = other.alignment;
         if (other.component.hasValue()) component = other.component;
-        if (other.componentAlignment != Alignment.Default) componentAlignment = other.componentAlignment;
-        validate(this);
     }
 
     void mergeWithDefault(TitleOptions defaultOptions) {
@@ -64,15 +54,6 @@ public class TitleOptions {
         if (!fontSize.hasValue()) fontSize = defaultOptions.fontSize;
         if (fontFamily == null) fontFamily = defaultOptions.fontFamily;
         if (alignment == Alignment.Default) alignment = defaultOptions.alignment;
-        if (!component.hasValue()) component = defaultOptions.component;
-        if (componentAlignment == Alignment.Default) componentAlignment = defaultOptions.componentAlignment;
-        validate(this);
-    }
-
-    private static void validate(TitleOptions options) {
-        if (options.component.hasValue() && options.text.hasValue()) {
-            if (BuildConfig.DEBUG) Log.w("RNN", "A screen can't use both text and component - clearing text.");
-            options.text = new NullText();
-        }
+        component.mergeWithDefault(defaultOptions.component);
     }
 }

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

@@ -2,22 +2,17 @@ package com.reactnativenavigation.parse;
 
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.NullColor;
-import com.reactnativenavigation.parse.params.NullText;
-import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.parse.parsers.ColorParser;
-import com.reactnativenavigation.parse.parsers.TextParser;
 
 import org.json.JSONObject;
 
 public class TopBarBackgroundOptions {
     public static TopBarBackgroundOptions parse(JSONObject json) {
         TopBarBackgroundOptions options = new TopBarBackgroundOptions();
-        if (json == null) {
-            return options;
-        }
+        if (json == null) return options;
 
         options.color = ColorParser.parse(json, "color");
-        options.component = TextParser.parse(json, "component");
+        options.component = Component.parse(json.optJSONObject("component"));
 
         if (options.component.hasValue()) {
             options.color = new Color(android.graphics.Color.TRANSPARENT);
@@ -27,15 +22,15 @@ public class TopBarBackgroundOptions {
     }
 
     public Color color = new NullColor();
-    public Text component = new NullText();
+    public Component component = new Component();
 
     void mergeWith(final TopBarBackgroundOptions other) {
         if (other.color.hasValue()) color = other.color;
-        if (other.component.hasValue()) component = other.component;
+        component.mergeWith(other.component);
     }
 
     void mergeWithDefault(TopBarBackgroundOptions defaultOptions) {
         if (!color.hasValue()) color = defaultOptions.color;
-        if (!component.hasValue()) component = defaultOptions.component;
+        component.mergeWithDefault(defaultOptions.component);
     }
 }

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

@@ -2,7 +2,9 @@ package com.reactnativenavigation.parse;
 
 
 import android.support.annotation.Nullable;
+import android.util.Log;
 
+import com.reactnativenavigation.BuildConfig;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.NullBool;
@@ -33,6 +35,7 @@ public class TopBarOptions {
         options.leftButtons = Button.parseJsonArray(json.optJSONArray("leftButtons"));
         options.testId = TextParser.parse(json, "testID");
 
+        options.validate();
         return options;
     }
 
@@ -58,6 +61,7 @@ public class TopBarOptions {
         if (other.drawBehind.hasValue()) drawBehind = other.drawBehind;
         if (other.leftButtons != null) leftButtons = other.leftButtons;
         if (other.rightButtons != null) rightButtons = other.rightButtons;
+        validate();
     }
 
     void mergeWithDefault(TopBarOptions defaultOptions) {
@@ -71,5 +75,14 @@ public class TopBarOptions {
         if (leftButtons == null) leftButtons = defaultOptions.leftButtons;
         if (rightButtons == null) rightButtons = defaultOptions.rightButtons;
         if (!testId.hasValue()) testId = defaultOptions.testId;
+        validate();
+    }
+
+    private void validate() {
+        if (title.component.hasValue() && (title.text.hasValue() || subtitle.text.hasValue())) {
+            if (BuildConfig.DEBUG) Log.w("RNN", "A screen can't use both text and component - clearing text.");
+            title.text = new NullText();
+            subtitle.text = new NullText();
+        }
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/parse/params/Button.java

@@ -2,6 +2,7 @@ package com.reactnativenavigation.parse.params;
 
 import android.view.MenuItem;
 
+import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.parsers.BoolParser;
 import com.reactnativenavigation.parse.parsers.ColorParser;
 import com.reactnativenavigation.parse.parsers.NumberParser;
@@ -23,7 +24,7 @@ public class Button {
     private Text buttonFontWeight = new NullText();
     public Text icon = new NullText();
     public Text testId = new NullText();
-    public Text component = new NullText();
+    public Component component = new Component();
 
     private static Button parseJson(JSONObject json) {
         Button button = new Button();
@@ -36,7 +37,7 @@ public class Button {
         button.buttonFontSize = NumberParser.parse(json, "buttonFontSize");
         button.buttonFontWeight = TextParser.parse(json, "buttonFontWeight");
         button.testId = TextParser.parse(json, "testID");
-        button.component = TextParser.parse(json, "component");
+        button.component = Component.parse(json.optJSONObject("component"));
 
         if (json.has("icon")) {
             button.icon = TextParser.parse(json.optJSONObject("icon"), "uri");

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

@@ -47,7 +47,7 @@ public class OptionsPresenter {
 
     private void applyTopBarOptions(TopBarOptions options, AnimationsOptions animationOptions, Component component) {
         topBar.setTitle(options.title.text.get(""));
-        if (options.title.component.hasValue()) topBar.setTitleComponent(options.title.component.get(), options.title.componentAlignment);
+        if (options.title.component.hasValue()) topBar.setTitleComponent(options.title.component);
         topBar.setTitleFontSize(options.title.fontSize.get(defaultTitleFontSize));
         topBar.setTitleTextColor(options.title.color.get(DEFAULT_TITLE_COLOR));
         topBar.setTitleTypeface(options.title.fontFamily);
@@ -138,7 +138,7 @@ public class OptionsPresenter {
 
     private void mergeTopBarOptions(TopBarOptions options, AnimationsOptions animationsOptions, Component component) {
         if (options.title.text.hasValue()) topBar.setTitle(options.title.text.get());
-        if (options.title.component.hasValue()) topBar.setTitleComponent(options.title.component.get(), options.title.componentAlignment);
+        if (options.title.component.hasValue()) topBar.setTitleComponent(options.title.component);
         if (options.title.color.hasValue()) topBar.setTitleTextColor(options.title.color.get());
         if (options.title.fontSize.hasValue()) topBar.setTitleFontSize(options.title.fontSize.get());
         if (options.title.fontFamily != null) topBar.setTitleTypeface(options.title.fontFamily);

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

@@ -2,6 +2,7 @@ package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
 
+import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.views.titlebar.TitleBarReactView;
@@ -10,7 +11,7 @@ import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
 public class TitleBarReactViewController extends ViewController<TitleBarReactView> {
 
     private final TitleBarReactViewCreator reactViewCreator;
-    private String componentName;
+    private Component component;
 
     public TitleBarReactViewController(Activity activity, TitleBarReactViewCreator reactViewCreator) {
         super(activity, CompatUtils.generateViewId() + "", new Options());
@@ -32,7 +33,7 @@ public class TitleBarReactViewController extends ViewController<TitleBarReactVie
 
     @Override
     protected TitleBarReactView createView() {
-        return reactViewCreator.create(getActivity(), getId(), componentName);
+        return reactViewCreator.create(getActivity(), getId(), component.name.get());
     }
 
     @Override
@@ -40,7 +41,7 @@ public class TitleBarReactViewController extends ViewController<TitleBarReactVie
 
     }
 
-    public void setComponent(String componentName) {
-        this.componentName = componentName;
+    public void setComponent(Component component) {
+        this.component = component;
     }
 }

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

@@ -63,7 +63,7 @@ public class TopBarButtonController extends ViewController<TitleBarReactButtonVi
     @NonNull
     @Override
     protected TitleBarReactButtonView createView() {
-        view = (TitleBarReactButtonView) viewCreator.create(getActivity(), getId(), button.component.get());
+        view = (TitleBarReactButtonView) viewCreator.create(getActivity(), button.component.componentId.get(), button.component.name.get());
         return (TitleBarReactButtonView) view.asView();
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/topbar/TopBarBackgroundViewController.java

@@ -2,6 +2,7 @@ package com.reactnativenavigation.viewcontrollers.topbar;
 
 import android.app.Activity;
 
+import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.ViewController;
@@ -11,21 +12,21 @@ import com.reactnativenavigation.views.topbar.TopBarBackgroundViewCreator;
 public class TopBarBackgroundViewController extends ViewController<TopBarBackgroundView> {
 
     private TopBarBackgroundViewCreator viewCreator;
-    private String component;
+    private Component component;
 
     public TopBarBackgroundViewController(Activity activity, TopBarBackgroundViewCreator viewCreator) {
         super(activity, CompatUtils.generateViewId() + "", new Options());
         this.viewCreator = viewCreator;
     }
 
-    public TopBarBackgroundViewController(TopBarBackgroundViewController topBarBackgroundViewController) {
-        super(topBarBackgroundViewController.getActivity(), CompatUtils.generateViewId() + "", new Options());
-        this.viewCreator = topBarBackgroundViewController.viewCreator;
+    public TopBarBackgroundViewController(TopBarBackgroundViewController controller) {
+        super(controller.getActivity(), controller.getId(), controller.options);
+        this.viewCreator = controller.viewCreator;
     }
 
     @Override
     protected TopBarBackgroundView createView() {
-        return viewCreator.create(getActivity(), getId(), component);
+        return viewCreator.create(getActivity(), component.componentId.get(), component.name.get());
     }
 
     @Override
@@ -45,7 +46,7 @@ public class TopBarBackgroundViewController extends ViewController<TopBarBackgro
 
     }
 
-    public void setComponent(String component) {
+    public void setComponent(Component component) {
         this.component = component;
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/titlebar/TitleBar.java

@@ -10,6 +10,7 @@ import android.view.Gravity;
 import android.widget.TextView;
 
 import com.reactnativenavigation.parse.Alignment;
+import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.utils.UiUtils;
@@ -58,10 +59,11 @@ public class TitleBar extends Toolbar {
         if (color.hasValue()) setTitleTextColor(color.get());
     }
 
-    public void setComponent(String componentName, Alignment alignment) {
+    public void setComponent(Component component) {
         clearTitle();
-        reactViewController.setComponent(componentName);
-        addView(reactViewController.getView(), getComponentLayoutParams(alignment));
+        clearSubtitle();
+        reactViewController.setComponent(component);
+        addView(reactViewController.getView(), getComponentLayoutParams(component));
     }
 
     public void setBackgroundColor(Color color) {
@@ -191,9 +193,9 @@ public class TitleBar extends Toolbar {
         return new TopBarButtonController((Activity) getContext(), button, buttonCreator, onClickListener);
     }
 
-    public Toolbar.LayoutParams getComponentLayoutParams(Alignment alignment) {
+    public Toolbar.LayoutParams getComponentLayoutParams(Component component) {
         LayoutParams lp = new LayoutParams(MATCH_PARENT, getHeight());
-        if (alignment == Alignment.Center) {
+        if (component.alignment == Alignment.Center) {
             lp.gravity = Gravity.CENTER;
         }
         return lp;

lib/android/app/src/main/java/com/reactnativenavigation/views/topbar/TopBar.java

@@ -19,10 +19,10 @@ import com.reactnativenavigation.anim.TopBarCollapseBehavior;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Alignment;
 import com.reactnativenavigation.parse.AnimationOptions;
+import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Number;
-import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
@@ -119,13 +119,13 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         titleBar.setTitleAlignment(alignment);
     }
 
-    public void setTitleComponent(String componentName, Alignment alignment) {
-        titleBar.setComponent(componentName, alignment);
+    public void setTitleComponent(Component component) {
+        titleBar.setComponent(component);
     }
 
-    public void setBackgroundComponent(Text component) {
+    public void setBackgroundComponent(Component component) {
         if (component.hasValue()) {
-            topBarBackgroundViewController.setComponent(component.get());
+            topBarBackgroundViewController.setComponent(component);
             RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(MATCH_PARENT, getHeight());
             root.addView(topBarBackgroundViewController.getView(), 0, lp);
         }

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

@@ -41,7 +41,6 @@ public class OptionsTest extends BaseTest {
     private static final Typeface SUBTITLE_TYPEFACE = Typeface.create("HelveticaNeue-Condensed", Typeface.NORMAL);
     private static final String SUBTITLE_ALIGNMENT = "center";
     private static final Typeface TOP_BAR_TYPEFACE = Typeface.create("HelveticaNeue-CondensedBold", Typeface.BOLD);
-    private static final String TITLE_ALIGNMENT = "center";
     private static final Bool TOP_BAR_VISIBLE = new Bool(true);
     private static final Bool TOP_BAR_DRAW_BEHIND = new Bool(true);
     private static final Bool TOP_BAR_HIDE_ON_SCROLL = new Bool(true);
@@ -100,7 +99,6 @@ public class OptionsTest extends BaseTest {
         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.topBarOptions.title.componentAlignment).isEqualTo(Alignment.Center);
     }
 
     @NonNull
@@ -133,8 +131,7 @@ public class OptionsTest extends BaseTest {
                 .put("text", "the title")
                 .put("color", TOP_BAR_TEXT_COLOR)
                 .put("fontSize", TOP_BAR_FONT_SIZE)
-                .put("fontFamily", TOP_BAR_FONT_FAMILY)
-                .put("componentAlignment", TITLE_ALIGNMENT);
+                .put("fontFamily", TOP_BAR_FONT_FAMILY);
     }
 
     private JSONObject createSubtitle() throws JSONException {

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

@@ -190,7 +190,7 @@ public class OptionsApplyingTest extends BaseTest {
     @Test
     public void appliesTopBarComponent() throws Exception {
         JSONObject json = new JSONObject();
-        json.put("component", "someComponent");
+        json.put("component", new JSONObject().put("name","someComponent").put("componentId", "id"));
         uut.options.topBarOptions.background = TopBarBackgroundOptions.parse(json);
         uut.ensureViewIsCreated();
         stackController.push(uut);

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

@@ -84,7 +84,8 @@ public class OptionsMergingTest extends BaseTest {
 
         TitleOptions titleOptions = new TitleOptions();
         titleOptions.text = new Text("abc");
-        titleOptions.component = new Text("someComponent");
+        titleOptions.component.name = new Text("someComponent");
+        titleOptions.component.componentId = new Text("compId");
         titleOptions.color = new Color(0);
         titleOptions.fontSize = new Fraction(1.0f);
         titleOptions.fontFamily = Typeface.DEFAULT_BOLD;
@@ -140,11 +141,10 @@ public class OptionsMergingTest extends BaseTest {
         verify(topBar, times(1)).setTopTabFontFamily(1, Typeface.DEFAULT_BOLD);
     }
 
-
     private void assertTopBarOptions(int t) {
         verify(topBar, times(t)).setTitle(any());
         verify(topBar, times(t)).setSubtitle(any());
-        verify(topBar, times(t)).setTitleComponent(any(), any());
+        verify(topBar, times(t)).setTitleComponent(any());
         verify(topBar, times(t)).setBackgroundColor(any());
         verify(topBar, times(t)).setTitleTextColor(anyInt());
         verify(topBar, times(t)).setTitleFontSize(anyFloat());

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

@@ -9,6 +9,7 @@ import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Alignment;
+import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.react.ReactView;
@@ -60,7 +61,7 @@ public class TitleBarTest extends BaseTest {
     private void createButtons() {
         leftButton = new Button();
         leftButton.id = "back";
-        leftButton.title = new Text("jfjf");
+        leftButton.title = new Text("abc");
 
         textButton = new Button();
         textButton.id = "textButton";
@@ -68,7 +69,8 @@ public class TitleBarTest extends BaseTest {
 
         customButton = new Button();
         customButton.id = "customBtn";
-        customButton.component = new Text("com.rnn.customBtn");
+        customButton.component.name = new Text("com.rnn.customBtn");
+        customButton.component.componentId = new Text("component4");
     }
 
     @Test
@@ -83,7 +85,7 @@ public class TitleBarTest extends BaseTest {
         uut.setLeftButtons(leftButton(leftButton));
         uut.setRightButtons(rightButtons(customButton));
         ReactView btnView = (ReactView) uut.getMenu().getItem(0).getActionView();
-        assertThat(btnView.getComponentName()).isEqualTo(customButton.component.get());
+        assertThat(btnView.getComponentName()).isEqualTo(customButton.component.name.get());
     }
 
     @Test
@@ -144,14 +146,22 @@ public class TitleBarTest extends BaseTest {
 
     @Test
     public void setComponent_addsComponentToTitleBar() {
-        uut.setComponent("com.rnn.CustomView", Alignment.Center);
+        uut.setComponent(component("com.rnn.CustomView", Alignment.Center));
         verify(uut, times(1)).addView(any(TitleBarReactView.class), any(Toolbar.LayoutParams.class));
     }
 
+    private Component component(String name, Alignment alignment) {
+        Component component = new Component();
+        component.name = new Text(name);
+        component.alignment = alignment;
+        return component;
+    }
+
     @Test
     public void setComponent_alignFill() {
-        uut.setComponent("com.rnn.CustomView", Alignment.Fill);
-        verify(uut, times(1)).getComponentLayoutParams(Alignment.Fill);
+        Component component = component("com.rnn.CustomView", Alignment.Fill);
+        uut.setComponent(component);
+        verify(uut, times(1)).getComponentLayoutParams(component);
         ArgumentCaptor<Toolbar.LayoutParams> lpCaptor = ArgumentCaptor.forClass(Toolbar.LayoutParams.class);
         verify(uut, times(1)).addView(any(TitleBarReactView.class), lpCaptor.capture());
         assertThat(lpCaptor.getValue().width == ViewGroup.LayoutParams.MATCH_PARENT);
@@ -159,8 +169,9 @@ public class TitleBarTest extends BaseTest {
 
     @Test
     public void setComponent_alignCenter() {
-        uut.setComponent("com.rnn.CustomView", Alignment.Center);
-        verify(uut, times(1)).getComponentLayoutParams(Alignment.Center);
+        Component component = component("com.rnn.CustomView", Alignment.Center);
+        uut.setComponent(component);
+        verify(uut, times(1)).getComponentLayoutParams(component);
         ArgumentCaptor<Toolbar.LayoutParams> lpCaptor = ArgumentCaptor.forClass(Toolbar.LayoutParams.class);
         verify(uut, times(1)).addView(any(TitleBarReactView.class), lpCaptor.capture());
         assertThat(lpCaptor.getValue().width == ViewGroup.LayoutParams.WRAP_CONTENT);
@@ -169,7 +180,7 @@ public class TitleBarTest extends BaseTest {
 
     @Test
     public void clear() {
-        uut.setComponent("someComponent", Alignment.Center);
+        uut.setComponent(component("someComponent", Alignment.Center));
         uut.clear();
         assertThat(uut.getTitle()).isNullOrEmpty();
         assertThat(uut.getMenu().size()).isZero();

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

@@ -55,7 +55,8 @@ public class TopBarButtonControllerTest extends BaseTest {
     private Button createButton() {
         Button button = new Button();
         button.id = "btnId";
-        button.component = new Text("com.example.customBtn");
+        button.component.name = new Text("com.example.customBtn");
+        button.component.componentId = new Text("component666");
         return button;
     }
 }

lib/android/app/src/test/java/com/reactnativenavigation/views/TopBarBackgroundComponentTest.java

@@ -9,6 +9,7 @@ import com.reactnativenavigation.R;
 import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarBackgroundViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
@@ -47,7 +48,10 @@ public class TopBarBackgroundComponentTest extends BaseTest {
     @Test
     public void setBackgroundComponent() {
         uut.getLayoutParams().height = 100;
-        uut.setBackgroundComponent(new Text("someComponent"));
+        Component component = new Component();
+        component.name = new Text("someComponent");
+        component.componentId = new Text("id");
+        uut.setBackgroundComponent(component);
         TopBarBackgroundView background = (TopBarBackgroundView) ViewUtils.findChildrenByClassRecursive(uut, TopBarBackgroundView.class).get(0);
         assertThat(background).isNotNull();
         assertThat(background.getLayoutParams().width).isEqualTo(ViewGroup.LayoutParams.MATCH_PARENT);
@@ -56,13 +60,19 @@ public class TopBarBackgroundComponentTest extends BaseTest {
 
     @Test
     public void setBackgroundComponent_doesNotSetIfNoComponentIsDefined() {
-        uut.setBackgroundComponent(new Text("someComponent"));
+        Component component = new Component();
+        component.name = new Text("someComponent");
+        component.componentId = new Text("id");
+        uut.setBackgroundComponent(component);
         assertThat(uut.findViewById(R.id.topBarBackgroundComponent)).isNull();
     }
 
     @Test
     public void clear_componentIsDestroyed() {
-        uut.setBackgroundComponent(new Text("someComponent"));
+        Component component = new Component();
+        component.name = new Text("someComponent");
+        component.componentId = new Text("id");
+        uut.setBackgroundComponent(component);
         uut.clear();
         verify(topBarBackgroundViewController, times(1)).destroy();
     }

lib/ios/RNNBackgroundOptions.h

@@ -1,8 +1,9 @@
 #import "RNNOptions.h"
+#import "RNNComponentOptions.h"
 
 @interface RNNBackgroundOptions : RNNOptions
 
 @property (nonatomic, strong) NSNumber* color;
-@property (nonatomic, strong) NSString* component;
+@property (nonatomic, strong) RNNComponentOptions* component;
 
 @end

lib/ios/RNNComponentOptions.h

@@ -0,0 +1,9 @@
+#import "RNNOptions.h"
+
+@interface RNNComponentOptions : RNNOptions
+
+@property (nonatomic, strong) NSString* name;
+@property (nonatomic, strong) NSString* componentId;
+@property (nonatomic, strong) NSString* alignment;
+
+@end

lib/ios/RNNComponentOptions.m

@@ -0,0 +1,5 @@
+#import "RNNComponentOptions.h"
+
+@implementation RNNComponentOptions
+
+@end

lib/ios/RNNNavigationButtons.m

@@ -54,7 +54,7 @@
 -(RNNUIBarButtonItem*)buildButton: (NSDictionary*)dictionary {
 	NSString* buttonId = dictionary[@"id"];
 	NSString* title = dictionary[@"title"];
-	NSString* component = dictionary[@"component"];
+	NSString* component = dictionary[@"component"][@"name"];
 	
 	if (!buttonId) {
 		@throw [NSException exceptionWithName:@"NSInvalidArgumentException" reason:[@"button id is not specified " stringByAppendingString:title] userInfo:nil];

lib/ios/RNNNavigationOptions.m

@@ -36,7 +36,7 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 	self.animated = [options objectForKey:@"animated"];
 	self.customTransition = [[RNNAnimationOptions alloc] initWithDict:[options objectForKey:@"customTransition"]];
 	self.animations = [[RNNTransitionsOptions alloc] initWithDict:[options objectForKey:@"animations"]];
-	
+
 	return self;
 }
 

lib/ios/RNNOptions.m

@@ -1,10 +1,13 @@
 
 #import "RNNOptions.h"
+#import <objc/runtime.h>
 
 @implementation RNNOptions
 
--(instancetype)initWithDict:(NSDictionary *)dict {
+-(instancetype)	initWithDict:(NSDictionary *)dict {
 	self = [super init];
+	[self initializeOptionsPropertiesWithDict:dict];
+	
 	[self mergeWith:dict];
 	return self;
 }
@@ -44,4 +47,28 @@
 	return [self respondsToSelector:NSSelectorFromString(propName)];
 }
 
+- (void)initializeOptionsPropertiesWithDict:(NSDictionary*)dict {
+	unsigned int count;
+	objc_property_t* props = class_copyPropertyList([self class], &count);
+	for (int i = 0; i < count; i++) {
+		objc_property_t property = props[i];
+		NSString *propertyName = [NSString stringWithCString:property_getName(property) encoding:NSUTF8StringEncoding];
+		const char * type = property_getAttributes(property);
+		NSString * typeString = [NSString stringWithUTF8String:type];
+		NSArray * attributes = [typeString componentsSeparatedByString:@","];
+		NSString * typeAttribute = [attributes objectAtIndex:0];
+		
+		if ([typeAttribute hasPrefix:@"T@"] && [typeAttribute length] > 3) {
+			NSString * typeClassName = [typeAttribute substringWithRange:NSMakeRange(3, [typeAttribute length]-4)];
+			Class typeClass = NSClassFromString(typeClassName);
+			if ([typeClass isSubclassOfClass:[RNNOptions class]]) {
+				RNNOptions* value = [[typeClass alloc] initWithDict:dict[propertyName]];
+				[self setValue:value forKey:propertyName];
+			}
+		}
+		
+	}
+	free(props);
+}
+
 @end

lib/ios/RNNReactRootViewCreator.m

@@ -34,4 +34,8 @@
 	return view;
 }
 
+-(UIView*)createRootViewFromComponentOptions:(RNNComponentOptions*)componentOptions {
+	return [self createRootView:componentOptions.name rootViewId:componentOptions.componentId];
+}
+
 @end

lib/ios/RNNRootViewController.m

@@ -44,7 +44,6 @@
 -(void)viewWillAppear:(BOOL)animated{
 	[super viewWillAppear:animated];
 	[self.options applyOn:self];
-	[self optionsUpdated];
 }
 
 -(void)viewDidAppear:(BOOL)animated {
@@ -76,10 +75,10 @@
 }
 
 - (void)setCustomNavigationTitleView {
-	if (self.options.topBar.title.component) {
-		RCTRootView *reactView = (RCTRootView*)[_creator createRootView:self.options.topBar.title.component rootViewId:self.options.topBar.title.component];
+	if (self.options.topBar.title.component.name) {
+		RCTRootView *reactView = (RCTRootView*)[_creator createRootViewFromComponentOptions:self.options.topBar.title.component];
 
-		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:self.options.topBar.title.componentAlignment];
+		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:self.options.topBar.title.component.alignment];
         reactView.backgroundColor = UIColor.clearColor;
 		titleView.backgroundColor = UIColor.clearColor;
 		self.navigationItem.titleView = titleView;
@@ -89,8 +88,8 @@
 }
 
 - (void)setCustomNavigationBarView {
-	if (self.options.topBar.componentName) {
-		RCTRootView *reactView = (RCTRootView*)[_creator createRootView:self.options.topBar.componentName rootViewId:@"navBar"];
+	if (self.options.topBar.component.name) {
+		RCTRootView *reactView = (RCTRootView*)[_creator createRootViewFromComponentOptions:self.options.topBar.component];
 
 		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:@"fill"];
 		reactView.backgroundColor = UIColor.clearColor;
@@ -102,8 +101,8 @@
 }
 
 - (void)setCustomNavigationComponentBackground {
-	if (self.options.topBar.background.component) {
-		RCTRootView *reactView = (RCTRootView*)[_creator createRootView:self.options.topBar.background.component rootViewId:@"navBarBackground"];
+	if (self.options.topBar.background.component.name) {
+		RCTRootView *reactView = (RCTRootView*)[_creator createRootViewFromComponentOptions:self.options.topBar.background.component];
 
 		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:@"fill"];
 		[self.navigationController.navigationBar insertSubview:titleView atIndex:1];

lib/ios/RNNRootViewCreator.h

@@ -1,10 +1,12 @@
 
 #import <UIKit/UIKit.h>
-
+#import "RNNComponentOptions.h"
 
 @protocol RNNRootViewCreator
 
 -(UIView*)createRootView:(NSString*)name rootViewId:(NSString*)rootViewId;
 
+-(UIView*)createRootViewFromComponentOptions:(RNNComponentOptions*)componentOptions;
+
 @end
 

lib/ios/RNNTitleOptions.h

@@ -1,5 +1,6 @@
 #import "RNNOptions.h"
 #import "RNNSubtitleOptions.h"
+#import "RNNComponentOptions.h"
 
 @interface RNNTitleOptions : RNNOptions
 
@@ -8,7 +9,7 @@
 @property (nonatomic, strong) NSNumber* color;
 @property (nonatomic, strong) NSString* fontFamily;
 
-@property (nonatomic, strong) NSString* component;
+@property (nonatomic, strong) RNNComponentOptions* component;
 @property (nonatomic, strong) NSString* componentAlignment;
 
 @property (nonatomic, strong) RNNSubtitleOptions* subtitle;

lib/ios/RNNTopBarOptions.h

@@ -2,6 +2,7 @@
 #import "RNNTitleOptions.h"
 #import "RNNSubtitleOptions.h"
 #import "RNNBackgroundOptions.h"
+#import "RNNComponentOptions.h"
 
 @interface RNNTopBarOptions : RNNOptions
 
@@ -26,6 +27,6 @@
 @property (nonatomic, strong) NSString* backButtonTitle;
 @property (nonatomic, strong) NSNumber* hideBackButtonTitle;
 
-@property (nonatomic, strong) NSString* componentName;
+@property (nonatomic, strong) RNNComponentOptions* component;
 
 @end

lib/ios/RNNTopBarOptions.m

@@ -15,9 +15,7 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 
 - (instancetype)initWithDict:(NSDictionary *)dict {
 	self = [super initWithDict:dict];
-	self.title = [[RNNTitleOptions alloc] initWithDict:dict[@"title"]];
-	self.subtitle = [[RNNSubtitleOptions alloc] initWithDict:dict[@"subtitle"]];
-	self.background = [[RNNBackgroundOptions alloc] initWithDict:dict[@"background"]];
+	
 	self.title.subtitle = self.subtitle;
 	
 	return self;

lib/ios/RNNTransitionsOptions.m

@@ -4,7 +4,7 @@
 
 - (instancetype)initWithDict:(NSDictionary *)dict {
 	self = [super init];
-
+	
 	[self mergeWith:dict];
 	
 	return self;

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -63,6 +63,8 @@
 		390AD478200F499D00A8250D /* RNNSwizzles.m in Sources */ = {isa = PBXBuildFile; fileRef = 390AD476200F499D00A8250D /* RNNSwizzles.m */; };
 		5016E8EF20209690009D4F7C /* RNNCustomTitleView.h in Headers */ = {isa = PBXBuildFile; fileRef = 5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */; };
 		5016E8F020209690009D4F7C /* RNNCustomTitleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */; };
+		50175CD1207A2AA1004FE91B /* RNNComponentOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50175CCF207A2AA1004FE91B /* RNNComponentOptions.h */; };
+		50175CD2207A2AA1004FE91B /* RNNComponentOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50175CD0207A2AA1004FE91B /* RNNComponentOptions.m */; };
 		50415CBA20553B8E00BB682E /* RNNScreenTransition.h in Headers */ = {isa = PBXBuildFile; fileRef = 50415CB820553B8E00BB682E /* RNNScreenTransition.h */; };
 		50415CBB20553B8E00BB682E /* RNNScreenTransition.m in Sources */ = {isa = PBXBuildFile; fileRef = 50415CB920553B8E00BB682E /* RNNScreenTransition.m */; };
 		50451D052042DAEB00695F00 /* RNNPushAnimation.h in Headers */ = {isa = PBXBuildFile; fileRef = 50451D032042DAEB00695F00 /* RNNPushAnimation.h */; };
@@ -256,6 +258,8 @@
 		390AD476200F499D00A8250D /* RNNSwizzles.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNSwizzles.m; sourceTree = "<group>"; };
 		5016E8ED2020968F009D4F7C /* RNNCustomTitleView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNNCustomTitleView.h; sourceTree = "<group>"; };
 		5016E8EE2020968F009D4F7C /* RNNCustomTitleView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNNCustomTitleView.m; sourceTree = "<group>"; };
+		50175CCF207A2AA1004FE91B /* RNNComponentOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNComponentOptions.h; sourceTree = "<group>"; };
+		50175CD0207A2AA1004FE91B /* RNNComponentOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNComponentOptions.m; sourceTree = "<group>"; };
 		50415CB820553B8E00BB682E /* RNNScreenTransition.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNScreenTransition.h; sourceTree = "<group>"; };
 		50415CB920553B8E00BB682E /* RNNScreenTransition.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNScreenTransition.m; sourceTree = "<group>"; };
 		50451D032042DAEB00695F00 /* RNNPushAnimation.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNPushAnimation.h; sourceTree = "<group>"; };
@@ -491,6 +495,8 @@
 				504AFE631FFE53070076E904 /* RNNOptions.m */,
 				E83BAD691F27362500A9F3DD /* RNNNavigationOptions.h */,
 				E83BAD6A1F27363A00A9F3DD /* RNNNavigationOptions.m */,
+				50175CCF207A2AA1004FE91B /* RNNComponentOptions.h */,
+				50175CD0207A2AA1004FE91B /* RNNComponentOptions.m */,
 				A7626BFE1FC2FB6700492FB8 /* RNNTopBarOptions.h */,
 				A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */,
 				50570B242061473D006A1B5C /* RNNTitleOptions.h */,
@@ -794,6 +800,7 @@
 				E8A5CD521F464F0400E89D0D /* RNNAnimator.h in Headers */,
 				50451D0D2042F70900695F00 /* RNNTransition.h in Headers */,
 				507F43F81FF525B500D9425B /* RNNSegmentedControl.h in Headers */,
+				50175CD1207A2AA1004FE91B /* RNNComponentOptions.h in Headers */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -933,6 +940,7 @@
 				261F0E651E6EC94900989DE2 /* RNNModalManager.m in Sources */,
 				E8A5CD631F49114F00E89D0D /* RNNElement.m in Sources */,
 				504AFE751FFFF0540076E904 /* RNNTopTabsOptions.m in Sources */,
+				50175CD2207A2AA1004FE91B /* RNNComponentOptions.m in Sources */,
 				7BEF0D1D1E43771B003E96B0 /* RNNLayoutNode.m in Sources */,
 				7BA500781E254908001B9E1B /* RNNSplashScreen.m in Sources */,
 				504AFE651FFE53070076E904 /* RNNOptions.m in Sources */,

lib/src/commands/Commands.test.ts

@@ -314,7 +314,7 @@ describe('Commands', () => {
     beforeEach(() => {
       cb = jest.fn();
       const mockParser = { parse: () => 'parsed' };
-      const mockCrawler = { crawl: (x) => x };
+      const mockCrawler = { crawl: (x) => x, processOptions: (x) => x };
       commandsObserver.register(cb);
       uut = new Commands(mockCommandsSender, mockParser, mockCrawler, commandsObserver);
     });

lib/src/commands/Commands.ts

@@ -1,16 +1,12 @@
 import * as _ from 'lodash';
-import { OptionsProcessor } from './OptionsProcessor';
 import { CommandsObserver } from '../events/CommandsObserver';
 
 export class Commands {
-  private optionsProcessor: OptionsProcessor;
-
   constructor(
     private readonly nativeCommandsSender,
     private readonly layoutTreeParser,
     private readonly layoutTreeCrawler,
     private readonly commandsObserver: CommandsObserver) {
-    this.optionsProcessor = new OptionsProcessor(this.layoutTreeCrawler.store);
   }
 
   public setRoot(simpleApi) {
@@ -25,7 +21,7 @@ export class Commands {
 
   public setDefaultOptions(options) {
     const input = _.cloneDeep(options);
-    this.optionsProcessor.processOptions(input);
+    this.layoutTreeCrawler.processOptions(input);
 
     this.nativeCommandsSender.setDefaultOptions(input);
     this.commandsObserver.notify('setDefaultOptions', { options });
@@ -33,7 +29,7 @@ export class Commands {
 
   public setOptions(componentId, options) {
     const input = _.cloneDeep(options);
-    this.optionsProcessor.processOptions(input);
+    this.layoutTreeCrawler.processOptions(input);
 
     this.nativeCommandsSender.setOptions(componentId, input);
     this.commandsObserver.notify('setOptions', { componentId, options });

lib/src/commands/LayoutTreeCrawler.ts

@@ -20,7 +20,8 @@ export class LayoutTreeCrawler {
     private readonly uniqueIdProvider: any,
     public readonly store: any) {
     this.crawl = this.crawl.bind(this);
-    this.optionsProcessor = new OptionsProcessor(store);
+    this.processOptions = this.processOptions.bind(this);
+    this.optionsProcessor = new OptionsProcessor(store, uniqueIdProvider);
   }
 
   crawl(node: LayoutNode): void {
@@ -31,10 +32,14 @@ export class LayoutTreeCrawler {
     if (node.type === LayoutType.Component) {
       this._handleComponent(node);
     }
-    this.optionsProcessor.processOptions(node.data.options);
+    this.processOptions(node.data.options);
     _.forEach(node.children, this.crawl);
   }
 
+  processOptions(options) {
+    this.optionsProcessor.processOptions(options);
+  }
+
   _handleComponent(node) {
     this._assertComponentDataName(node);
     this._savePropsToStore(node);

lib/src/commands/LayoutType.test.ts

@@ -1,6 +1,6 @@
 import { LayoutType, isLayoutType } from './LayoutType';
 
-describe.only('LayoutType', () => {
+describe('LayoutType', () => {
   it('is an enum', () => {
     expect(LayoutType.Component).toEqual('Component');
     expect(LayoutType.Stack).toEqual('Stack');

lib/src/commands/OptionsProcessor.test.ts

@@ -1,5 +1,7 @@
 import { OptionsProcessor } from './OptionsProcessor';
+import { UniqueIdProvider } from '../adapters/UniqueIdProvider';
 import { Store } from '../components/Store';
+import * as _ from 'lodash';
 
 describe('navigation options', () => {
   let uut: OptionsProcessor;
@@ -8,7 +10,7 @@ describe('navigation options', () => {
   beforeEach(() => {
     options = {};
     store = new Store();
-    uut = new OptionsProcessor(store);
+    uut = new OptionsProcessor(store, new UniqueIdProvider());
   });
 
   it('processes colors into numeric AARRGGBB', () => {
@@ -111,6 +113,41 @@ describe('navigation options', () => {
     expect(store.getPropsForId('1')).toEqual(passProps);
   });
 
+  it('passProps for custom component', () => {
+    const passProps = { color: '#ff0000', some: 'thing' };
+    options.component = { passProps, name: 'a' };
+
+    uut.processOptions({ o: options });
+
+    expect(store.getPropsForId(options.component.componentId)).toEqual(passProps);
+    expect(Object.keys(options.component)).not.toContain('passProps');
+  });
+
+  it('generate component id for component in options', () => {
+    options.component = { name: 'a' };
+
+    uut.processOptions({ o: options });
+
+    expect(options.component.componentId).toBeDefined();
+  });
+
+  it('passProps from options are not processed', () => {
+    const passProps = { color: '#ff0000', some: 'thing' };
+    const clonedProps = _.cloneDeep(passProps);
+    options.component = { passProps, name: 'a' };
+
+    uut.processOptions(options);
+    expect(store.getPropsForId(options.component.componentId)).toEqual(clonedProps);
+  });
+
+  it('pass supplied componentId for component in options', () => {
+    options.component = { name: 'a', id: 'Component1' };
+
+    uut.processOptions({ o: options });
+
+    expect(options.component.componentId).toEqual('Component1');
+  });
+
   it('passProps must be with id next to it', () => {
     const passProps = { prop: 'prop' };
     options.rightButtons = [{ passProps }];

lib/src/commands/OptionsProcessor.ts

@@ -3,17 +3,18 @@ import { processColor } from 'react-native';
 import * as resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
 
 export class OptionsProcessor {
-  constructor(public store) { }
+  constructor(public store, public uniqueIdProvider) { }
 
   public processOptions(options) {
     _.forEach(options, (value, key) => {
       if (!value) { return; }
 
+      this.processComponent(key, value, options);
       this.processColor(key, value, options);
       this.processImage(key, value, options);
       this.processButtonsPassProps(key, value);
 
-      if (_.isObject(value) || _.isArray(value)) {
+      if (!_.isEqual(key, 'passProps') && (_.isObject(value) || _.isArray(value))) {
         this.processOptions(value);
       }
     });
@@ -40,4 +41,14 @@ export class OptionsProcessor {
       });
     }
   }
+
+  private processComponent(key, value, options) {
+    if (_.isEqual(key, 'component')) {
+      value.componentId = value.id ? value.id : this.uniqueIdProvider.generate('CustomComponent');
+      if (value.passProps) {
+        this.store.setPropsForId(value.componentId, value.passProps);
+      }
+      options[key] = _.omit(value, 'passProps');
+    }
+  }
 }

playground/src/screens/OptionsScreen.js

@@ -32,7 +32,12 @@ class OptionsScreen extends Component {
           alignment: 'center'
         },
         background: {
-          component: 'TopBarBackground'
+          component: {
+            name: 'TopBarBackground',
+            passProps: {
+              color: '#bbdefb'
+            }
+          }
         },
         ...Platform.select({
           android: { drawBehind: true },
@@ -49,7 +54,9 @@ class OptionsScreen extends Component {
           {
             id: CUSTOM_BUTTON2,
             testID: CUSTOM_BUTTON2,
-            component: 'CustomRoundedButton'
+            component: {
+              name: 'CustomRoundedButton'
+            }
           },
           {
             id: BUTTON_ONE,
@@ -263,8 +270,10 @@ class OptionsScreen extends Component {
     Navigation.setOptions(this.props.componentId, {
       topBar: {
         title: {
-          component: 'navigation.playground.CustomTopBar',
-          componentAlignment: 'center'
+          component: {
+            name: 'navigation.playground.CustomTopBar',
+            alignment: 'center'
+          }
         }
       }
     });

playground/src/screens/TopBarBackground.js

@@ -10,7 +10,7 @@ class TopBarBackground extends Component {
   constructor(props) {
     super(props);
     this.state = {};
-    this.dots = new Array(55).fill('').map((ignored, i) => <View key={'dot' + i} style={styles.dot}/>);
+    this.dots = new Array(55).fill('').map((ignored, i) => <View key={'dot' + i} style={[styles.dot, {backgroundColor: this.props.color}]}/>);
   }
 
   componentDidAppear() {
@@ -51,7 +51,6 @@ const styles = StyleSheet.create({
     height: 16,
     width: 16,
     borderRadius: 8,
-    margin: 4,
-    backgroundColor: '#bbdefb'
+    margin: 4
   }
 });