[Breaking] Top bar API changes (#2895)

* Refactor TopBar options, introduce title options

* Update background to new api

* Refactored topBar options on iOS

* Initial react component in TitleBar android

* set height to react view in TitleBar

* fix tests and lint

* ios unit tests fix

e2e/Orientations.test.js

@@ -8,14 +8,16 @@ describe('orientation', () => {
 
   beforeEach(async () => {
     await device.relaunchApp();
-    waitForDeviceToSettleAfterOrientationChangeAndroid = ms => new Promise(res => setTimeout(res, device.getPlatform() === 'ios' ? 0 : 150));
+    waitForDeviceToSettleAfterOrientationChangeAndroid = ms => new Promise(res => setTimeout(res, device.getPlatform() === 'ios' ? 0 : 400));
   });
 
   it('default allows all', async () => {
     await elementById(testIDs.ORIENTATION_BUTTON).tap();
     await elementById(testIDs.DEFAULT_ORIENTATION_BUTTON).tap();
+    waitForDeviceToSettleAfterOrientationChangeAndroid();
     await expect(elementById(testIDs.PORTRAIT_ELEMENT)).toBeVisible();
     await device.setOrientation('landscape');
+    waitForDeviceToSettleAfterOrientationChangeAndroid();
     await expect(elementById(testIDs.LANDSCAPE_ELEMENT)).toBeVisible();
     await device.setOrientation('portrait');
     waitForDeviceToSettleAfterOrientationChangeAndroid();
@@ -28,6 +30,7 @@ describe('orientation', () => {
     await elementById(testIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BUTTON).tap();
     await expect(element(by.id(testIDs.PORTRAIT_ELEMENT))).toBeVisible();
     await device.setOrientation('landscape');
+    waitForDeviceToSettleAfterOrientationChangeAndroid();
     await expect(element(by.id(testIDs.LANDSCAPE_ELEMENT))).toBeVisible();
     await device.setOrientation('portrait');
     waitForDeviceToSettleAfterOrientationChangeAndroid();

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

@@ -15,6 +15,7 @@ import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalCompo
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentViewController;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsController;
 import com.reactnativenavigation.views.ComponentViewCreator;
+import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
 import com.reactnativenavigation.views.TopBarButtonCreator;
 import com.reactnativenavigation.views.TopTabsLayoutCreator;
 
@@ -118,7 +119,12 @@ public class LayoutFactory {
     }
 
 	private ViewController createStack(LayoutNode node) {
-        StackController stackController = new StackController(activity, new TopBarButtonCreator(reactInstanceManager), node.id, getOptions(node));
+        StackController stackController = new StackController(activity,
+                new TopBarButtonCreator(reactInstanceManager),
+                new TitleBarReactViewCreator(reactInstanceManager),
+                node.id,
+                getOptions(node)
+        );
         addChildrenToStack(node.children, stackController);
         return stackController;
 	}

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

@@ -0,0 +1,75 @@
+package com.reactnativenavigation.parse;
+
+import android.graphics.Typeface;
+import android.support.annotation.Nullable;
+
+import com.reactnativenavigation.parse.params.Color;
+import com.reactnativenavigation.parse.params.Fraction;
+import com.reactnativenavigation.parse.params.NullColor;
+import com.reactnativenavigation.parse.params.NullFraction;
+import com.reactnativenavigation.parse.params.NullText;
+import com.reactnativenavigation.parse.params.Text;
+import com.reactnativenavigation.parse.parsers.ColorParser;
+import com.reactnativenavigation.parse.parsers.FractionParser;
+import com.reactnativenavigation.parse.parsers.TextParser;
+import com.reactnativenavigation.utils.TypefaceLoader;
+
+import org.json.JSONObject;
+
+public class TitleOptions {
+    public enum Alignment {
+        Center, Fill, Default;
+
+        public static Alignment fromString(String alignment) {
+            switch (alignment) {
+                case "center":
+                    return Center;
+                case "fill":
+                    return Fill;
+                default:
+                    return Default;
+            }
+        }
+    }
+
+    public static TitleOptions parse(TypefaceLoader typefaceManager, JSONObject json) {
+        final TitleOptions options = new TitleOptions();
+        if (json == null) {
+            return options;
+        }
+
+        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.component = TextParser.parse(json, "component");
+        options.alignment = Alignment.fromString(TextParser.parse(json, "alignment").get(""));
+
+        return options;
+    }
+
+    public Text text = new NullText();
+    public Color color = new NullColor();
+    public Fraction fontSize = new NullFraction();
+    @Nullable public Typeface fontFamily;
+    public Text component = new NullText();
+    public Alignment alignment = Alignment.Default;
+
+    void mergeWith(final TitleOptions other) {
+        if (other.text.hasValue()) text = other.text;
+        if (other.color.hasValue()) color = other.color;
+        if (other.fontSize.hasValue()) fontSize = other.fontSize;
+        if (other.fontFamily != null) fontFamily = other.fontFamily;
+        if (other.component.hasValue()) component = other.component;
+        if (other.alignment != Alignment.Default) alignment = other.alignment;
+    }
+
+    void mergeWithDefault(TitleOptions defaultOptions) {
+        if (!text.hasValue()) text = defaultOptions.text;
+        if (!color.hasValue()) color = defaultOptions.color;
+        if (!fontSize.hasValue()) fontSize = defaultOptions.fontSize;
+        if (fontFamily == null) fontFamily = defaultOptions.fontFamily;
+        if (!component.hasValue()) component = defaultOptions.component;
+        if (alignment == Alignment.Default) alignment = defaultOptions.alignment;
+    }
+}

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

@@ -0,0 +1,30 @@
+package com.reactnativenavigation.parse;
+
+import com.reactnativenavigation.parse.params.Color;
+import com.reactnativenavigation.parse.params.NullColor;
+import com.reactnativenavigation.parse.parsers.ColorParser;
+
+import org.json.JSONObject;
+
+public class TopBarBackground {
+    public static TopBarBackground parse(JSONObject json) {
+        TopBarBackground options = new TopBarBackground();
+        if (json == null) {
+            return options;
+        }
+
+        options.color = ColorParser.parse(json, "color");
+
+        return options;
+    }
+
+    public Color color = new NullColor();
+
+    void mergeWith(final TopBarBackground other) {
+        if (other.color.hasValue()) color = other.color;
+    }
+
+    void mergeWithDefault(TopBarBackground defaultOptions) {
+        if (!color.hasValue()) color = defaultOptions.color;
+    }
+}

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

@@ -1,21 +1,14 @@
 package com.reactnativenavigation.parse;
 
 
-import android.graphics.Typeface;
 import android.support.annotation.Nullable;
 
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Button;
-import com.reactnativenavigation.parse.params.Color;
-import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.parse.params.NullBool;
-import com.reactnativenavigation.parse.params.NullColor;
-import com.reactnativenavigation.parse.params.NullFraction;
 import com.reactnativenavigation.parse.params.NullText;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.parse.parsers.BoolParser;
-import com.reactnativenavigation.parse.parsers.ColorParser;
-import com.reactnativenavigation.parse.parsers.FractionParser;
 import com.reactnativenavigation.parse.parsers.TextParser;
 import com.reactnativenavigation.utils.TypefaceLoader;
 
@@ -29,11 +22,8 @@ public class TopBarOptions implements DEFAULT_VALUES {
         TopBarOptions options = new TopBarOptions();
         if (json == null) return options;
 
-        options.title = TextParser.parse(json, "title");
-        options.backgroundColor = ColorParser.parse(json, "backgroundColor");
-        options.textColor = ColorParser.parse(json, "textColor");
-        options.textFontSize = FractionParser.parse(json, "textFontSize");
-        options.textFontFamily = typefaceManager.getTypeFace(json.optString("textFontFamily", ""));
+        options.title = TitleOptions.parse(typefaceManager, json.optJSONObject("title"));
+        options.background = TopBarBackground.parse(json.optJSONObject("background"));
         options.visible = BoolParser.parse(json, "visible");
         options.animate = BoolParser.parse(json,"animate");
         options.hideOnScroll = BoolParser.parse(json,"hideOnScroll");
@@ -45,12 +35,9 @@ public class TopBarOptions implements DEFAULT_VALUES {
         return options;
     }
 
-    public Text title = new NullText();
+    public TitleOptions title = new TitleOptions();
     public Text testId = new NullText();
-    public Color backgroundColor = new NullColor();
-    public Color textColor = new NullColor();
-    public Fraction textFontSize = new NullFraction();
-    @Nullable public Typeface textFontFamily;
+    public TopBarBackground background = new TopBarBackground();
     public Bool visible = new NullBool();
     public Bool animate = new NullBool();
     public Bool hideOnScroll = new NullBool();
@@ -59,62 +46,26 @@ public class TopBarOptions implements DEFAULT_VALUES {
     @Nullable public ArrayList<Button> rightButtons;
 
     void mergeWith(final TopBarOptions other) {
-        if (other.testId.hasValue()) {
-            testId = other.testId;
-        }
-        if (other.title.hasValue())
-            title = other.title;
-        if (other.backgroundColor.hasValue())
-            backgroundColor = other.backgroundColor;
-        if (other.textColor.hasValue())
-            textColor = other.textColor;
-        if (other.textFontSize.hasValue())
-            textFontSize = other.textFontSize;
-        if (other.textFontFamily != null)
-            textFontFamily = other.textFontFamily;
-        if (other.visible.hasValue()) {
-            visible = other.visible;
-        }
-        if (other.animate.hasValue()) {
-            animate = other.animate;
-        }
-        if (other.hideOnScroll.hasValue()) {
-            hideOnScroll = other.hideOnScroll;
-        }
-        if (other.drawBehind.hasValue()) {
-            drawBehind = other.drawBehind;
-        }
-        if (other.leftButtons != null)
-            leftButtons = other.leftButtons;
-        if (other.rightButtons != null)
-            rightButtons = other.rightButtons;
+        title.mergeWith(other.title);
+        background.mergeWith(other.background);
+        if (other.testId.hasValue()) testId = other.testId;
+        if (other.visible.hasValue()) visible = other.visible;
+        if (other.animate.hasValue()) animate = other.animate;
+        if (other.hideOnScroll.hasValue()) hideOnScroll = other.hideOnScroll;
+        if (other.drawBehind.hasValue()) drawBehind = other.drawBehind;
+        if (other.leftButtons != null) leftButtons = other.leftButtons;
+        if (other.rightButtons != null) rightButtons = other.rightButtons;
     }
 
     void mergeWithDefault(TopBarOptions defaultOptions) {
-        if (title == null)
-            title = defaultOptions.title;
-        if (!backgroundColor.hasValue())
-            backgroundColor = defaultOptions.backgroundColor;
-        if (!textColor.hasValue())
-            textColor = defaultOptions.textColor;
-        if (!textFontSize.hasValue())
-            textFontSize = defaultOptions.textFontSize;
-        if (textFontFamily == null)
-            textFontFamily = defaultOptions.textFontFamily;
-        if (!visible.hasValue())
-            visible = defaultOptions.visible;
-        if (!animate.hasValue())
-            animate = defaultOptions.animate;
-        if (!hideOnScroll.hasValue())
-            hideOnScroll = defaultOptions.hideOnScroll;
-        if (!drawBehind.hasValue())
-            drawBehind = defaultOptions.drawBehind;
-        if (leftButtons == null)
-            leftButtons = defaultOptions.leftButtons;
-        if (rightButtons == null)
-            rightButtons = defaultOptions.rightButtons;
-        if (!testId.hasValue()) {
-            testId = defaultOptions.testId;
-        }
+        title.mergeWithDefault(defaultOptions.title);
+        background.mergeWithDefault(defaultOptions.background);
+        if (!visible.hasValue()) visible = defaultOptions.visible;
+        if (!animate.hasValue()) animate = defaultOptions.animate;
+        if (!hideOnScroll.hasValue()) hideOnScroll = defaultOptions.hideOnScroll;
+        if (!drawBehind.hasValue()) drawBehind = defaultOptions.drawBehind;
+        if (leftButtons == null) leftButtons = defaultOptions.leftButtons;
+        if (rightButtons == null) rightButtons = defaultOptions.rightButtons;
+        if (!testId.hasValue()) testId = defaultOptions.testId;
     }
 }

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

@@ -40,13 +40,14 @@ public class OptionsPresenter {
     }
 
     private void applyTopBarOptions(TopBarOptions options) {
-        if (options.title.hasValue()) topBar.setTitle(options.title.get());
-        topBar.setBackgroundColor(options.backgroundColor);
-        topBar.setTitleTextColor(options.textColor);
-        topBar.setTitleFontSize(options.textFontSize);
+        if (options.title.text.hasValue()) topBar.setTitle(options.title.text.get());
+        if (options.title.component.hasValue()) topBar.setComponent(options.title.component.get(), options.title.alignment);
+        topBar.setBackgroundColor(options.background.color);
+        topBar.setTitleTextColor(options.title.color);
+        topBar.setTitleFontSize(options.title.fontSize);
         if (options.testId.hasValue()) topBar.setTestId(options.testId.get());
 
-        topBar.setTitleTypeface(options.textFontFamily);
+        topBar.setTitleTypeface(options.title.fontFamily);
         if (options.visible.isFalse()) {
             topBar.hide(options.animate);
         }

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

@@ -14,6 +14,7 @@ import com.reactnativenavigation.views.Component;
 import com.reactnativenavigation.views.ReactComponent;
 import com.reactnativenavigation.views.StackLayout;
 import com.reactnativenavigation.views.TopBar;
+import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
 
 import java.util.Collection;
 import java.util.Iterator;
@@ -25,12 +26,14 @@ public class StackController extends ParentController <StackLayout> {
     private static final NoOpPromise NO_OP = new NoOpPromise();
     private final IdStack<ViewController> stack = new IdStack<>();
     private final NavigationAnimator animator;
-    private ReactViewCreator topBarButtonCreator;
+    private final ReactViewCreator topBarButtonCreator;
+    private final TitleBarReactViewCreator titleBarReactViewCreator;
 
-    public StackController(final Activity activity, ReactViewCreator topBarButtonCreator, String id, Options initialOptions) {
+    public StackController(final Activity activity, ReactViewCreator topBarButtonCreator, TitleBarReactViewCreator titleBarReactViewCreator, String id, Options initialOptions) {
         super(activity, id, initialOptions);
         animator = new NavigationAnimator(activity);
         this.topBarButtonCreator = topBarButtonCreator;
+        this.titleBarReactViewCreator = titleBarReactViewCreator;
     }
 
     public void applyOptions(Options options) {
@@ -202,7 +205,7 @@ public class StackController extends ParentController <StackLayout> {
     @NonNull
     @Override
     protected StackLayout createView() {
-        return new StackLayout(getActivity(), topBarButtonCreator, this::sendOnNavigationButtonPressed);
+        return new StackLayout(getActivity(), topBarButtonCreator, titleBarReactViewCreator, this::sendOnNavigationButtonPressed);
     }
 
 	@NonNull

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

@@ -0,0 +1,36 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.TitleOptions;
+import com.reactnativenavigation.utils.CompatUtils;
+import com.reactnativenavigation.views.titlebar.TitleBarReactView;
+import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
+
+public class TitleBarReactViewController extends ViewController<TitleBarReactView> {
+
+    private final TitleBarReactViewCreator reactViewCreator;
+    private String componentName;
+    private TitleOptions.Alignment alignment;
+
+    public TitleBarReactViewController(Activity activity, TitleBarReactViewCreator reactViewCreator) {
+        super(activity, CompatUtils.generateViewId() + "", new Options());
+        this.reactViewCreator = reactViewCreator;
+    }
+
+    @Override
+    protected TitleBarReactView createView() {
+        return reactViewCreator.create(getActivity(), getId(), componentName);
+    }
+
+    @Override
+    public void sendOnNavigationButtonPressed(String buttonId) {
+
+    }
+
+    public void setComponent(String componentName, TitleOptions.Alignment alignment) {
+        this.componentName = componentName;
+        this.alignment = alignment;
+    }
+}

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

@@ -18,7 +18,7 @@ import android.widget.TextView;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Text;
-import com.reactnativenavigation.react.TopBarReactButtonView;
+import com.reactnativenavigation.views.TopBarReactButtonView;
 import com.reactnativenavigation.utils.ArrayUtils;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.ImageLoadingListenerAdapter;

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

@@ -11,6 +11,7 @@ import com.reactnativenavigation.presentation.OptionsPresenter;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
+import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
 
 import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
 import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
@@ -19,9 +20,9 @@ import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 public class StackLayout extends RelativeLayout {
     private TopBar topBar;
 
-    public StackLayout(Context context, ReactViewCreator topBarButtonCreator, TopBarButtonController.OnClickListener topBarButtonClickListener) {
+    public StackLayout(Context context, ReactViewCreator topBarButtonCreator, TitleBarReactViewCreator titleBarReactViewCreator, TopBarButtonController.OnClickListener topBarButtonClickListener) {
         super(context);
-        topBar = new TopBar(context, topBarButtonCreator, topBarButtonClickListener, this);
+        topBar = new TopBar(context, topBarButtonCreator, titleBarReactViewCreator, topBarButtonClickListener, this);
         topBar.setId(CompatUtils.generateViewId());
         addView(topBar, MATCH_PARENT, WRAP_CONTENT);
         setContentDescription("StackLayout");

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

@@ -1,6 +1,7 @@
 package com.reactnativenavigation.views;
 
 import android.annotation.SuppressLint;
+import android.app.Activity;
 import android.content.Context;
 import android.graphics.Typeface;
 import android.support.annotation.RestrictTo;
@@ -14,13 +15,17 @@ import android.widget.TextView;
 import com.reactnativenavigation.anim.TopBarAnimator;
 import com.reactnativenavigation.anim.TopBarCollapseBehavior;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
+import com.reactnativenavigation.parse.TitleOptions;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.parse.params.Number;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+import com.reactnativenavigation.viewcontrollers.TitleBarReactViewController;
 import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
+import com.reactnativenavigation.views.titlebar.TitleBar;
+import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
 
 import java.util.List;
 
@@ -35,19 +40,23 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     private TopTabs topTabs;
     private StackLayout parentView;
 
-    public TopBar(final Context context, ReactViewCreator buttonCreator, TopBarButtonController.OnClickListener onClickListener, StackLayout parentView) {
+    public TopBar(final Context context, ReactViewCreator buttonCreator, TitleBarReactViewCreator titleBarReactViewCreator, TopBarButtonController.OnClickListener onClickListener, StackLayout parentView) {
         super(context);
         collapsingBehavior = new TopBarCollapseBehavior(this);
         topTabs = new TopTabs(getContext());
         animator = new TopBarAnimator(this);
         this.parentView = parentView;
-        titleBar = createTitleBar(context, buttonCreator, onClickListener);
+        titleBar = createTitleBar(context, buttonCreator, titleBarReactViewCreator, onClickListener);
         addView(titleBar);
         setContentDescription("TopBar");
     }
 
-    protected TitleBar createTitleBar(Context context, ReactViewCreator buttonCreator, TopBarButtonController.OnClickListener onClickListener) {
-        return new TitleBar(context, buttonCreator, onClickListener);
+    protected TitleBar createTitleBar(Context context, ReactViewCreator buttonCreator, TitleBarReactViewCreator reactViewCreator, TopBarButtonController.OnClickListener onClickListener) {
+        return new TitleBar(context,
+                buttonCreator,
+                new TitleBarReactViewController((Activity) context, reactViewCreator),
+                onClickListener
+        );
     }
 
     public void setTitle(String title) {
@@ -74,6 +83,10 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
         titleBar.setTitleTypeface(typeface);
     }
 
+    public void setComponent(String componentName, TitleOptions.Alignment alignment) {
+        titleBar.setComponent(componentName, alignment);
+    }
+
     public void setTopTabFontFamily(int tabIndex, Typeface fontFamily) {
         topTabs.setFontFamily(tabIndex, fontFamily);
     }

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

@@ -3,7 +3,6 @@ package com.reactnativenavigation.views;
 import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
-import com.reactnativenavigation.react.TopBarReactButtonView;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 
 public class TopBarButtonCreator implements ReactViewCreator {

lib/android/app/src/main/java/com/reactnativenavigation/react/TopBarReactButtonView.java → lib/android/app/src/main/java/com/reactnativenavigation/views/TopBarReactButtonView.java

@@ -1,9 +1,10 @@
-package com.reactnativenavigation.react;
+package com.reactnativenavigation.views;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
 
 import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.react.ReactView;
 
 @SuppressLint("ViewConstructor")
 public class TopBarReactButtonView extends ReactView {

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

@@ -1,4 +1,4 @@
-package com.reactnativenavigation.views;
+package com.reactnativenavigation.views.titlebar;
 
 import android.annotation.SuppressLint;
 import android.app.Activity;
@@ -11,10 +11,12 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;
 
+import com.reactnativenavigation.parse.TitleOptions;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Fraction;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+import com.reactnativenavigation.viewcontrollers.TitleBarReactViewController;
 import com.reactnativenavigation.viewcontrollers.TopBarButtonController;
 
 import java.util.ArrayList;
@@ -23,13 +25,15 @@ import java.util.List;
 @SuppressLint("ViewConstructor")
 public class TitleBar extends Toolbar {
     private final ReactViewCreator buttonCreator;
+    private TitleBarReactViewController reactViewController;
     private final TopBarButtonController.OnClickListener onClickListener;
     private final List<TopBarButtonController> rightButtonControllers = new ArrayList<>();
     private TopBarButtonController leftButtonController;
 
-    public TitleBar(Context context, ReactViewCreator buttonCreator, TopBarButtonController.OnClickListener onClickListener) {
+    public TitleBar(Context context, ReactViewCreator buttonCreator, TitleBarReactViewController reactViewController, TopBarButtonController.OnClickListener onClickListener) {
         super(context);
         this.buttonCreator = buttonCreator;
+        this.reactViewController = reactViewController;
         this.onClickListener = onClickListener;
         getMenu();
         setContentDescription("titleBar");
@@ -39,29 +43,34 @@ public class TitleBar extends Toolbar {
         return super.getTitle() == null ? "" : (String) super.getTitle();
     }
 
-    void setTitleTextColor(Color color) {
+    public void setTitleTextColor(Color color) {
         if (color.hasValue()) setTitleTextColor(color.get());
     }
 
-    void setBackgroundColor(Color color) {
+    public void setComponent(String componentName, TitleOptions.Alignment alignment) {
+        reactViewController.setComponent(componentName, alignment);
+        addView(reactViewController.getView(), ViewGroup.LayoutParams.WRAP_CONTENT, getHeight());
+    }
+
+    public void setBackgroundColor(Color color) {
         if (color.hasValue()) setBackgroundColor(color.get());
     }
 
-    void setTitleFontSize(Fraction size) {
+    public void setTitleFontSize(Fraction size) {
         TextView titleTextView = getTitleTextView();
         if (titleTextView != null && size.hasValue()) {
             titleTextView.setTextSize(size.get());
         }
     }
 
-    void setTitleTypeface(Typeface typeface) {
+    public void setTitleTypeface(Typeface typeface) {
         TextView titleTextView = getTitleTextView();
         if (titleTextView != null) {
             titleTextView.setTypeface(typeface);
         }
     }
 
-    TextView getTitleTextView() {
+    public TextView getTitleTextView() {
         return findTextView(this);
     }
 

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

@@ -0,0 +1,15 @@
+package com.reactnativenavigation.views.titlebar;
+
+import android.annotation.SuppressLint;
+import android.content.Context;
+
+import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.react.ReactView;
+
+@SuppressLint("ViewConstructor")
+public class TitleBarReactView extends ReactView {
+
+    public TitleBarReactView(Context context, ReactInstanceManager reactInstanceManager, String componentId, String componentName) {
+        super(context, reactInstanceManager, componentId, componentName);
+    }
+}

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

@@ -0,0 +1,20 @@
+package com.reactnativenavigation.views.titlebar;
+
+import android.app.Activity;
+
+import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
+
+public class TitleBarReactViewCreator implements ReactViewCreator {
+
+    protected ReactInstanceManager instanceManager;
+
+    public TitleBarReactViewCreator(ReactInstanceManager instanceManager) {
+        this.instanceManager = instanceManager;
+	}
+
+	@Override
+	public TitleBarReactView create(Activity activity, String componentId, String componentName) {
+        return new TitleBarReactView(activity, instanceManager, componentId, componentName);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TitleBarReactViewCreatorMock.java

@@ -0,0 +1,20 @@
+package com.reactnativenavigation.mocks;
+
+import android.app.Activity;
+
+import com.facebook.react.ReactInstanceManager;
+import com.reactnativenavigation.views.titlebar.TitleBarReactView;
+import com.reactnativenavigation.views.titlebar.TitleBarReactViewCreator;
+
+import static org.mockito.Mockito.mock;
+
+public class TitleBarReactViewCreatorMock extends TitleBarReactViewCreator {
+    public TitleBarReactViewCreatorMock() {
+        super(mock(ReactInstanceManager.class));
+    }
+
+    @Override
+    public TitleBarReactView create(Activity activity, String componentId, String componentName) {
+        return new TitleBarReactView(activity, instanceManager, componentId, componentName);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TopBarButtonCreatorMock.java

@@ -3,7 +3,7 @@ package com.reactnativenavigation.mocks;
 import android.app.Activity;
 
 import com.facebook.react.ReactInstanceManager;
-import com.reactnativenavigation.react.TopBarReactButtonView;
+import com.reactnativenavigation.views.TopBarReactButtonView;
 import com.reactnativenavigation.viewcontrollers.ReactViewCreator;
 
 import static org.mockito.Mockito.mock;

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

@@ -31,6 +31,7 @@ public class OptionsTest extends BaseTest {
     private static final int TOP_BAR_FONT_SIZE = 18;
     private static final String TOP_BAR_FONT_FAMILY = "HelveticaNeue-CondensedBold";
     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);
@@ -63,11 +64,11 @@ public class OptionsTest extends BaseTest {
     }
 
     private void assertResult(Options result) {
-        assertThat(result.topBarOptions.title.get()).isEqualTo(TITLE);
-        assertThat(result.topBarOptions.backgroundColor.get()).isEqualTo(TOP_BAR_BACKGROUND_COLOR);
-        assertThat(result.topBarOptions.textColor.get()).isEqualTo(TOP_BAR_TEXT_COLOR);
-        assertThat(result.topBarOptions.textFontSize.get()).isEqualTo(TOP_BAR_FONT_SIZE);
-        assertThat(result.topBarOptions.textFontFamily).isEqualTo(TOP_BAR_TYPEFACE);
+        assertThat(result.topBarOptions.title.text.get()).isEqualTo(TITLE);
+        assertThat(result.topBarOptions.background.color.get()).isEqualTo(TOP_BAR_BACKGROUND_COLOR);
+        assertThat(result.topBarOptions.title.color.get()).isEqualTo(TOP_BAR_TEXT_COLOR);
+        assertThat(result.topBarOptions.title.fontSize.get()).isEqualTo(TOP_BAR_FONT_SIZE);
+        assertThat(result.topBarOptions.title.fontFamily).isEqualTo(TOP_BAR_TYPEFACE);
         assertThat(result.topBarOptions.visible.get()).isEqualTo(TOP_BAR_VISIBLE.get());
         assertThat(result.topBarOptions.drawBehind.get()).isEqualTo(TOP_BAR_DRAW_BEHIND.get());
         assertThat(result.topBarOptions.hideOnScroll.get()).isEqualTo(TOP_BAR_HIDE_ON_SCROLL.get());
@@ -83,6 +84,7 @@ 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.alignment).isEqualTo(TitleOptions.Alignment.Center);
     }
 
     @NonNull
@@ -97,16 +99,27 @@ public class OptionsTest extends BaseTest {
     @NonNull
     private JSONObject createTopBar(boolean visible) throws JSONException {
         return new JSONObject()
-                .put("title", "the title")
-                .put("backgroundColor", TOP_BAR_BACKGROUND_COLOR)
-                .put("textColor", TOP_BAR_TEXT_COLOR)
-                .put("textFontSize", TOP_BAR_FONT_SIZE)
-                .put("textFontFamily", TOP_BAR_FONT_FAMILY)
+                .put("title", createTitle())
+                .put("background", createBackground())
                 .put("visible", visible)
                 .put("drawBehind", TOP_BAR_DRAW_BEHIND.get())
                 .put("hideOnScroll", TOP_BAR_HIDE_ON_SCROLL.get());
     }
 
+    private JSONObject createBackground() throws JSONException {
+        return new JSONObject()
+                .put("color", TOP_BAR_BACKGROUND_COLOR);
+    }
+
+    private JSONObject createTitle() throws JSONException {
+        return new JSONObject()
+                .put("text", "the title")
+                .put("color", TOP_BAR_TEXT_COLOR)
+                .put("fontSize", TOP_BAR_FONT_SIZE)
+                .put("fontFamily", TOP_BAR_FONT_FAMILY)
+                .put("alignment", TITLE_ALIGNMENT);
+    }
+
     @NonNull
     private JSONObject createFab() throws JSONException {
         return new JSONObject()
@@ -136,11 +149,8 @@ public class OptionsTest extends BaseTest {
     @NonNull
     private JSONObject createOtherTopBar() throws JSONException {
         return new JSONObject()
-                .put("title", "the title")
-                .put("backgroundColor", TOP_BAR_BACKGROUND_COLOR)
-                .put("textColor", TOP_BAR_TEXT_COLOR)
-                .put("textFontSize", TOP_BAR_FONT_SIZE)
-                .put("textFontFamily", TOP_BAR_FONT_FAMILY)
+                .put("title", createTitle())
+                .put("background", createBackground())
                 .put("visible", TOP_BAR_VISIBLE);
     }
 
@@ -159,17 +169,17 @@ public class OptionsTest extends BaseTest {
         JSONObject json1 = new JSONObject();
         json1.put("topBar", createTopBar(true));
         Options options1 = Options.parse(mockLoader, json1);
-        options1.topBarOptions.title = new Text("some title");
+        options1.topBarOptions.title.text = new Text("some title");
 
         JSONObject json2 = new JSONObject();
         json2.put("topBar", createTopBar(false));
         Options options2 = Options.parse(mockLoader, json2);
-        options2.topBarOptions.title = new NullText();
+        options2.topBarOptions.title.text = new NullText();
 
         Options merged = options1.mergeWith(options2);
         assertThat(options1.topBarOptions.visible.get()).isTrue();
         assertThat(merged.topBarOptions.visible.get()).isFalse();
-        assertThat(merged.topBarOptions.title.get()).isEqualTo("some title");
+        assertThat(merged.topBarOptions.title.text.get()).isEqualTo("some title");
     }
 
     @Test
@@ -203,7 +213,7 @@ public class OptionsTest extends BaseTest {
     @Test
     public void defaultEmptyOptions() throws Exception {
         Options uut = new Options();
-        assertThat(uut.topBarOptions.title.get("")).isEmpty();
+        assertThat(uut.topBarOptions.title.text.get("")).isEmpty();
     }
 
     @Test
@@ -216,9 +226,9 @@ public class OptionsTest extends BaseTest {
     @Test
     public void clear_topBarOptions() throws Exception {
         Options uut = new Options();
-        uut.topBarOptions.title = new Text("some title");
+        uut.topBarOptions.title.text = new Text("some title");
         uut.clearTopBarOptions();
-        assertThat(uut.topBarOptions.title.hasValue()).isFalse();
+        assertThat(uut.topBarOptions.title.text.hasValue()).isFalse();
     }
 
     @Test

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

@@ -8,6 +8,7 @@ import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.ImageLoaderMock;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Color;
@@ -100,7 +101,7 @@ public class BottomTabsControllerTest extends BaseTest {
     public void findControllerById_ReturnsSelfOrChildren() throws Exception {
         assertThat(uut.findControllerById("123")).isNull();
         assertThat(uut.findControllerById(uut.getId())).isEqualTo(uut);
-        StackController inner = new StackController(activity, new TopBarButtonCreatorMock(), "inner", tabOptions);
+        StackController inner = createStack("inner");
         inner.animatePush(child1, new MockPromise());
         assertThat(uut.findControllerById(child1.getId())).isNull();
         uut.setTabs(Collections.singletonList(inner));
@@ -131,7 +132,7 @@ public class BottomTabsControllerTest extends BaseTest {
         uut.setTabs(tabs);
         uut.ensureViewIsCreated();
 
-        StackController stack = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options()));
+        StackController stack = spy(createStack("stack"));
         stack.ensureViewIsCreated();
         stack.push(uut, new MockPromise());
 
@@ -169,4 +170,8 @@ public class BottomTabsControllerTest extends BaseTest {
     private List<ViewController> createTabs() {
         return Arrays.asList(child1, child2, child3, child4, child5);
     }
+
+    private StackController createStack(String id) {
+        return new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), id, tabOptions);
+    }
 }

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

@@ -5,6 +5,7 @@ import android.app.Activity;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.TestComponentLayout;
 import com.reactnativenavigation.mocks.TestReactView;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.views.StackLayout;
@@ -26,7 +27,7 @@ public class ComponentViewControllerTest extends BaseTest {
         super.beforeEach();
         Activity activity = newActivity();
         view = spy(new TestComponentLayout(activity, new TestReactView(activity)));
-        ParentController<StackLayout> parentController = new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options());
+        ParentController<StackLayout> parentController = new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), "stack", new Options());
         uut = new ComponentViewController(activity, "componentId1", "componentName", (activity1, componentId, componentName) -> view, new Options());
         uut.setParentController(parentController);
         parentController.ensureViewIsCreated();

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

@@ -8,6 +8,7 @@ import android.view.ViewGroup;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.FabOptions;
 import com.reactnativenavigation.parse.Options;
@@ -33,7 +34,7 @@ public class FloatingActionButtonTest extends BaseTest {
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        stackController = new StackController(activity, new TopBarButtonCreatorMock(), "stackController", new Options());
+        stackController = new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), "stackController", new Options());
         Options options = getOptionsWithFab();
         childFab = new SimpleViewController(activity, "child1", options);
         childNoFab = new SimpleViewController(activity, "child2", new Options());

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

@@ -8,6 +8,7 @@ import com.reactnativenavigation.mocks.ImageLoaderMock;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleComponentViewController;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
@@ -46,7 +47,7 @@ public class NavigatorTest extends BaseTest {
         imageLoaderMock = ImageLoaderMock.mock();
         activity = newActivity();
         uut = new Navigator(activity);
-        parentController = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options()));
+        parentController = spy(newStack());
         parentController.ensureViewIsCreated();
         child1 = new SimpleViewController(activity, "child1", tabOptions);
         child2 = new SimpleViewController(activity, "child2", tabOptions);
@@ -226,14 +227,14 @@ public class NavigatorTest extends BaseTest {
     public void setOptions_CallsApplyNavigationOptions() {
         ComponentViewController componentVc = new SimpleComponentViewController(activity, "theId", new Options());
         componentVc.setParentController(parentController);
-        assertThat(componentVc.options.topBarOptions.title.get("")).isEmpty();
+        assertThat(componentVc.options.topBarOptions.title.text.get("")).isEmpty();
         uut.setRoot(componentVc, new MockPromise());
 
         Options options = new Options();
-        options.topBarOptions.title = new Text("new title");
+        options.topBarOptions.title.text = new Text("new title");
 
         uut.setOptions("theId", options);
-        assertThat(componentVc.options.topBarOptions.title.get()).isEqualTo("new title");
+        assertThat(componentVc.options.topBarOptions.title.text.get()).isEqualTo("new title");
     }
 
     @Test
@@ -248,7 +249,7 @@ public class NavigatorTest extends BaseTest {
 
     @NonNull
     private StackController newStack() {
-        return new StackController(activity, new TopBarButtonCreatorMock(), "stack" + CompatUtils.generateViewId(), tabOptions);
+        return new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), "stack" + CompatUtils.generateViewId(), tabOptions);
     }
 
     @Test
@@ -325,7 +326,7 @@ public class NavigatorTest extends BaseTest {
 
     @Test
     public void pushedStackCanBePopped() throws Exception {
-        StackController parent = new StackController(activity, new TopBarButtonCreatorMock(), "someStack", new Options());
+        StackController parent = newStack();
         parent.ensureViewIsCreated();
         uut.setRoot(parent, new MockPromise());
         parent.push(parentController, new MockPromise());

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

@@ -10,6 +10,7 @@ import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.TestComponentLayout;
 import com.reactnativenavigation.mocks.TestReactView;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
@@ -45,7 +46,7 @@ public class OptionsApplyingTest extends BaseTest {
                 (activity1, componentId, componentName) -> view,
                 initialNavigationOptions
         );
-        stackController = new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options());
+        stackController = new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), "stack", new Options());
         stackController.ensureViewIsCreated();
         uut.setParentController(stackController);
     }
@@ -61,8 +62,8 @@ public class OptionsApplyingTest extends BaseTest {
 
     @Test
     public void initialOptionsAppliedOnAppear() throws Exception {
-        uut.options.topBarOptions.title = new Text("the title");
-        StackController stackController = new StackController(activity, new TopBarButtonCreatorMock(), "stackId", new Options());
+        uut.options.topBarOptions.title.text = new Text("the title");
+        StackController stackController = new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), "stackId", new Options());
         stackController.animatePush(uut, new MockPromise() {});
         assertThat(stackController.getTopBar().getTitle()).isEmpty();
 
@@ -73,11 +74,11 @@ public class OptionsApplyingTest extends BaseTest {
     @Test
     public void mergeNavigationOptionsUpdatesCurrentOptions() throws Exception {
         uut.ensureViewIsCreated();
-        assertThat(uut.options.topBarOptions.title.get("")).isEmpty();
+        assertThat(uut.options.topBarOptions.title.text.get("")).isEmpty();
         Options options = new Options();
-        options.topBarOptions.title = new Text("new title");
+        options.topBarOptions.title.text = new Text("new title");
         uut.mergeOptions(options);
-        assertThat(uut.options.topBarOptions.title.get()).isEqualTo("new title");
+        assertThat(uut.options.topBarOptions.title.text.get()).isEqualTo("new title");
     }
 
     @Test
@@ -87,7 +88,7 @@ public class OptionsApplyingTest extends BaseTest {
         assertThat(stackController.getTopBar().getTitle()).isEmpty();
 
         Options opts = new Options();
-        opts.topBarOptions.title = new Text("the new title");
+        opts.topBarOptions.title.text = new Text("the new title");
         uut.mergeOptions(opts);
 
         assertThat(stackController.getTopBar().getTitle()).isEqualTo("the new title");
@@ -99,7 +100,7 @@ public class OptionsApplyingTest extends BaseTest {
         uut.onViewAppeared();
 
         Options opts = new Options();
-        opts.topBarOptions.backgroundColor = new com.reactnativenavigation.parse.params.Color(Color.RED);
+        opts.topBarOptions.background.color = new com.reactnativenavigation.parse.params.Color(Color.RED);
         uut.mergeOptions(opts);
 
         assertThat(((ColorDrawable) stackController.getTopBar().getTitleBar().getBackground()).getColor()).isEqualTo(Color.RED);
@@ -112,8 +113,8 @@ public class OptionsApplyingTest extends BaseTest {
             @Override
             public void resolve(@Nullable Object value) {
                 Options opts = new Options();
-                opts.topBarOptions.title = new Text("the title");
-                opts.topBarOptions.textColor = new com.reactnativenavigation.parse.params.Color(Color.RED);
+                opts.topBarOptions.title.text = new Text("the title");
+                opts.topBarOptions.title.color = new com.reactnativenavigation.parse.params.Color(Color.RED);
                 uut.mergeOptions(opts);
 
                 assertThat(stackController.getTopBar().getTitleTextView()).isNotEqualTo(null);
@@ -125,13 +126,13 @@ public class OptionsApplyingTest extends BaseTest {
     @Test
     public void appliesTopBarTextSize() throws Exception {
         assertThat(uut.initialOptions).isSameAs(initialNavigationOptions);
-        initialNavigationOptions.topBarOptions.title = new Text("the title");
+        initialNavigationOptions.topBarOptions.title.text = new Text("the title");
         uut.ensureViewIsCreated();
         uut.onViewAppeared();
 
         Options opts = new Options();
-        opts.topBarOptions.title = new Text("the title");
-        opts.topBarOptions.textFontSize = new Fraction(18);
+        opts.topBarOptions.title.text = new Text("the title");
+        opts.topBarOptions.title.fontSize = new Fraction(18);
         uut.mergeOptions(opts);
 
         assertThat(stackController.getTopBar().getTitleTextView()).isNotEqualTo(null);
@@ -141,7 +142,7 @@ public class OptionsApplyingTest extends BaseTest {
     @Test
     public void appliesTopBarVisible() throws Exception {
         assertThat(uut.initialOptions).isSameAs(initialNavigationOptions);
-        initialNavigationOptions.topBarOptions.title = new Text("the title");
+        initialNavigationOptions.topBarOptions.title.text = new Text("the title");
         uut.ensureViewIsCreated();
         uut.onViewAppeared();
         assertThat(stackController.getTopBar().getVisibility()).isNotEqualTo(View.GONE);
@@ -156,7 +157,7 @@ public class OptionsApplyingTest extends BaseTest {
 
     @Test
     public void appliesDrawUnder() throws Exception {
-        uut.options.topBarOptions.title = new Text("the title");
+        uut.options.topBarOptions.title.text = new Text("the title");
         uut.options.topBarOptions.drawBehind = new Bool(false);
         uut.ensureViewIsCreated();
         stackController.animatePush(uut, new MockPromise() {

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

@@ -8,6 +8,7 @@ import android.widget.FrameLayout;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
@@ -38,7 +39,7 @@ public class ParentControllerTest extends BaseTest {
         activity = newActivity();
         children = new ArrayList<>();
         Options initialOptions = new Options();
-        initialOptions.topBarOptions.title = new Text(INITIAL_TITLE);
+        initialOptions.topBarOptions.title.text = new Text(INITIAL_TITLE);
         uut = spy(new ParentController(activity, "uut", initialOptions) {
 
             @NonNull
@@ -88,7 +89,7 @@ public class ParentControllerTest extends BaseTest {
 
     @Test
     public void findControllerById_Recursive() throws Exception {
-        StackController stackController = new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options());
+        StackController stackController = createStack();
         SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
         SimpleViewController child2 = new SimpleViewController(activity, "child2", new Options());
         stackController.animatePush(child1, new MockPromise());
@@ -110,7 +111,7 @@ public class ParentControllerTest extends BaseTest {
 
     @Test
     public void optionsAreClearedWhenChildIsAppeared() throws Exception {
-        StackController stackController = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options()));
+        StackController stackController = spy(createStack());
         SimpleViewController child1 = new SimpleViewController(activity, "child1", new Options());
         stackController.animatePush(child1, new MockPromise());
 
@@ -121,7 +122,7 @@ public class ParentControllerTest extends BaseTest {
     @Test
     public void mergeOptions_optionsAreMergedWhenChildAppears() throws Exception {
         Options options = new Options();
-        options.topBarOptions.title = new Text("new title");
+        options.topBarOptions.title.text = new Text("new title");
         ViewController child1 = spy(new SimpleViewController(activity, "child1", options));
         children.add(child1);
         uut.ensureViewIsCreated();
@@ -132,14 +133,14 @@ public class ParentControllerTest extends BaseTest {
         ArgumentCaptor<ReactComponent> viewCaptor = ArgumentCaptor.forClass(ReactComponent.class);
         verify(uut, times(1)).clearOptions();
         verify(uut, times(1)).applyOptions(optionsCaptor.capture(), viewCaptor.capture());
-        assertThat(optionsCaptor.getValue().topBarOptions.title.get()).isEqualTo("new title");
+        assertThat(optionsCaptor.getValue().topBarOptions.title.text.get()).isEqualTo("new title");
         assertThat(viewCaptor.getValue()).isEqualTo(child1.getView());
     }
 
     @Test
     public void mergeOptions_initialParentOptionsAreNotMutatedWhenChildAppears() throws Exception {
         Options options = new Options();
-        options.topBarOptions.title = new Text("new title");
+        options.topBarOptions.title.text = new Text("new title");
         ViewController child1 = spy(new SimpleViewController(activity, "child1", options));
         children.add(child1);
 
@@ -147,6 +148,10 @@ public class ParentControllerTest extends BaseTest {
 
         child1.ensureViewIsCreated();
         child1.onViewAppeared();
-        assertThat(uut.initialOptions.topBarOptions.title.get()).isEqualTo(INITIAL_TITLE);
+        assertThat(uut.initialOptions.topBarOptions.title.text.get()).isEqualTo(INITIAL_TITLE);
+    }
+
+    private StackController createStack() {
+        return new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), "stack", new Options());
     }
 }

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

@@ -7,6 +7,7 @@ import android.view.View;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
@@ -39,7 +40,7 @@ public class StackControllerTest extends BaseTest {
     public void beforeEach() {
         super.beforeEach();
         activity = newActivity();
-        uut = new StackController(activity, new TopBarButtonCreatorMock(), "uut", new Options());
+        uut = createStackController("uut");
         child1 = spy(new SimpleViewController(activity, "child1", new Options()));
         child2 = spy(new SimpleViewController(activity, "child2", new Options()));
         child3 = spy(new SimpleViewController(activity, "child3", new Options()));
@@ -95,7 +96,7 @@ public class StackControllerTest extends BaseTest {
     @Test
     public void pop_layoutHandlesChildWillDisappear() throws Exception {
         final StackLayout[] stackLayout = new StackLayout[1];
-        uut = new StackController(activity, new TopBarButtonCreatorMock(), "uut", new Options()) {
+        uut = new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), "uut", new Options()) {
             @NonNull
             @Override
             protected StackLayout createView() {
@@ -134,7 +135,7 @@ public class StackControllerTest extends BaseTest {
         uut.animatePush(child1, new MockPromise());
         assertThat(child1.getParentController()).isEqualTo(uut);
 
-        StackController anotherNavController = new StackController(activity, new TopBarButtonCreatorMock(), "another", new Options());
+        StackController anotherNavController = createStackController("another");
         anotherNavController.animatePush(child2, new MockPromise());
         assertThat(child2.getParentController()).isEqualTo(anotherNavController);
     }
@@ -314,7 +315,7 @@ public class StackControllerTest extends BaseTest {
 
     @Test
     public void findControllerById_Deeply() throws Exception {
-        StackController stack = new StackController(activity, new TopBarButtonCreatorMock(), "stack2", new Options());
+        StackController stack = createStackController("stack2");
         stack.animatePush(child2, new MockPromise());
         uut.animatePush(stack, new MockPromise());
         assertThat(uut.findControllerById(child2.getId())).isEqualTo(child2);
@@ -409,7 +410,7 @@ public class StackControllerTest extends BaseTest {
 
     @Test
     public void stackCanBePushed() throws Exception {
-        StackController parent = new StackController(activity, new TopBarButtonCreatorMock(), "someStack", new Options());
+        StackController parent = createStackController("someStack");
         parent.ensureViewIsCreated();
         parent.push(uut, new MockPromise());
         uut.onViewAppeared();
@@ -418,12 +419,12 @@ public class StackControllerTest extends BaseTest {
 
     @Test
     public void applyOptions_applyOnlyOnFirstStack() throws Exception {
-        StackController parent = spy(new StackController(activity, new TopBarButtonCreatorMock(), "someStack", new Options()));
+        StackController parent = spy(createStackController("someStack"));
         parent.ensureViewIsCreated();
         parent.push(uut, new MockPromise());
 
         Options childOptions = new Options();
-        childOptions.topBarOptions.title = new Text("Something");
+        childOptions.topBarOptions.title.text = new Text("Something");
         child1.options = childOptions;
         uut.push(child1, new MockPromise());
         child1.ensureViewIsCreated();
@@ -432,7 +433,7 @@ public class StackControllerTest extends BaseTest {
         ArgumentCaptor<Options> optionsCaptor = ArgumentCaptor.forClass(Options.class);
         ArgumentCaptor<ReactComponent> viewCaptor = ArgumentCaptor.forClass(ReactComponent.class);
         verify(parent, times(1)).applyOptions(optionsCaptor.capture(), viewCaptor.capture());
-        assertThat(optionsCaptor.getValue().topBarOptions.title.hasValue()).isFalse();
+        assertThat(optionsCaptor.getValue().topBarOptions.title.text.hasValue()).isFalse();
     }
 
     @Test
@@ -456,4 +457,8 @@ public class StackControllerTest extends BaseTest {
         assertThat(uut.size()).isEqualTo(ids.length);
         assertThat(uut.getChildControllers()).extracting((Extractor<ViewController, String>) ViewController::getId).containsOnly(ids);
     }
+
+    private StackController createStackController(String id) {
+        return new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), id, new Options());
+    }
 }

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

@@ -1,13 +1,17 @@
 package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
+import android.view.ViewGroup;
 
 import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
+import com.reactnativenavigation.parse.TitleOptions;
 import com.reactnativenavigation.parse.params.Button;
 import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.react.ReactView;
-import com.reactnativenavigation.views.TitleBar;
+import com.reactnativenavigation.views.titlebar.TitleBar;
+import com.reactnativenavigation.views.titlebar.TitleBarReactView;
 
 import org.junit.Test;
 
@@ -19,6 +23,8 @@ import java.util.List;
 import java.util.Map;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.eq;
 import static org.mockito.Mockito.spy;
 import static org.mockito.Mockito.times;
 import static org.mockito.Mockito.verify;
@@ -35,9 +41,10 @@ public class TitleBarTest extends BaseTest {
     public void beforeEach() {
         final TopBarButtonCreatorMock buttonCreator = new TopBarButtonCreatorMock();
         final Activity activity = newActivity();
+        TitleBarReactViewController reactViewController = new TitleBarReactViewController(activity, new TitleBarReactViewCreatorMock());
         createButtons();
         buttonControllers = new HashMap<>();
-        uut = spy(new TitleBar(activity, buttonCreator, (buttonId -> {})) {
+        uut = spy(new TitleBar(activity, buttonCreator, reactViewController, (buttonId -> {})) {
             @Override
             public TopBarButtonController createButtonController(Button button) {
                 TopBarButtonController controller = spy(super.createButtonController(button));
@@ -120,6 +127,13 @@ public class TitleBarTest extends BaseTest {
         assertThat(uut.getMenu().getItem(1).getTitle()).isEqualTo(textButton.title.get());
     }
 
+    @Test
+    public void setComponent_addsComponentToTitleBar() {
+        uut.setComponent("com.rnn.CustomView", TitleOptions.Alignment.Center);
+        final int height = uut.getHeight();
+        verify(uut, times(1)).addView(any(TitleBarReactView.class), eq(ViewGroup.LayoutParams.WRAP_CONTENT), eq(height));
+    }
+
     private List<Button> leftButton(Button leftButton) {
         return Collections.singletonList(leftButton);
     }

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

@@ -4,6 +4,7 @@ import android.app.Activity;
 import android.support.annotation.NonNull;
 
 import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Button;
@@ -28,7 +29,7 @@ public class TopBarButtonControllerTest extends BaseTest {
 
         TopBarButtonCreatorMock buttonCreatorMock = new TopBarButtonCreatorMock();
         uut = spy(new TopBarButtonController(activity, button, buttonCreatorMock, (buttonId) -> {}));
-        stackController = spy(new StackController(activity, buttonCreatorMock, "stack", new Options()));
+        stackController = spy(new StackController(activity, buttonCreatorMock, new TitleBarReactViewCreatorMock(), "stack", new Options()));
 
     }
 

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

@@ -8,6 +8,7 @@ import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.TestComponentViewCreator;
 import com.reactnativenavigation.mocks.TestReactView;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Text;
@@ -60,18 +61,23 @@ public class TopTabsViewControllerTest extends BaseTest {
         uut = spy(new TopTabsController(activity, "componentId", tabControllers, layoutCreator, options));
         tabControllers.forEach(viewController -> viewController.setParentController(uut));
 
-        parentController = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stackId", new Options()));
+        parentController = spy(createStackController("stackId"));
         parentController.push(uut, new MockPromise());
         uut.setParentController(parentController);
     }
 
+    @NonNull
+    private StackController createStackController(String id) {
+        return new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), id, new Options());
+    }
+
     @NonNull
     private ArrayList<Options> createOptions() {
         ArrayList result = new ArrayList();
         for (int i = 0; i < SIZE; i++) {
             final Options options = new Options();
             options.topTabOptions.title = new Text("Tab " + i);
-            options.topBarOptions.title = new Text(createTabTopBarTitle(i));
+            options.topBarOptions.title.text = new Text(createTabTopBarTitle(i));
             result.add(options);
         }
         return result;
@@ -173,17 +179,17 @@ public class TopTabsViewControllerTest extends BaseTest {
         uut.onViewAppeared();
         ReactComponent currentTab = tabView(0);
         verify(uut, times(1)).applyOptions(any(Options.class), eq(currentTab));
-        assertThat(uut.options.topBarOptions.title.get()).isEqualTo(createTabTopBarTitle(0));
+        assertThat(uut.options.topBarOptions.title.text.get()).isEqualTo(createTabTopBarTitle(0));
 
         uut.switchToTab(1);
         currentTab = tabView(1);
         verify(uut, times(1)).applyOptions(any(Options.class), eq(currentTab));
-        assertThat(uut.options.topBarOptions.title.get()).isEqualTo(createTabTopBarTitle(1));
+        assertThat(uut.options.topBarOptions.title.text.get()).isEqualTo(createTabTopBarTitle(1));
 
         uut.switchToTab(0);
         currentTab = tabView(0);
         verify(uut, times(2)).applyOptions(any(Options.class), eq(currentTab));
-        assertThat(uut.options.topBarOptions.title.get()).isEqualTo(createTabTopBarTitle(0));
+        assertThat(uut.options.topBarOptions.title.text.get()).isEqualTo(createTabTopBarTitle(0));
     }
 
     private TestReactView getActualTabView(int index) {
@@ -215,7 +221,7 @@ public class TopTabsViewControllerTest extends BaseTest {
     public void applyOptions_tabsAreRemovedAfterViewDisappears() throws Exception {
         parentController.getView().removeAllViews();
 
-        StackController stackController = spy(new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options()));
+        StackController stackController = spy(createStackController("stack"));
         ComponentViewController first = new ComponentViewController(
                 activity,
                 "firstScreen",

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

@@ -9,6 +9,7 @@ import android.widget.LinearLayout;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.mocks.MockPromise;
 import com.reactnativenavigation.mocks.SimpleViewController;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
 
@@ -66,7 +67,7 @@ public class ViewControllerTest extends BaseTest {
     @Test
     public void holdsAReferenceToStackControllerOrNull() throws Exception {
         assertThat(uut.getParentController()).isNull();
-        StackController nav = new StackController(activity, new TopBarButtonCreatorMock(), "stack", new Options());
+        StackController nav = new StackController(activity, new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), "stack", new Options());
         nav.animatePush(uut, new MockPromise());
         assertThat(uut.getParentController()).isEqualTo(nav);
     }

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

@@ -5,6 +5,7 @@ import android.view.MenuItem;
 
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.anim.TopBarAnimator;
+import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Button;
@@ -38,8 +39,8 @@ public class TopBarTest extends BaseTest {
                 Log.i("TopBarTest", "onPress: " + buttonId);
             }
         });
-        StackLayout parent = new StackLayout(newActivity(), new TopBarButtonCreatorMock(), this.onClickListener);
-        uut = new TopBar(newActivity(), new TopBarButtonCreatorMock(), this.onClickListener, parent);
+        StackLayout parent = new StackLayout(newActivity(), new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), this.onClickListener);
+        uut = new TopBar(newActivity(), new TopBarButtonCreatorMock(), new TitleBarReactViewCreatorMock(), this.onClickListener, parent);
         animator = spy(new TopBarAnimator(uut));
         uut.setAnimator(animator);
         leftButton = createLeftButton();

lib/ios/RNNCustomTitleView.h

@@ -1,7 +1,10 @@
 #import <UIKit/UIKit.h>
+#import <React/RCTRootView.h>
+#import <React/RCTRootViewDelegate.h>
 
-@interface RNNCustomTitleView : UIView
+@interface RNNCustomTitleView : UIView <RCTRootViewDelegate>
 
--(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment;
+- (instancetype)initWithFrame:(CGRect)frame subView:(RCTRootView*)subView alignment:(NSString*)alignment;
 
 @end
+

lib/ios/RNNCustomTitleView.m

@@ -1,47 +1,55 @@
 #import "RNNCustomTitleView.h"
 
 @interface RNNCustomTitleView ()
-@property (nonatomic, strong) UIView *subView;
-@property (nonatomic, strong) NSString *subViewAlign;
+
+@property (nonatomic, strong) RCTRootView *subView;
+@property (nonatomic, strong) NSString *alignment;
+
 @end
 
 @implementation RNNCustomTitleView
 
+- (instancetype)initWithFrame:(CGRect)frame subView:(RCTRootView*)subView alignment:(NSString*)alignment {
+	self = [super init];
+	
+	if (self) {
+		self.subView = subView;
+		self.alignment = alignment;
+		
+		self.backgroundColor = [UIColor clearColor];
+		self.subView.backgroundColor = [UIColor clearColor];
+		
+		if ([alignment isEqualToString:@"fill"]) {
+			self.frame = frame;
+			subView.sizeFlexibility = RCTRootViewSizeFlexibilityNone;
+		} else {
+			self.subView.delegate = self;
+			subView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
+		}
+		
+		[self addSubview:subView];
+	}
+	
+	return self;
+}
 
--(instancetype)initWithFrame:(CGRect)frame subView:(UIView*)subView alignment:(NSString*)alignment {
-    self = [super initWithFrame:frame];
-    
-    if (self) {
-        self.backgroundColor = [UIColor clearColor];
-        self.subView = subView;
-        self.subViewAlign = alignment;
-        
-        subView.frame = self.bounds;
-        [self addSubview:subView];
-    }
-    
-    return self;
+- (void)layoutSubviews {
+	[super layoutSubviews];
+	if ([self.alignment isEqualToString:@"fill"]) {
+		[self.subView setFrame:self.bounds];
+	}
 }
 
+- (NSString *)alignment {
+	return _alignment ? _alignment : @"center";
+}
 
--(void)layoutSubviews {
-    [super layoutSubviews];
-    
-    if ([self.subViewAlign isEqualToString:@"fill"]) {
-        self.subView.frame = self.bounds;
-    }
-    else {
-        
-        CGFloat superViewWidth = self.superview.frame.size.width;
-        CGFloat paddingLeftFromCenter = (superViewWidth/2) - self.frame.origin.x;
-        CGFloat paddingRightFromCenter = self.frame.size.width - paddingLeftFromCenter;;
-        CGRect reactViewFrame = self.subView.bounds;
-        CGFloat minPadding = MIN(paddingLeftFromCenter, paddingRightFromCenter);
-        
-        reactViewFrame.size.width = minPadding*2;
-        reactViewFrame.origin.x = paddingLeftFromCenter - minPadding;
-        self.subView.frame = reactViewFrame;
-    }
+- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {
+	if ([self.alignment isEqualToString:@"center"]) {
+		[self setFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y, self.subView.intrinsicContentSize.width, self.subView.intrinsicContentSize.height)];
+		[self.subView setFrame:CGRectMake(0, 0, rootView.intrinsicContentSize.width, rootView.intrinsicContentSize.height)];
+	}
 }
 
 @end
+

lib/ios/RNNOptions.m

@@ -17,7 +17,12 @@
 -(void)mergeWith:(NSDictionary *)otherOptions {
 	for (id key in otherOptions) {
 		if ([self hasProperty:key]) {
-			[self setValue:[otherOptions objectForKey:key] forKey:key];
+			if ([[self valueForKey:key] isKindOfClass:[RNNOptions class]]) {
+				RNNOptions* options = [self valueForKey:key];
+				[options mergeWith:[otherOptions objectForKey:key]];
+			} else {
+				[self setValue:[otherOptions objectForKey:key] forKey:key];
+			}
 		}
 	}
 }

lib/ios/RNNRootViewController.m

@@ -44,8 +44,10 @@
 -(void)viewWillAppear:(BOOL)animated{
 	[super viewWillAppear:animated];
 	[self.options applyOn:self];
+	
 	[self setCustomNavigationTitleView];
 	[self setCustomNavigationBarView];
+	[self setCustomNavigationComponentBackground];
 }
 
 -(void)viewDidAppear:(BOOL)animated {
@@ -71,23 +73,32 @@
 }
 
 - (void)setCustomNavigationTitleView {
-	if (self.options.topBar.customTitleViewName) {
-		UIView *reactView = [_creator createRootView:self.options.topBar.customTitleViewName rootViewId:self.options.topBar.customTitleViewName];
+	if (self.options.topBar.title.component) {
+		RCTRootView *reactView = (RCTRootView*)[_creator createRootView:self.options.topBar.title.component rootViewId:self.options.topBar.title.component];
 		
-		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:nil];
+		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:self.options.topBar.title.componentAlignment];
 		self.navigationItem.titleView = titleView;
 	}
 }
 
 - (void)setCustomNavigationBarView {
-	if (self.options.topBar.customViewName) {
-		UIView *reactView = [_creator createRootView:self.options.topBar.customViewName rootViewId:@"navBar"];
+	if (self.options.topBar.componentName) {
+		RCTRootView *reactView = (RCTRootView*)[_creator createRootView:self.options.topBar.componentName rootViewId:@"navBar"];
 		
-		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:nil];
+		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:@"fill"];
 		[self.navigationController.navigationBar addSubview:titleView];
 	}
 }
 
+- (void)setCustomNavigationComponentBackground {
+	if (self.options.topBar.backgroundComponentName) {
+		RCTRootView *reactView = (RCTRootView*)[_creator createRootView:self.options.topBar.backgroundComponentName rootViewId:@"navBarBackground"];
+		
+		RNNCustomTitleView *titleView = [[RNNCustomTitleView alloc] initWithFrame:self.navigationController.navigationBar.bounds subView:reactView alignment:@"fill"];
+		[self.navigationController.navigationBar insertSubview:titleView atIndex:1];
+	}
+}
+
 -(BOOL)isCustomTransitioned {
 	return self.options.customTransition.animations != nil;
 }

lib/ios/RNNTitleOptions.h

@@ -0,0 +1,13 @@
+#import "RNNOptions.h"
+
+@interface RNNTitleOptions : RNNOptions
+
+@property (nonatomic, strong) NSString* text;
+@property (nonatomic, strong) NSNumber* fontSize;
+@property (nonatomic, strong) NSNumber* color;
+@property (nonatomic, strong) NSString* fontFamily;
+@property (nonatomic, strong) NSString* component;
+@property (nonatomic, strong) NSString* componentAlignment;
+
+
+@end

lib/ios/RNNTitleOptions.m

@@ -0,0 +1,32 @@
+#import "RNNTitleOptions.h"
+
+@implementation RNNTitleOptions
+
+- (void)applyOn:(UIViewController *)viewController {
+	if (self.text) {
+		viewController.navigationItem.title = self.text;
+	}
+	
+	if (self.fontFamily || self.fontSize || self.color) {
+		NSMutableDictionary* navigationBarTitleTextAttributes = [NSMutableDictionary new];
+		if (self.color) {
+			navigationBarTitleTextAttributes[NSForegroundColorAttributeName] = [RCTConvert UIColor:[self valueForKey:@"color"]];
+		}
+		if (self.fontFamily){
+			if(self.fontSize) {
+				navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont fontWithName:self.fontFamily size:[self.fontSize floatValue]];
+			} else {
+				navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont fontWithName:self.fontFamily size:20];
+			}
+		} else if (self.fontSize) {
+			navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:[self.fontSize floatValue]];
+		}
+		viewController.navigationController.navigationBar.titleTextAttributes = navigationBarTitleTextAttributes;
+		if (@available(iOS 11.0, *)){
+			viewController.navigationController.navigationBar.largeTitleTextAttributes = navigationBarTitleTextAttributes;
+		}
+		
+	}
+}
+
+@end

lib/ios/RNNTopBarOptions.h

@@ -1,27 +1,25 @@
 #import "RNNOptions.h"
+#import "RNNTitleOptions.h"
 
 @interface RNNTopBarOptions : RNNOptions
 
 @property (nonatomic, strong) NSArray* leftButtons;
 @property (nonatomic, strong) NSArray* rightButtons;
 @property (nonatomic, strong) NSNumber* backgroundColor;
-@property (nonatomic, strong) NSNumber* textColor;
-@property (nonatomic, strong) NSString* title;
-@property (nonatomic, strong) NSString* textFontFamily;
 @property (nonatomic, strong) NSNumber* visible;
 @property (nonatomic, strong) NSNumber* hideOnScroll;
 @property (nonatomic, strong) NSNumber* buttonColor;
 @property (nonatomic, strong) NSNumber* translucent;
 @property (nonatomic, strong) NSNumber* transparent;
 @property (nonatomic, strong) NSNumber* drawBehind;
-@property (nonatomic, strong) NSNumber* textFontSize;
 @property (nonatomic, strong) NSNumber* noBorder;
 @property (nonatomic, strong) NSNumber* blur;
 @property (nonatomic, strong) NSNumber* animate;
 @property (nonatomic, strong) NSNumber* largeTitle;
 @property (nonatomic, strong) NSString* testID;
+@property (nonatomic, strong) RNNTitleOptions* title;
 
-@property (nonatomic, strong) NSString* customTitleViewName;
-@property (nonatomic, strong) NSString* customViewName;
+@property (nonatomic, strong) NSString* componentName;
+@property (nonatomic, strong) NSString* backgroundComponentName;
 
 @end

lib/ios/RNNTopBarOptions.m

@@ -13,18 +13,21 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 
 @implementation RNNTopBarOptions
 
+- (instancetype)initWithDict:(NSDictionary *)dict {
+	self = [super initWithDict:dict];
+	self.title = [RNNTitleOptions new];
+	return self;
+}
+
 - (void)applyOn:(UIViewController*)viewController {
+	[self.title applyOn:viewController];
 	if (self.backgroundColor) {
 		UIColor* backgroundColor = [RCTConvert UIColor:self.backgroundColor];
 		viewController.navigationController.navigationBar.barTintColor = backgroundColor;
 	} else {
 		viewController.navigationController.navigationBar.barTintColor = nil;
 	}
-	
-	if (self.title) {
-		viewController.navigationItem.title = self.title;
-	}
-	
+
 	if (@available(iOS 11.0, *)) {
 		if (self.largeTitle){
 			if ([self.largeTitle boolValue]) {
@@ -40,26 +43,7 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 	}
 	
 	
-	if (self.textFontFamily || self.textFontSize || self.textColor) {
-		NSMutableDictionary* navigationBarTitleTextAttributes = [NSMutableDictionary new];
-		if (self.textColor) {
-			navigationBarTitleTextAttributes[NSForegroundColorAttributeName] = [RCTConvert UIColor:[self valueForKey:@"textColor"]];
-		}
-		if (self.textFontFamily){
-			if(self.textFontSize) {
-				navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont fontWithName:self.textFontFamily size:[self.textFontSize floatValue]];
-			} else {
-				navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont fontWithName:self.textFontFamily size:20];
-			}
-		} else if (self.textFontSize) {
-			navigationBarTitleTextAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:[self.textFontSize floatValue]];
-		}
-		viewController.navigationController.navigationBar.titleTextAttributes = navigationBarTitleTextAttributes;
-		if (@available(iOS 11.0, *)){
-			viewController.navigationController.navigationBar.largeTitleTextAttributes = navigationBarTitleTextAttributes;
-		}
-		
-	}
+	
 	
 	
 	if (self.visible) {

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -81,6 +81,8 @@
 		504AFE751FFFF0540076E904 /* RNNTopTabsOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 504AFE731FFFF0540076E904 /* RNNTopTabsOptions.m */; };
 		504AFE761FFFF1E00076E904 /* RNNNavigationOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = E83BAD691F27362500A9F3DD /* RNNNavigationOptions.h */; };
 		504AFE771FFFF1E20076E904 /* RNNTopBarOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = A7626BFE1FC2FB6700492FB8 /* RNNTopBarOptions.h */; };
+		50570B262061473D006A1B5C /* RNNTitleOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 50570B242061473D006A1B5C /* RNNTitleOptions.h */; };
+		50570B272061473D006A1B5C /* RNNTitleOptions.m in Sources */ = {isa = PBXBuildFile; fileRef = 50570B252061473D006A1B5C /* RNNTitleOptions.m */; };
 		50762D08205E96C200E3D18A /* RNNModalAnimation.h in Headers */ = {isa = PBXBuildFile; fileRef = 50762D06205E96C200E3D18A /* RNNModalAnimation.h */; };
 		50762D09205E96C200E3D18A /* RNNModalAnimation.m in Sources */ = {isa = PBXBuildFile; fileRef = 50762D07205E96C200E3D18A /* RNNModalAnimation.m */; };
 		507E7D57201DDD3000444E6C /* RNNAnimationOptions.h in Headers */ = {isa = PBXBuildFile; fileRef = 507E7D55201DDD3000444E6C /* RNNAnimationOptions.h */; };
@@ -268,6 +270,8 @@
 		504AFE631FFE53070076E904 /* RNNOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNOptions.m; sourceTree = "<group>"; };
 		504AFE721FFFF0540076E904 /* RNNTopTabsOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTopTabsOptions.h; sourceTree = "<group>"; };
 		504AFE731FFFF0540076E904 /* RNNTopTabsOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNTopTabsOptions.m; sourceTree = "<group>"; };
+		50570B242061473D006A1B5C /* RNNTitleOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNTitleOptions.h; sourceTree = "<group>"; };
+		50570B252061473D006A1B5C /* RNNTitleOptions.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNTitleOptions.m; sourceTree = "<group>"; };
 		50762D06205E96C200E3D18A /* RNNModalAnimation.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNModalAnimation.h; sourceTree = "<group>"; };
 		50762D07205E96C200E3D18A /* RNNModalAnimation.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNNModalAnimation.m; sourceTree = "<group>"; };
 		507E7D55201DDD3000444E6C /* RNNAnimationOptions.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RNNAnimationOptions.h; sourceTree = "<group>"; };
@@ -485,6 +489,8 @@
 				E83BAD6A1F27363A00A9F3DD /* RNNNavigationOptions.m */,
 				A7626BFE1FC2FB6700492FB8 /* RNNTopBarOptions.h */,
 				A7626BFC1FC2FB2C00492FB8 /* RNNTopBarOptions.m */,
+				50570B242061473D006A1B5C /* RNNTitleOptions.h */,
+				50570B252061473D006A1B5C /* RNNTitleOptions.m */,
 				A7626BFF1FC578AB00492FB8 /* RNNBottomTabsOptions.h */,
 				A7626C001FC5796200492FB8 /* RNNBottomTabsOptions.m */,
 				50EB933F1FE14A3E00BD8EEE /* RNNBottomTabOptions.h */,
@@ -768,6 +774,7 @@
 				263905B31E4C6F440023D7D3 /* MMDrawerVisualState.h in Headers */,
 				50451D092042E20600695F00 /* RNNTransitionsOptions.h in Headers */,
 				E8A5CD621F49114F00E89D0D /* RNNElement.h in Headers */,
+				50570B262061473D006A1B5C /* RNNTitleOptions.h in Headers */,
 				504AFE741FFFF0540076E904 /* RNNTopTabsOptions.h in Headers */,
 				E8E5182E1F83A48B000467AC /* RNNTransitionStateHolder.h in Headers */,
 				507E7D57201DDD3000444E6C /* RNNAnimationOptions.h in Headers */,
@@ -902,6 +909,7 @@
 				261F0E6B1E6F028A00989DE2 /* RNNNavigationStackManager.m in Sources */,
 				5016E8F020209690009D4F7C /* RNNCustomTitleView.m in Sources */,
 				E8DA24411F97459B00CD552B /* RNNElementFinder.m in Sources */,
+				50570B272061473D006A1B5C /* RNNTitleOptions.m in Sources */,
 				263905BF1E4C6F440023D7D3 /* RCCTheSideBarManagerViewController.m in Sources */,
 				7B1126A01E2D263F00F9B03B /* RNNEventEmitter.m in Sources */,
 				A7626BFD1FC2FB2C00492FB8 /* RNNTopBarOptions.m in Sources */,

lib/ios/ReactNativeNavigationTests/RNNCommandsHandlerTest.m

@@ -63,7 +63,7 @@
 
 -(void)testDynamicStylesMergeWithStaticStyles {
 	RNNNavigationOptions* initialOptions = [[RNNNavigationOptions alloc] init];
-	[initialOptions.topBar setTitle:@"the title"];
+	initialOptions.topBar.title.text = @"the title";
 	RNNRootViewController* vc = [[RNNRootViewController alloc] initWithName:@"name"
 																withOptions:initialOptions
 															withComponentId:@"componentId"

lib/ios/ReactNativeNavigationTests/RNNNavigationOptionsTest.m

@@ -22,9 +22,9 @@
 
 - (void)testChangeRNNNavigationOptionsDynamically {
 	RNNNavigationOptions* options = [[RNNNavigationOptions alloc] initWithDict:@{@"topBar": @{@"backgroundColor" : @(0xff0000ff)}}];
-	NSDictionary* dynamicOptions = @{@"topBar": @{@"textColor" : @(0xffff00ff), @"title" : @"hello"}};
+	NSDictionary* dynamicOptions = @{@"topBar": @{@"textColor" : @(0xffff00ff), @"title" : @{@"text": @"hello"}}};
 	[options mergeWith:dynamicOptions];
-	XCTAssertTrue([options.topBar.title isEqual:@"hello"]);
+	XCTAssertTrue([options.topBar.title.text isEqual:@"hello"]);
 }
 
 - (void)testChangeRNNNavigationOptionsWithInvalidProperties {

lib/ios/ReactNativeNavigationTests/RNNRootViewControllerTest.m

@@ -106,7 +106,7 @@
 
 -(void)testTitle_string{
 	NSString* title =@"some title";
-	self.options.topBar.title = title;
+	self.options.topBar.title.text = title;
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
 	
 	[self.uut viewWillAppear:false];
@@ -122,7 +122,7 @@
 
 -(void)testTopBarTextColor_validColor{
 	NSNumber* inputColor = @(0xFFFF0000);
-	self.options.topBar.textColor = inputColor;
+	self.options.topBar.title.color = inputColor;
 	__unused UINavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
@@ -156,7 +156,7 @@
 -(void)testTopBarTextFontFamily_validFont{
 	NSString* inputFont = @"HelveticaNeue";
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
-	self.options.topBar.textFontFamily = inputFont;
+	self.options.topBar.title.fontFamily = inputFont;
 	[self.uut viewWillAppear:false];
 	UIFont* expectedFont = [UIFont fontWithName:inputFont size:20];
 	XCTAssertTrue([self.uut.navigationController.navigationBar.titleTextAttributes[@"NSFont"] isEqual:expectedFont]);
@@ -227,7 +227,7 @@
 
 -(void)testTopBarTextFontSize_withoutTextFontFamily_withoutTextColor {
 	NSNumber* topBarTextFontSizeInput = @(15);
-	self.options.topBar.textFontSize = topBarTextFontSizeInput;
+	self.options.topBar.title.fontSize = topBarTextFontSizeInput;
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	UIFont* expectedFont = [UIFont systemFontOfSize:15];
@@ -237,8 +237,8 @@
 -(void)testTopBarTextFontSize_withoutTextFontFamily_withTextColor {
 	NSNumber* topBarTextFontSizeInput = @(15);
 	NSNumber* inputColor = @(0xFFFF0000);
-	self.options.topBar.textFontSize = topBarTextFontSizeInput;
-	self.options.topBar.textColor = inputColor;
+	self.options.topBar.title.fontSize = topBarTextFontSizeInput;
+	self.options.topBar.title.color = inputColor;
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	UIFont* expectedFont = [UIFont systemFontOfSize:15];
@@ -251,9 +251,9 @@
 	NSNumber* topBarTextFontSizeInput = @(15);
 	NSNumber* inputColor = @(0xFFFF0000);
 	NSString* inputFont = @"HelveticaNeue";
-	self.options.topBar.textFontSize = topBarTextFontSizeInput;
-	self.options.topBar.textColor = inputColor;
-	self.options.topBar.textFontFamily = inputFont;
+	self.options.topBar.title.fontSize = topBarTextFontSizeInput;
+	self.options.topBar.title.color = inputColor;
+	self.options.topBar.title.fontFamily = inputFont;
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	UIColor* expectedColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:1];
@@ -265,8 +265,8 @@
 -(void)testTopBarTextFontSize_withTextFontFamily_withoutTextColor {
 	NSNumber* topBarTextFontSizeInput = @(15);
 	NSString* inputFont = @"HelveticaNeue";
-	self.options.topBar.textFontSize = topBarTextFontSizeInput;
-	self.options.topBar.textFontFamily = inputFont;
+	self.options.topBar.title.fontSize = topBarTextFontSizeInput;
+	self.options.topBar.title.fontFamily = inputFont;
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
 	[self.uut viewWillAppear:false];
 	UIFont* expectedFont = [UIFont fontWithName:inputFont size:15];
@@ -277,7 +277,7 @@
 -(void)testTopBarTextFontFamily_invalidFont{
 	NSString* inputFont = @"HelveticaNeueeeee";
 	__unused RNNNavigationController* nav = [[RNNNavigationController alloc] initWithRootViewController:self.uut];
-	self.options.topBar.textFontFamily = inputFont;
+	self.options.topBar.title.fontFamily = inputFont;
 	//	XCTAssertThrows([self.uut viewWillAppear:false]);
 }
 

lib/src/commands/LayoutTreeParser.test.ts

@@ -124,7 +124,7 @@ describe('LayoutTreeParser', () => {
       expect(result.children[1].children[0].children[2].children[0].type).toEqual('TopTabs');
       expect(result.children[1].children[0].children[2].children[0].children[2].type).toEqual('TopTabs');
       expect(result.children[1].children[0].children[2].children[0].children[2].children[4].type).toEqual('Stack');
-      expect(result.children[1].children[0].children[2].children[0].children[2].data).toEqual({ options: { topBar: { title: 'Hello1' } } });
+      expect(result.children[1].children[0].children[2].children[0].children[2].data).toEqual({ options: { topBar: { title: { text: 'Hello1'} } } });
     });
   });
 
@@ -163,7 +163,9 @@ const passProps = {
 
 const options = {
   topBar: {
-    title: 'Hello1'
+    title: {
+      text: 'Hello1'
+    }
   }
 };
 

playground/src/screens/BackHandlerModalScreen.js

@@ -7,7 +7,9 @@ class BackHandlerModalScreen extends Component {
   static get options() {
     return {
       topBar: {
-        title: 'Back Handler'
+        title: {
+          text: 'Back Handler'
+        }
       }
     };
   }

playground/src/screens/BackHandlerScreen.js

@@ -7,9 +7,11 @@ class BackHandlerScreen extends Component {
   static get options() {
     return {
       topBar: {
-        title: 'Back Handler',
-        textColor: 'black',
-        textFontSize: 16
+        title: {
+          text: 'Back Handler',
+          color: 'black',
+          fontSize: 16
+        }
       }
     };
   }

playground/src/screens/CustomTopBar.js

@@ -42,6 +42,6 @@ const styles = StyleSheet.create({
   },
   text: {
     alignSelf: 'center',
-    color: Platform.OS === 'ios' ? 'black' : 'white'
+    color: 'black'
   }
 });

playground/src/screens/CustomTransitionDestination.js

@@ -14,8 +14,10 @@ class CustomTransitionDestination extends Component {
     return {
       backButtonTransition: 'custom',
       topBar: {
-        title: 'ye babyyyyyy',
-        textFontFamily: 'HelveticaNeue-Italic',
+        title: {
+          text: 'ye babyyyyyy',
+          fontFamily: 'HelveticaNeue-Italic'
+        },
         largeTitle: true
       }
     };

playground/src/screens/CustomTransitionOrigin.js

@@ -11,8 +11,10 @@ class CustomTransitionOrigin extends Component {
   static get options() {
     return {
       topBar: {
-        textFontFamily: 'HelveticaNeue-Italic',
-        textFontSize: 16,
+        title: {
+          fontFamily: 'HelveticaNeue-Italic',
+          fontSize: 16
+        },
         largeTitle: false,
         translucent: true
       }

playground/src/screens/OptionsScreen.js

@@ -17,16 +17,18 @@ class OptionsScreen extends Component {
   static get options() {
     return {
       topBar: {
-        title: 'Static Title',
-        textColor: 'black',
+        title: {
+          text: 'Static Title',
+          color: 'black',
+          fontSize: 16,
+          fontFamily: 'HelveticaNeue-Italic',
+          largeTitle: false,
+        },
         ...Platform.select({
           android: { drawBehind: true },
           ios: { drawBehind: false, }
         }),
-        largeTitle: false,
         visible: true,
-        textFontSize: 16,
-        textFontFamily: 'HelveticaNeue-Italic',
         testID: testIDs.TOP_BAR_ELEMENT,
         rightButtons: [
           {
@@ -105,12 +107,11 @@ class OptionsScreen extends Component {
         <Button title='Top Bar Opaque' onPress={this.onClickTopBarOpaque} />
         <Button title='scrollView Screen' testID={testIDs.SCROLLVIEW_SCREEN_BUTTON} onPress={this.onClickScrollViewScreen} />
         <Button title='Custom Transition' testID={testIDs.CUSTOM_TRANSITION_BUTTON} onPress={this.onClickCustomTranstition} />
-        {Platform.OS === 'android' ?
-          <Button title='Hide fab' testID={testIDs.HIDE_FAB} onPress={this.onClickFab} />
-          : null}
+        {Platform.OS === 'android' ? <Button title='Hide fab' testID={testIDs.HIDE_FAB} onPress={this.onClickFab} /> : null}
         <Button title='Show overlay' testID={testIDs.SHOW_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(true)} />
         <Button title='Show touch through overlay' testID={testIDs.SHOW_TOUCH_THROUGH_OVERLAY_BUTTON} onPress={() => this.onClickShowOverlay(false)} />
         <Button title='Push Default Options Screen' testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
+        <Button title='Show TopBar react view' testID={testIDs.SHOW_TOPBAR_REACT_VIEW} onPress={this.onShowTopBarReactView} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );
@@ -161,12 +162,14 @@ class OptionsScreen extends Component {
   onClickDynamicOptions() {
     Navigation.setOptions(this.props.componentId, {
       topBar: {
-        title: 'Dynamic Title',
-        textColor: '#00FFFF',
-        largeTitle: false,
+        title: {
+          text: 'Dynamic Title',
+          color: '#00FFFF',
+          largeTitle: false,
+          fontSize: 20,
+          fontFamily: 'HelveticaNeue-CondensedBold'
+        },
         buttonColor: 'red',
-        textFontSize: 20,
-        textFontFamily: 'HelveticaNeue-CondensedBold'
       }
     });
   }
@@ -256,6 +259,17 @@ class OptionsScreen extends Component {
       }
     });
   }
+
+  onShowTopBarReactView = () => {
+    Navigation.setOptions(this.props.componentId, {
+      topBar: {
+        title: {
+          component: 'navigation.playground.CustomTopBar',
+          alignment: 'fill'
+        }
+      }
+    });
+  }
 }
 
 const styles = {

playground/src/screens/PushedScreen.js

@@ -52,7 +52,9 @@ class PushedScreen extends Component {
         },
         options: {
           topBar: {
-            title: `Pushed ${this.getStackPosition() + 1}`
+            title: {
+              text: `Pushed ${this.getStackPosition() + 1}`
+            }
           }
         }
       }

playground/src/screens/ScrollViewScreen.js

@@ -12,10 +12,12 @@ class ScrollViewScreen extends Component {
   static get options() {
     return {
       topBar: {
-        title: 'Collapse',
+        title: {
+          text: 'Collapse',
+          color: 'black',
+          fontSize: 16
+        },
         drawBehind: true,
-        textColor: 'black',
-        textFontSize: 16,
         visible: true,
         testID: testIDs.TOP_BAR_ELEMENT
       },

playground/src/screens/TopTabOptionsScreen.js

@@ -8,9 +8,11 @@ class TopTabOptionsScreen extends PureComponent {
   static get options() {
     return {
       topBar: {
-        textColor: 'black',
-        textFontSize: 16,
-        textFontFamily: 'HelveticaNeue-Italic'
+        title: {
+          color: 'black',
+          fontSize: 16,
+          fontFamily: 'HelveticaNeue-Italic'
+        }
       }
     };
   }
@@ -33,12 +35,14 @@ class TopTabOptionsScreen extends PureComponent {
   onClickDynamicOptions() {
     Navigation.setOptions(this.props.componentId, {
       topBar: {
-        title: 'Dynamic Title',
-        textColor: '#00FFFF',
+        title: {
+          text: 'Dynamic Title',
+          color: '#00FFFF',
+          fontSize: 16,
+          fontFamily: 'HelveticaNeue-CondensedBold'
+        },
         largeTitle: false,
         buttonColor: 'red',
-        textFontSize: 20,
-        textFontFamily: 'HelveticaNeue-CondensedBold'
       }
     });
   }

playground/src/screens/TopTabScreen.js

@@ -8,9 +8,11 @@ class TopTabScreen extends PureComponent {
   static get options() {
     return {
       topBar: {
-        textColor: 'black',
-        textFontSize: 16,
-        textFontFamily: 'HelveticaNeue-Italic'
+        title: {
+          color: 'black',
+          fontSize: 16,
+          fontFamily: 'HelveticaNeue-Italic'
+        }
       },
       fab: {
         id: FAB,

playground/src/screens/WelcomeScreen.js

@@ -10,7 +10,10 @@ class WelcomeScreen extends Component {
   static get options() {
     return {
       topBar: {
-        largeTitle: false,
+        title: {
+          largeTitle: false,
+          title: 'My Screen'
+        },
         drawBehind: true,
         visible: false,
         animate: false
@@ -57,7 +60,9 @@ class WelcomeScreen extends Component {
                     options: {
                       topBar: {
                         visible: true,
-                        title: 'React Native Navigation!'
+                        title: {
+                          text: 'React Native Navigation!'
+                        }
                       }
                     }
                   }
@@ -216,7 +221,9 @@ class WelcomeScreen extends Component {
         name: 'navigation.playground.PushedScreen',
         options: {
           topBar: {
-            title: 'pushed'
+            title: {
+              text: 'pushed'
+            }
           }
         }
       }
@@ -232,7 +239,9 @@ class WelcomeScreen extends Component {
         },
         options: {
           topBar: {
-            title: 'pushed',
+            title: {
+              text: 'pushed'
+            },
             visible: true,
             testID: testIDs.TOP_BAR_ELEMENT
           }
@@ -299,10 +308,14 @@ class WelcomeScreen extends Component {
               },
               options: {
                 topTab: {
-                  title: 'Tab 1'
+                  title: {
+                    text: 'Tab 1'
+                  }
                 },
                 topBar: {
-                  title: 'One'
+                  title: {
+                    text: 'One'
+                  }
                 }
               }
             }
@@ -320,7 +333,9 @@ class WelcomeScreen extends Component {
                   titleFontFamily: 'HelveticaNeue-Italic'
                 },
                 topBar: {
-                  title: 'Two'
+                  title: {
+                    text: 'Two'
+                  }
                 }
               }
             }
@@ -337,7 +352,9 @@ class WelcomeScreen extends Component {
                   title: 'Tab 3'
                 },
                 topBar: {
-                  title: 'Three'
+                  title: {
+                    text: 'Three'
+                  }
                 }
               }
             }
@@ -385,7 +402,9 @@ class WelcomeScreen extends Component {
     });
     Navigation.setOptions('my unique id', {
       topBar: {
-        title: 'User provided id'
+        title: {
+          text: 'User provided id'
+        }
       }
     });
   }

playground/src/testIDs.js

@@ -9,6 +9,7 @@ module.exports = {
   PUSH_BUTTON: `PUSH_BUTTON`,
   PUSH_OPTIONS_BUTTON: `PUSH_OPTIONS_BUTTON`,
   PUSH_DEFAULT_OPTIONS_BUTTON: `PUSH_DEFAULT_OPTIONS_BUTTON`,
+  SHOW_TOPBAR_REACT_VIEW: `SHOW_TOPBAR_REACT_VIEW`,
   BACK_HANDLER_BUTTON: `BACK_HANDLER_BUTTON`,
   SHOW_MODAL_BUTTON: `SHOW_MODAL_BUTTON`,
   SHOW_REDBOX_BUTTON: `SHOW_REDBOX_BUTTON`,