Merge branch 'v2' of https://github.com/wix/react-native-navigation into v2

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,88 @@
+package com.reactnativenavigation.parse;
+
+import android.graphics.Typeface;
+import android.support.annotation.Nullable;
+import android.util.Log;
+
+import com.reactnativenavigation.BuildConfig;
+import com.reactnativenavigation.parse.params.Color;
+import com.reactnativenavigation.parse.params.Fraction;
+import com.reactnativenavigation.parse.params.NullColor;
+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(""));
+
+        validate(options);
+
+        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;
+        validate(this);
+    }
+
+    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;
+        validate(this);
+    }
+
+    private static void validate(TitleOptions options) {
+        if (options.component.hasValue() && options.text.hasValue()) {
+            if (BuildConfig.DEBUG) Log.w("RNN", "A screen can't use both text and component - clearing text.");
+            options.text = new Text("");
+        }
+    }
+}

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

@@ -16,21 +16,15 @@ import java.util.ArrayList;
 
 public class OptionsPresenter {
     private TopBar topBar;
-    private Component component;
-
-    public OptionsPresenter(TopBar topBar, Component component) {
-        this.topBar = topBar;
-        this.component = component;
-    }
 
     public OptionsPresenter(TopBar topBar) {
         this.topBar = topBar;
     }
 
-    public void applyOptions(Options options) {
+    public void applyChildOptions(Options options, Component child) {
         applyOrientation(options.orientationOptions);
         applyButtons(options.topBarOptions.leftButtons, options.topBarOptions.rightButtons);
-        applyTopBarOptions(options.topBarOptions);
+        applyTopBarOptions(options.topBarOptions, child);
         applyTopTabsOptions(options.topTabsOptions);
         applyTopTabOptions(options.topTabOptions);
     }
@@ -39,14 +33,15 @@ public class OptionsPresenter {
         ((Activity) topBar.getContext()).setRequestedOrientation(options.getValue());
     }
 
-    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);
+    private void applyTopBarOptions(TopBarOptions options, Component component) {
+        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);
         }
@@ -58,7 +53,6 @@ public class OptionsPresenter {
         } else if (options.drawBehind.isFalseOrUndefined()) {
             component.drawBelowTopBar(topBar);
         }
-
         if (options.hideOnScroll.isTrue()) {
             if (component instanceof IReactView) {
                 topBar.enableCollapse(((IReactView) component).getScrollEventListener());

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

@@ -62,7 +62,7 @@ public class ComponentViewController extends ViewController<ComponentLayout> imp
     public void mergeOptions(Options options) {
         this.options = this.options.mergeWith(options);
         view.applyOptions(this.options);
-        applyOnParentController(parentController -> parentController.applyOptions(this.options, view));
+        applyOnParentController(parentController -> parentController.applyChildOptions(this.options, view));
     }
 
     ReactComponent getComponent() {

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

@@ -57,7 +57,7 @@ public abstract class ParentController<T extends ViewGroup> extends ViewControll
     }
 
     @CallSuper
-    public void applyOptions(Options options, Component childComponent) {
+    public void applyChildOptions(Options options, Component child) {
         mergeChildOptions(options);
     }
 

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

@@ -49,10 +49,10 @@ public class SideMenuController extends ParentController<DrawerLayout> implement
 	}
 
     @Override
-    public void applyOptions(Options options, Component childComponent) {
-        super.applyOptions(options, childComponent);
+    public void applyChildOptions(Options options, Component child) {
+        super.applyChildOptions(options, child);
         applyOnParentController(parentController ->
-                ((ParentController) parentController).applyOptions(this.options, childComponent)
+                ((ParentController) parentController).applyChildOptions(this.options, child)
         );
     }
 

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,28 +26,30 @@ 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) {
         super.applyOptions(options);
-        getView().applyOptions(options);
+        getView().applyChildOptions(options);
     }
 
     @Override
-    public void applyOptions(Options options, Component component) {
-        super.applyOptions(options, component);
-        getView().applyOptions(this.options, component);
+    public void applyChildOptions(Options options, Component child) {
+        super.applyChildOptions(options, child);
+        getView().applyChildOptions(this.options, child);
         applyOnParentController(parentController ->
-                ((ParentController) parentController).applyOptions(this.options.copy().clearTopBarOptions(), component)
+                ((ParentController) parentController).applyChildOptions(this.options.copy().clearTopBarOptions(), child)
         );
-        if (component instanceof ReactComponent) {
-            fabOptionsPresenter.applyOptions(options.fabOptions, (ReactComponent) component, getView());
+        if (child instanceof ReactComponent) {
+            fabOptionsPresenter.applyOptions(options.fabOptions, (ReactComponent) child, getView());
         }
         animator.setOptions(options.animationsOptions);
     }
@@ -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,38 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+
+import com.reactnativenavigation.parse.Options;
+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;
+
+    public TitleBarReactViewController(Activity activity, TitleBarReactViewCreator reactViewCreator) {
+        super(activity, CompatUtils.generateViewId() + "", new Options());
+        this.reactViewCreator = reactViewCreator;
+    }
+
+    public TitleBarReactViewController(TitleBarReactViewController reactViewController) {
+        super(reactViewController.getActivity(), CompatUtils.generateViewId() + "", new Options());
+        this.reactViewCreator = reactViewController.reactViewCreator;
+    }
+
+    @Override
+    protected TitleBarReactView createView() {
+        return reactViewCreator.create(getActivity(), getId(), componentName);
+    }
+
+    @Override
+    public void sendOnNavigationButtonPressed(String buttonId) {
+
+    }
+
+    public void setComponent(String componentName) {
+        this.componentName = componentName;
+    }
+}

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/viewcontrollers/ViewController.java

@@ -15,6 +15,7 @@ import com.reactnativenavigation.presentation.FabOptionsPresenter;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.utils.StringUtils;
 import com.reactnativenavigation.utils.Task;
+import com.reactnativenavigation.utils.UiUtils;
 import com.reactnativenavigation.views.Component;
 
 public abstract class ViewController<T extends ViewGroup> implements ViewTreeObserver.OnGlobalLayoutListener {
@@ -155,7 +156,7 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         applyOptions(options);
         applyOnParentController(parentController -> {
             parentController.clearOptions();
-            if (getView() instanceof Component) parentController.applyOptions(options, (Component) getView());
+            if (getView() instanceof Component) parentController.applyChildOptions(options, (Component) getView());
         });
     }
 
@@ -201,6 +202,10 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
         }
     }
 
+    public void runOnPreDraw(Task<T> task) {
+        UiUtils.runOnPreDrawOnce(getView(), () -> task.run(getView()));
+    }
+
     public abstract void sendOnNavigationButtonPressed(String buttonId);
 
     protected boolean isViewShown() {

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

@@ -57,12 +57,12 @@ public class BottomTabsController extends ParentController implements AHBottomNa
     }
 
     @Override
-    public void applyOptions(Options options, Component childComponent) {
-        super.applyOptions(options, childComponent);
-        int tabIndex = bottomTabFinder.findByComponent(childComponent);
+    public void applyChildOptions(Options options, Component child) {
+        super.applyChildOptions(options, child);
+        int tabIndex = bottomTabFinder.findByComponent(child);
         if (tabIndex >= 0) new BottomTabsOptionsPresenter(bottomTabs, bottomTabFinder).present(this.options, tabIndex);
         applyOnParentController(parentController ->
-                ((ParentController) parentController).applyOptions(this.options.copy().clearBottomTabsOptions().clearBottomTabOptions(), childComponent)
+                ((ParentController) parentController).applyChildOptions(this.options.copy().clearBottomTabsOptions().clearBottomTabOptions(), child)
         );
     }
 

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

@@ -79,11 +79,11 @@ public class TopTabsController extends ParentController<TopTabsViewPager> implem
     }
 
     @Override
-    public void applyOptions(Options options, Component childComponent) {
-        super.applyOptions(options, childComponent);
+    public void applyChildOptions(Options options, Component child) {
+        super.applyChildOptions(options, child);
         applyOnParentController(parentController -> {
                 Options opt = this.options.copy();
-                ((ParentController) parentController).applyOptions(opt.clearTopTabOptions().clearTopTabsOptions(), childComponent);
+                ((ParentController) parentController).applyChildOptions(opt.clearTopTabOptions().clearTopTabsOptions(), child);
             }
         );
     }

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;
@@ -18,21 +19,27 @@ import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
 @SuppressLint("ViewConstructor")
 public class StackLayout extends RelativeLayout {
     private TopBar topBar;
+    private final OptionsPresenter optionsPresenter;
 
-    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);
+        createLayout(topBarButtonCreator, titleBarReactViewCreator, topBarButtonClickListener);
+        optionsPresenter = new OptionsPresenter(topBar);
+        setContentDescription("StackLayout");
+    }
+
+    private void createLayout(ReactViewCreator topBarButtonCreator, TitleBarReactViewCreator titleBarReactViewCreator, TopBarButtonController.OnClickListener topBarButtonClickListener) {
+        topBar = new TopBar(getContext(), topBarButtonCreator, titleBarReactViewCreator, topBarButtonClickListener, this);
         topBar.setId(CompatUtils.generateViewId());
         addView(topBar, MATCH_PARENT, WRAP_CONTENT);
-        setContentDescription("StackLayout");
     }
 
-    public void applyOptions(Options options) {
-        new OptionsPresenter(topBar).applyOrientation(options.orientationOptions);
+    public void applyChildOptions(Options options) {
+        optionsPresenter.applyOrientation(options.orientationOptions);
     }
 
-    public void applyOptions(Options options, Component component) {
-        new OptionsPresenter(topBar, component).applyOptions(options);
+    public void applyChildOptions(Options options, Component child) {
+        optionsPresenter.applyChildOptions(options, child);
     }
 
     public void onChildWillDisappear(Options disappearing, Options appearing) {
@@ -55,9 +62,4 @@ public class StackLayout extends RelativeLayout {
     public TopBar getTopBar() {
         return topBar;
     }
-
-    @RestrictTo(RestrictTo.Scope.TESTS)
-    public void setTopBar(TopBar topBar) {
-        this.topBar = topBar;
-    }
 }

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;
@@ -7,29 +7,37 @@ import android.graphics.Typeface;
 import android.support.annotation.Nullable;
 import android.support.v7.widget.Toolbar;
 import android.util.Log;
+import android.view.Gravity;
 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;
 import java.util.List;
 
+import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
 @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 +47,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);
+        addView(reactViewController.getView(), getComponentLayoutParams(alignment));
+    }
+
+    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);
     }
 
@@ -69,6 +82,12 @@ public class TitleBar extends Toolbar {
         setTitle(null);
         clearRightButtons();
         clearLeftButton();
+        clearComponent();
+    }
+
+    private void clearComponent() {
+        reactViewController.destroy();
+        reactViewController = new TitleBarReactViewController(reactViewController);
     }
 
     private void clearLeftButton() {
@@ -137,4 +156,14 @@ public class TitleBar extends Toolbar {
         }
         return null;
     }
+
+    public Toolbar.LayoutParams getComponentLayoutParams(TitleOptions.Alignment alignment) {
+        if (alignment == TitleOptions.Alignment.Fill) {
+            return new LayoutParams(MATCH_PARENT, getHeight());
+        } else {
+            LayoutParams lp = new LayoutParams(WRAP_CONTENT, getHeight());
+            lp.gravity = Gravity.CENTER;
+            return lp;
+        }
+    }
 }

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

@@ -0,0 +1,23 @@
+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);
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+        super.onMeasure(
+                getChildCount() > 0 ? MeasureSpec.makeMeasureSpec(getChildAt(0).getWidth(), MeasureSpec.EXACTLY) : widthMeasureSpec,
+                heightMeasureSpec
+        );
+    }
+}

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,14 +132,14 @@ 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());
 
         child1.onViewAppeared();
         ArgumentCaptor<Options> optionsCaptor = ArgumentCaptor.forClass(Options.class);
         ArgumentCaptor<ReactComponent> viewCaptor = ArgumentCaptor.forClass(ReactComponent.class);
-        verify(stack, times(1)).applyOptions(optionsCaptor.capture(), viewCaptor.capture());
+        verify(stack, times(1)).applyChildOptions(optionsCaptor.capture(), viewCaptor.capture());
         assertThat(viewCaptor.getValue()).isEqualTo(child1.getView());
         assertThat(optionsCaptor.getValue().bottomTabsOptions.tabColor.hasValue()).isFalse();
     }
@@ -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();
@@ -131,15 +132,15 @@ public class ParentControllerTest extends BaseTest {
         ArgumentCaptor<Options> optionsCaptor = ArgumentCaptor.forClass(Options.class);
         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");
+        verify(uut, times(1)).applyChildOptions(optionsCaptor.capture(), viewCaptor.capture());
+        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()));
@@ -87,7 +88,7 @@ public class StackControllerTest extends BaseTest {
             @Override
             public void resolve(@Nullable Object value) {
                 uut.pop(new MockPromise());
-                verify(uut, times(1)).applyOptions(uut.options, eq((ReactComponent) child1.getView()));
+                verify(uut, times(1)).applyChildOptions(uut.options, eq((ReactComponent) child1.getView()));
             }
         });
     }
@@ -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);
@@ -351,7 +352,6 @@ public class StackControllerTest extends BaseTest {
     @Test
     public void pop_animatesTopBarIfNeeded() throws Exception {
         uut.ensureViewIsCreated();
-        uut.getView().setTopBar(spy(uut.getTopBar()));
 
         child1.options.topBarOptions.visible = new Bool(false);
         child1.options.topBarOptions.animate = new Bool(false);
@@ -409,7 +409,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 +418,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();
@@ -431,8 +431,8 @@ 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();
+        verify(parent, times(1)).applyChildOptions(optionsCaptor.capture(), viewCaptor.capture());
+        assertThat(optionsCaptor.getValue().topBarOptions.title.text.hasValue()).isFalse();
     }
 
     @Test
@@ -456,4 +456,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,15 +1,22 @@
 package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
+import android.support.v7.widget.Toolbar;
+import android.view.Gravity;
+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;
+import org.mockito.ArgumentCaptor;
 
 import java.util.ArrayList;
 import java.util.Arrays;
@@ -19,6 +26,7 @@ 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.Mockito.spy;
 import static org.mockito.Mockito.times;
 import static org.mockito.Mockito.verify;
@@ -30,14 +38,16 @@ public class TitleBarTest extends BaseTest {
     private Button textButton;
     private Button customButton;
     private Map<String, TopBarButtonController> buttonControllers;
+    private TitleBarReactViewController reactViewController;
 
     @Override
     public void beforeEach() {
         final TopBarButtonCreatorMock buttonCreator = new TopBarButtonCreatorMock();
         final Activity activity = newActivity();
+        reactViewController = spy(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 +130,40 @@ public class TitleBarTest extends BaseTest {
         assertThat(uut.getMenu().getItem(1).getTitle()).isEqualTo(textButton.title.get());
     }
 
+    @Test
+    public void setComponent_addsComponentToTitleBar() throws Exception {
+        uut.setComponent("com.rnn.CustomView", TitleOptions.Alignment.Center);
+        verify(uut, times(1)).addView(any(TitleBarReactView.class), any(Toolbar.LayoutParams.class));
+    }
+
+    @Test
+    public void setComponent_alignFill() throws Exception {
+        uut.setComponent("com.rnn.CustomView", TitleOptions.Alignment.Fill);
+        verify(uut, times(1)).getComponentLayoutParams(TitleOptions.Alignment.Fill);
+        ArgumentCaptor<Toolbar.LayoutParams> lpCaptor = ArgumentCaptor.forClass(Toolbar.LayoutParams.class);
+        verify(uut, times(1)).addView(any(TitleBarReactView.class), lpCaptor.capture());
+        assertThat(lpCaptor.getValue().width == ViewGroup.LayoutParams.MATCH_PARENT);
+    }
+
+    @Test
+    public void setComponent_alignCenter() throws Exception {
+        uut.setComponent("com.rnn.CustomView", TitleOptions.Alignment.Center);
+        verify(uut, times(1)).getComponentLayoutParams(TitleOptions.Alignment.Center);
+        ArgumentCaptor<Toolbar.LayoutParams> lpCaptor = ArgumentCaptor.forClass(Toolbar.LayoutParams.class);
+        verify(uut, times(1)).addView(any(TitleBarReactView.class), lpCaptor.capture());
+        assertThat(lpCaptor.getValue().width == ViewGroup.LayoutParams.WRAP_CONTENT);
+        assertThat(lpCaptor.getValue().gravity == Gravity.CENTER);
+    }
+
+    @Test
+    public void clear() throws Exception {
+        uut.clear();
+        assertThat(uut.getTitle()).isNullOrEmpty();
+        assertThat(uut.getMenu().size()).isZero();
+        assertThat(uut.getNavigationIcon()).isNull();
+        verify(reactViewController, times(1)).destroy();
+    }
+
     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;
@@ -160,7 +166,7 @@ public class TopTabsViewControllerTest extends BaseTest {
         verify(tabControllers.get(1), times(0)).onViewAppeared();
 
         ReactComponent comp = ((ComponentViewController) tabControllers.get(0)).getComponent();
-        verify(uut, times(1)).applyOptions(any(Options.class), eq(comp));
+        verify(uut, times(1)).applyChildOptions(any(Options.class), eq(comp));
     }
 
     @Test
@@ -172,18 +178,18 @@ 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));
+        verify(uut, times(1)).applyChildOptions(any(Options.class), eq(currentTab));
+        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));
+        verify(uut, times(1)).applyChildOptions(any(Options.class), eq(currentTab));
+        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));
+        verify(uut, times(2)).applyChildOptions(any(Options.class), eq(currentTab));
+        assertThat(uut.options.topBarOptions.title.text.get()).isEqualTo(createTabTopBarTitle(0));
     }
 
     private TestReactView getActualTabView(int index) {
@@ -207,7 +213,7 @@ public class TopTabsViewControllerTest extends BaseTest {
         tabControllers.get(0).onViewAppeared();
         ArgumentCaptor<Options> optionsCaptor = ArgumentCaptor.forClass(Options.class);
         ArgumentCaptor<ReactComponent> viewCaptor = ArgumentCaptor.forClass(ReactComponent.class);
-        verify(parentController, times(1)).applyOptions(optionsCaptor.capture(), viewCaptor.capture());
+        verify(parentController, times(1)).applyChildOptions(optionsCaptor.capture(), viewCaptor.capture());
         assertThat(optionsCaptor.getValue().topTabOptions.title.hasValue()).isFalse();
     }
 
@@ -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/RNNBottomTabsOptions.m

@@ -15,6 +15,8 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 	
 	if (self.visible) {
 		[((RNNTabBarController *)viewController.tabBarController) setTabBarHidden:![self.visible boolValue] animated:[self.animate boolValue]];
+	} else {
+		[((RNNTabBarController *)viewController.tabBarController) setTabBarHidden:NO animated:NO];
 	}
 	
 	if (self.testID) {
@@ -31,10 +33,14 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 	
 	if (self.backgroundColor) {
 		viewController.tabBarController.tabBar.barTintColor = [RCTConvert UIColor:self.backgroundColor];
+	} else {
+		viewController.tabBarController.tabBar.barTintColor = nil;
 	}
 	
 	if (self.translucent) {
 		viewController.tabBarController.tabBar.translucent = [self.translucent boolValue];
+	} else {
+		viewController.tabBarController.tabBar.translucent = NO;
 	}
 	
 	if (self.hideShadow) {

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/RNNNavigationButtons.m

@@ -101,6 +101,12 @@
 		[barButtonItem setTintColor:[RCTConvert UIColor: tintColor]];
 	}
 	
+	NSNumber* disabledColor = dictionary[@"disabledColor"];
+	if (disabledColor) {
+		UIColor *color = [RCTConvert UIColor:disabledColor];
+		[barButtonItem setTitleTextAttributes:@{NSForegroundColorAttributeName : color} forState:UIControlStateDisabled];
+	}
+	
 	NSString *testID = dictionary[@"testID"];
 	if (testID)
 	{

lib/ios/RNNNavigationOptions.h

@@ -34,6 +34,7 @@ extern const NSInteger TOP_BAR_TRANSPARENT_TAG;
 @property (nonatomic, strong) id orientation;
 @property (nonatomic, strong) NSNumber* statusBarBlur;
 @property (nonatomic, strong) NSNumber* statusBarHideWithTopBar;
+@property (nonatomic, strong) NSString* statusBarStyle;
 @property (nonatomic, strong) NSNumber* popGesture;
 @property (nonatomic, strong) UIImage* backgroundImage;
 @property (nonatomic, strong) UIImage* rootBackgroundImage;

lib/ios/RNNNavigationOptions.m

@@ -20,6 +20,8 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 -(instancetype)initWithDict:(NSDictionary *)options {
 	self = [super init];
 	self.statusBarHidden = [options objectForKey:@"statusBarHidden"];
+	self.statusBarBlur = [options objectForKey:@"statusBarBlur"];
+	self.statusBarStyle = [options objectForKey:@"statusBarStyle"];
 	self.screenBackgroundColor = [options objectForKey:@"screenBackgroundColor"];
 	self.backButtonTransition = [options objectForKey:@"backButtonTransition"];
 	self.orientation = [options objectForKey:@"orientation"];
@@ -51,9 +53,7 @@ const NSInteger TOP_BAR_TRANSPARENT_TAG = 78264803;
 	}
 }
 
--(void)applyOn:(UIViewController*)viewController {
-//	[_defaultOptions applyOn:viewController];
-	
+-(void)applyOn:(UIViewController*)viewController {	
 	[self.topBar applyOn:viewController];
 	[self.bottomTabs applyOn:viewController];
 	[self.topTab applyOn:viewController];

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;
 }
@@ -109,6 +120,14 @@
 	return NO;
 }
 
+- (UIStatusBarStyle)preferredStatusBarStyle {
+	if (self.options.statusBarStyle && [self.options.statusBarStyle isEqualToString:@"light"]) {
+		return UIStatusBarStyleLightContent;
+	} else {
+		return UIStatusBarStyleDefault;
+	}
+}
+
 - (UIInterfaceOrientationMask)supportedInterfaceOrientations {
 	return self.options.supportedOrientations;
 }

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,29 @@
 #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) NSNumber* backButtonImage;
+@property (nonatomic, strong) NSNumber* backButtonHidden;
+@property (nonatomic, strong) NSString* backButtonTitle;
+@property (nonatomic, strong) NSNumber* hideBackButtonTitle;
 
-@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,22 @@ 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]) {
@@ -39,35 +43,16 @@ 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) {
 		[viewController.navigationController setNavigationBarHidden:![self.visible boolValue] animated:[self.animate boolValue]];
+	} else {
+		[viewController.navigationController setNavigationBarHidden:NO animated:NO];
 	}
 	
 	if (self.hideOnScroll) {
 		viewController.navigationController.hidesBarsOnSwipe = [self.hideOnScroll boolValue];
+	} else {
+		viewController.navigationController.hidesBarsOnSwipe = NO;
 	}
 	
 	if (self.buttonColor) {
@@ -128,6 +113,8 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 	
 	if (self.translucent) {
 		viewController.navigationController.navigationBar.translucent = [self.translucent boolValue];
+	} else {
+		viewController.navigationController.navigationBar.translucent = NO;
 	}
 	
 	if (self.drawBehind) {
@@ -136,6 +123,8 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 		} else {
 			viewController.edgesForExtendedLayout &= ~UIRectEdgeTop;
 		}
+	} else {
+		viewController.edgesForExtendedLayout = UIRectEdgeAll;
 	}
 	
 	if (self.noBorder) {
@@ -156,6 +145,26 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 		_navigationButtons = [[RNNNavigationButtons alloc] initWithViewController:(RNNRootViewController*)viewController];
 		[_navigationButtons applyLeftButtons:self.leftButtons rightButtons:self.rightButtons];
 	}
+	
+	UIImage *image = self.backButtonImage ? [RCTConvert UIImage:self.backButtonImage] : nil;
+	[[UINavigationBar appearance] setBackIndicatorImage:image];
+	[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:image];
+	
+	if (self.hideBackButtonTitle) {
+		self.backButtonTitle = @"";
+	}
+	
+	if (self.backButtonTitle) {
+		UIBarButtonItem *backItem = [[UIBarButtonItem alloc] initWithTitle:self.backButtonTitle
+																	 style:UIBarButtonItemStylePlain
+																	target:nil
+																	action:nil];
+		
+		viewController.navigationItem.backBarButtonItem = backItem;
+	}
+	
+	viewController.navigationItem.hidesBackButton = [self.backButtonHidden boolValue];
+	
 }
 
 -(void)storeOriginalTopBarImages:(UIViewController*)viewController {

lib/ios/ReactNativeNavigation.xcodeproj/project.pbxproj

@@ -77,6 +77,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 */; };
@@ -260,6 +262,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>"; };
@@ -477,6 +481,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 */,
@@ -754,6 +760,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 */,
@@ -888,6 +895,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

@@ -19,7 +19,7 @@ class CustomTopBar extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <TouchableOpacity stye={styles.button} onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
+        <TouchableOpacity onPress={() => Alert.alert(this.props.title, 'Thanks for that :)')}>
           <Text style={styles.text}>Press Me</Text>
         </TouchableOpacity>
       </View>
@@ -32,16 +32,12 @@ module.exports = CustomTopBar;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    flexDirection: 'column',
     justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white'
-  },
-  button: {
-    alignSelf: 'center',
-    backgroundColor: 'green'
+    alignSelf: 'center'
   },
   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,23 +17,25 @@ 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: [
-          {
-            id: CUSTOM_BUTTON,
-            testID: CUSTOM_BUTTON,
-            component: 'CustomTextButton'
-          },
+          // {
+          //   id: CUSTOM_BUTTON,
+          //   testID: CUSTOM_BUTTON,
+          //   component: 'CustomTextButton'
+          // },
           {
             id: CUSTOM_BUTTON2,
             testID: CUSTOM_BUTTON2,
@@ -97,6 +99,7 @@ class OptionsScreen extends Component {
   render() {
     return (
       <View style={styles.root}>
+        <View style={{width: 2, height: 2, backgroundColor: 'red', alignSelf: 'center'}}/>
         <Text style={styles.h1} testID={testIDs.OPTIONS_SCREEN_HEADER}>{`Options Screen`}</Text>
         <Button title='Dynamic Options' testID={testIDs.DYNAMIC_OPTIONS_BUTTON} onPress={this.onClickDynamicOptions} />
         <Button title='Show Top Bar' testID={testIDs.SHOW_TOP_BAR_BUTTON} onPress={this.onClickShowTopBar} />
@@ -105,12 +108,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 +163,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 +260,17 @@ class OptionsScreen extends Component {
       }
     });
   }
+
+  onShowTopBarReactView = () => {
+    Navigation.setOptions(this.props.componentId, {
+      topBar: {
+        title: {
+          component: 'navigation.playground.CustomTopBar',
+          alignment: 'center'
+        }
+      }
+    });
+  }
 }
 
 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`,