Apply layout direction directly on views (#5368)

Apply layout direction directly on views

This commit changes how RNN handles layout direction and adds support for LOCALE layout direction on Android.
Until now RNN delegated handling layout direction to RN's I18nUtil. This usually is enough but under certain circumstances
layout direction has to be applied directly on relevant views by RNN - usually when there are conflicts with another dependency
which handles RTL.

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

@@ -21,7 +21,7 @@ import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.modal.ModalStack;
 import com.reactnativenavigation.viewcontrollers.navigator.Navigator;
-import com.reactnativenavigation.viewcontrollers.navigator.RootPresenter;
+import com.reactnativenavigation.presentation.RootPresenter;
 
 public class NavigationActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler, PermissionAwareActivity, JsDevReloadHandler.ReloadListener {
     @Nullable
@@ -33,7 +33,12 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
     protected void onCreate(@Nullable Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         addDefaultSplashLayout();
-        navigator = new Navigator(this, new ChildControllersRegistry(), new ModalStack(this), new OverlayManager(), new RootPresenter(this));
+        navigator = new Navigator(this,
+                new ChildControllersRegistry(),
+                new ModalStack(this),
+                new OverlayManager(),
+                new RootPresenter(this)
+        );
         navigator.bindViews();
         getReactGateway().onActivityCreated(this);
     }

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

@@ -0,0 +1,53 @@
+package com.reactnativenavigation.parse;
+
+import android.text.TextUtils;
+import android.view.View;
+
+import java.util.Locale;
+
+public enum LayoutDirection {
+    RTL(View.LAYOUT_DIRECTION_RTL),
+    LTR(View.LAYOUT_DIRECTION_LTR),
+    LOCALE(View.LAYOUT_DIRECTION_LOCALE),
+    DEFAULT(View.LAYOUT_DIRECTION_LTR);
+
+    private final int direction;
+
+    LayoutDirection(int direction) {
+        this.direction = direction;
+    }
+
+    public static LayoutDirection fromString(String direction) {
+        switch (direction) {
+            case "rtl":
+                return RTL;
+            case "ltr":
+                return LTR;
+            case "locale":
+                return LOCALE;
+            default:
+                return DEFAULT;
+        }
+    }
+
+    public boolean hasValue() {
+        return this != DEFAULT;
+    }
+
+    public int get() {
+        return direction;
+    }
+
+    public boolean isRtl() {
+        switch (direction) {
+            case View.LAYOUT_DIRECTION_LTR:
+                return false;
+            case View.LAYOUT_DIRECTION_RTL:
+                return true;
+            case View.LAYOUT_DIRECTION_LOCALE:
+                return TextUtils.getLayoutDirectionFromLocale(Locale.getDefault()) == View.LAYOUT_DIRECTION_RTL;
+            default:
+                return false;
+        }
+    }
+}

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

@@ -4,12 +4,8 @@ import com.reactnativenavigation.parse.params.Colour;
 import com.reactnativenavigation.parse.params.NullColor;
 import com.reactnativenavigation.parse.params.NullNumber;
 import com.reactnativenavigation.parse.params.Number;
-import com.reactnativenavigation.parse.params.Text;
-import com.reactnativenavigation.parse.params.NullText;
 import com.reactnativenavigation.parse.parsers.ColorParser;
 import com.reactnativenavigation.parse.parsers.NumberParser;
-import com.reactnativenavigation.parse.parsers.TextParser;
-
 
 import org.json.JSONObject;
 
@@ -22,7 +18,7 @@ public class LayoutOptions {
         result.componentBackgroundColor = ColorParser.parse(json, "componentBackgroundColor");
         result.topMargin = NumberParser.parse(json, "topMargin");
         result.orientation = OrientationOptions.parse(json);
-        result.direction = TextParser.parse(json, "direction");
+        result.direction = LayoutDirection.fromString(json.optString("direction", ""));
 
         return result;
     }
@@ -31,7 +27,7 @@ public class LayoutOptions {
     public Colour componentBackgroundColor = new NullColor();
     public Number topMargin = new NullNumber();
     public OrientationOptions orientation = new OrientationOptions();
-    public Text direction = new NullText();
+    public LayoutDirection direction = LayoutDirection.DEFAULT;
 
     public void mergeWith(LayoutOptions other) {
         if (other.backgroundColor.hasValue()) backgroundColor = other.backgroundColor;

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

@@ -3,7 +3,6 @@ package com.reactnativenavigation.presentation;
 import android.content.Context;
 import android.graphics.drawable.Drawable;
 import android.support.annotation.NonNull;
-import android.support.v4.content.ContextCompat;
 
 import com.aurelhubert.ahbottomnavigation.notification.AHNotification;
 import com.reactnativenavigation.parse.BottomTabOptions;
@@ -26,8 +25,6 @@ public class BottomTabPresenter {
     private Options defaultOptions;
     private final BottomTabFinder bottomTabFinder;
     private BottomTabs bottomTabs;
-    private final int defaultSelectedTextColor;
-    private final int defaultTextColor;
     private final List<ViewController> tabs;
     private final int defaultDotIndicatorSize;
 
@@ -37,8 +34,6 @@ public class BottomTabPresenter {
         this.bottomTabFinder = new BottomTabFinder(tabs);
         this.imageLoader = imageLoader;
         this.defaultOptions = defaultOptions;
-        defaultSelectedTextColor = defaultOptions.bottomTabOptions.selectedIconColor.get(ContextCompat.getColor(context, com.aurelhubert.ahbottomnavigation.R.color.colorBottomNavigationAccent));
-        defaultTextColor = defaultOptions.bottomTabOptions.iconColor.get(ContextCompat.getColor(context, com.aurelhubert.ahbottomnavigation.R.color.colorBottomNavigationInactive));
         defaultDotIndicatorSize = dpToPx(context, 6);
     }
 

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

@@ -50,56 +50,59 @@ public class BottomTabsPresenter {
     }
 
     public void mergeOptions(Options options) {
-        mergeBottomTabsOptions(options.bottomTabsOptions, options.animations);
+        mergeBottomTabsOptions(options);
     }
 
     public void applyOptions(Options options) {
-        Options withDefaultOptions = options.copy().withDefaultOptions(defaultOptions);
-        applyBottomTabsOptions(withDefaultOptions.bottomTabsOptions, withDefaultOptions.animations);
+        applyBottomTabsOptions(options.copy().withDefaultOptions(defaultOptions));
     }
 
     public void applyChildOptions(Options options, Component child) {
         int tabIndex = bottomTabFinder.findByComponent(child);
         if (tabIndex >= 0) {
             Options withDefaultOptions = options.copy().withDefaultOptions(defaultOptions);
-            applyBottomTabsOptions(withDefaultOptions.bottomTabsOptions, withDefaultOptions.animations);
+            applyBottomTabsOptions(withDefaultOptions);
             applyDrawBehind(withDefaultOptions.bottomTabsOptions, tabIndex);
         }
     }
 
     public void mergeChildOptions(Options options, Component child) {
-        mergeBottomTabsOptions(options.bottomTabsOptions, options.animations);
+        mergeBottomTabsOptions(options);
         int tabIndex = bottomTabFinder.findByComponent(child);
         if (tabIndex >= 0) mergeDrawBehind(options.bottomTabsOptions, tabIndex);
     }
 
-    private void mergeBottomTabsOptions(BottomTabsOptions options, AnimationsOptions animations) {
-        if (options.titleDisplayMode.hasValue()) {
-            bottomTabs.setTitleState(options.titleDisplayMode.toState());
+    private void mergeBottomTabsOptions(Options options) {
+        BottomTabsOptions bottomTabsOptions = options.bottomTabsOptions;
+        AnimationsOptions animations = options.animations;
+
+        if (options.layout.direction.hasValue()) bottomTabs.setLayoutDirection(options.layout.direction);
+        if (bottomTabsOptions.titleDisplayMode.hasValue()) {
+            bottomTabs.setTitleState(bottomTabsOptions.titleDisplayMode.toState());
         }
-        if (options.backgroundColor.hasValue()) {
-            bottomTabs.setBackgroundColor(options.backgroundColor.get());
+        if (bottomTabsOptions.backgroundColor.hasValue()) {
+            bottomTabs.setBackgroundColor(bottomTabsOptions.backgroundColor.get());
         }
-        if (options.currentTabIndex.hasValue()) {
-            int tabIndex = options.currentTabIndex.get();
+        if (bottomTabsOptions.currentTabIndex.hasValue()) {
+            int tabIndex = bottomTabsOptions.currentTabIndex.get();
             if (tabIndex >= 0) tabSelector.selectTab(tabIndex);
         }
-        if (options.testId.hasValue()) {
-            bottomTabs.setTag(options.testId.get());
+        if (bottomTabsOptions.testId.hasValue()) {
+            bottomTabs.setTag(bottomTabsOptions.testId.get());
         }
-        if (options.currentTabId.hasValue()) {
-            int tabIndex = bottomTabFinder.findByControllerId(options.currentTabId.get());
+        if (bottomTabsOptions.currentTabId.hasValue()) {
+            int tabIndex = bottomTabFinder.findByControllerId(bottomTabsOptions.currentTabId.get());
             if (tabIndex >= 0) tabSelector.selectTab(tabIndex);
         }
-        if (options.visible.isTrue()) {
-            if (options.animate.isTrueOrUndefined()) {
+        if (bottomTabsOptions.visible.isTrue()) {
+            if (bottomTabsOptions.animate.isTrueOrUndefined()) {
                 animator.show(animations);
             } else {
                 bottomTabs.restoreBottomNavigation(false);
             }
         }
-        if (options.visible.isFalse()) {
-            if (options.animate.isTrueOrUndefined()) {
+        if (bottomTabsOptions.visible.isFalse()) {
+            if (bottomTabsOptions.animate.isTrueOrUndefined()) {
                 animator.hide(animations);
             } else {
                 bottomTabs.hideBottomNavigation(false);
@@ -127,34 +130,38 @@ public class BottomTabsPresenter {
         }
     }
 
-    private void applyBottomTabsOptions(BottomTabsOptions options, AnimationsOptions animationsOptions) {
-        bottomTabs.setTitleState(options.titleDisplayMode.get(TitleState.SHOW_WHEN_ACTIVE));
-        bottomTabs.setBackgroundColor(options.backgroundColor.get(Color.WHITE));
-        if (options.currentTabIndex.hasValue()) {
-            int tabIndex = options.currentTabIndex.get();
+    private void applyBottomTabsOptions(Options options) {
+        BottomTabsOptions bottomTabsOptions = options.bottomTabsOptions;
+        AnimationsOptions animationsOptions = options.animations;
+
+        bottomTabs.setLayoutDirection(options.layout.direction);
+        bottomTabs.setTitleState(bottomTabsOptions.titleDisplayMode.get(TitleState.SHOW_WHEN_ACTIVE));
+        bottomTabs.setBackgroundColor(bottomTabsOptions.backgroundColor.get(Color.WHITE));
+        if (bottomTabsOptions.currentTabIndex.hasValue()) {
+            int tabIndex = bottomTabsOptions.currentTabIndex.get();
             if (tabIndex >= 0) tabSelector.selectTab(tabIndex);
         }
-        if (options.testId.hasValue()) bottomTabs.setTag(options.testId.get());
-        if (options.currentTabId.hasValue()) {
-            int tabIndex = bottomTabFinder.findByControllerId(options.currentTabId.get());
+        if (bottomTabsOptions.testId.hasValue()) bottomTabs.setTag(bottomTabsOptions.testId.get());
+        if (bottomTabsOptions.currentTabId.hasValue()) {
+            int tabIndex = bottomTabFinder.findByControllerId(bottomTabsOptions.currentTabId.get());
             if (tabIndex >= 0) tabSelector.selectTab(tabIndex);
         }
-        if (options.visible.isTrueOrUndefined()) {
-            if (options.animate.isTrueOrUndefined()) {
+        if (bottomTabsOptions.visible.isTrueOrUndefined()) {
+            if (bottomTabsOptions.animate.isTrueOrUndefined()) {
                 animator.show(animationsOptions);
             } else {
                 bottomTabs.restoreBottomNavigation(false);
             }
         }
-        if (options.visible.isFalse()) {
-            if (options.animate.isTrueOrUndefined()) {
+        if (bottomTabsOptions.visible.isFalse()) {
+            if (bottomTabsOptions.animate.isTrueOrUndefined()) {
                 animator.hide(animationsOptions);
             } else {
                 bottomTabs.hideBottomNavigation(false);
             }
         }
-        if (options.elevation.hasValue()) {
-            bottomTabs.setUseElevation(true, options.elevation.get().floatValue());
+        if (bottomTabsOptions.elevation.hasValue()) {
+            bottomTabs.setUseElevation(true, bottomTabsOptions.elevation.get().floatValue());
         }
     }
 }

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

@@ -0,0 +1,16 @@
+package com.reactnativenavigation.presentation;
+
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.modules.i18nmanager.I18nUtil;
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+
+public class LayoutDirectionApplier {
+    public void apply(ViewController root, Options options, ReactInstanceManager instanceManager) {
+        if (options.layout.direction.hasValue() && instanceManager.getCurrentReactContext() != null) {
+            root.getActivity().getWindow().getDecorView().setLayoutDirection(options.layout.direction.get());
+            I18nUtil.getInstance().allowRTL(instanceManager.getCurrentReactContext(), options.layout.direction.isRtl());
+            I18nUtil.getInstance().forceRTL(instanceManager.getCurrentReactContext(), options.layout.direction.isRtl());
+        }
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/RootPresenter.java → lib/android/app/src/main/java/com/reactnativenavigation/presentation/RootPresenter.java

@@ -1,37 +1,35 @@
-package com.reactnativenavigation.viewcontrollers.navigator;
+package com.reactnativenavigation.presentation;
 
 import android.content.Context;
 import android.widget.FrameLayout;
-import android.view.View;
 
+import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.anim.NavigationAnimator;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.element.ElementTransitionManager;
 
-import com.facebook.react.modules.i18nmanager.I18nUtil;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.ReactInstanceManager;
-
 public class RootPresenter {
     private NavigationAnimator animator;
+    private LayoutDirectionApplier layoutDirectionApplier;
     private FrameLayout rootLayout;
 
-    void setRootContainer(FrameLayout rootLayout) {
+    public void setRootContainer(FrameLayout rootLayout) {
         this.rootLayout = rootLayout;
     }
 
     public RootPresenter(Context context) {
-        animator = new NavigationAnimator(context, new ElementTransitionManager());
+        this(new NavigationAnimator(context, new ElementTransitionManager()), new LayoutDirectionApplier());
     }
 
-    RootPresenter(NavigationAnimator animator) {
+    public RootPresenter(NavigationAnimator animator, LayoutDirectionApplier layoutDirectionApplier) {
         this.animator = animator;
+        this.layoutDirectionApplier = layoutDirectionApplier;
     }
 
-    void setRoot(ViewController root, Options defaultOptions, CommandListener listener, ReactInstanceManager reactInstanceManager) {
-        setLayoutDirection(root, defaultOptions, (ReactApplicationContext) reactInstanceManager.getCurrentReactContext());
+    public void setRoot(ViewController root, Options defaultOptions, CommandListener listener, ReactInstanceManager reactInstanceManager) {
+        layoutDirectionApplier.apply(root, defaultOptions, reactInstanceManager);
         rootLayout.addView(root.getView());
         Options options = root.resolveCurrentOptions(defaultOptions);
         root.setWaitForRender(options.animations.setRoot.waitForRender);
@@ -53,15 +51,4 @@ public class RootPresenter {
             listener.onSuccess(root.getId());
         }
     }
-
-    private void setLayoutDirection(ViewController root, Options defaultOptions, ReactApplicationContext reactContext) {
-        if (defaultOptions.layout.direction.hasValue()) {
-            I18nUtil i18nUtil = I18nUtil.getInstance();
-            Boolean isRtl = defaultOptions.layout.direction.get().equals("rtl");
-
-            root.getActivity().getWindow().getDecorView().setLayoutDirection(isRtl ? View.LAYOUT_DIRECTION_RTL : View.LAYOUT_DIRECTION_LTR);
-            i18nUtil.allowRTL(reactContext, isRtl);
-            i18nUtil.forceRTL(reactContext, isRtl);
-        }
-    }
 }

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

@@ -127,7 +127,7 @@ public class StackPresenter {
     public void mergeOptions(Options options, Component currentChild) {
         mergeOrientation(options.layout.orientation);
 //        mergeButtons(topBar, withDefault.topBar.buttons, child);
-        mergeTopBarOptions(options.topBar, options.animations, currentChild);
+        mergeTopBarOptions(options, currentChild);
         mergeTopTabsOptions(options.topTabs);
         mergeTopTabOptions(options.topTabOptions);
     }
@@ -141,7 +141,7 @@ public class StackPresenter {
         Options withDefault = options.copy().withDefaultOptions(defaultOptions);
         applyOrientation(withDefault.layout.orientation);
         applyButtons(withDefault.topBar, child);
-        applyTopBarOptions(withDefault.topBar, withDefault.animations, child, options);
+        applyTopBarOptions(withDefault, child, options);
         applyTopTabsOptions(withDefault.topTabs);
         applyTopTabOptions(withDefault.topTabOptions);
     }
@@ -164,55 +164,59 @@ public class StackPresenter {
         if (buttons != null) forEach(buttons.values(), ViewController::destroy);
     }
 
-    private void applyTopBarOptions(TopBarOptions options, AnimationsOptions animationOptions, Component component, Options componentOptions) {
-        topBar.setHeight(options.height.get(UiUtils.getTopBarHeightDp(activity)));
-        topBar.setElevation(options.elevation.get(DEFAULT_ELEVATION));
+    private void applyTopBarOptions(Options options, Component component, Options componentOptions) {
+        TopBarOptions topBarOptions = options.topBar;
+        AnimationsOptions animationOptions = options.animations;
+
+        topBar.setLayoutDirection(options.layout.direction);
+        topBar.setHeight(topBarOptions.height.get(UiUtils.getTopBarHeightDp(activity)));
+        topBar.setElevation(topBarOptions.elevation.get(DEFAULT_ELEVATION));
         if (topBar.getLayoutParams() instanceof MarginLayoutParams) {
-            ((MarginLayoutParams) topBar.getLayoutParams()).topMargin = UiUtils.dpToPx(activity, options.topMargin.get(0));
+            ((MarginLayoutParams) topBar.getLayoutParams()).topMargin = UiUtils.dpToPx(activity, topBarOptions.topMargin.get(0));
         }
 
-        topBar.setTitleHeight(options.title.height.get(UiUtils.getTopBarHeightDp(activity)));
-        topBar.setTitle(options.title.text.get(""));
-        topBar.setTitleTopMargin(options.title.topMargin.get(0));
+        topBar.setTitleHeight(topBarOptions.title.height.get(UiUtils.getTopBarHeightDp(activity)));
+        topBar.setTitle(topBarOptions.title.text.get(""));
+        topBar.setTitleTopMargin(topBarOptions.title.topMargin.get(0));
 
-        if (options.title.component.hasValue()) {
+        if (topBarOptions.title.component.hasValue()) {
             if (titleControllers.containsKey(component)) {
                 topBar.setTitleComponent(titleControllers.get(component).getView());
             } else {
                 TitleBarReactViewController controller = new TitleBarReactViewController(activity, titleViewCreator);
-                controller.setWaitForRender(options.title.component.waitForRender);
+                controller.setWaitForRender(topBarOptions.title.component.waitForRender);
                 titleControllers.put(component, controller);
-                controller.setComponent(options.title.component);
-                controller.getView().setLayoutParams(getComponentLayoutParams(options.title.component));
+                controller.setComponent(topBarOptions.title.component);
+                controller.getView().setLayoutParams(getComponentLayoutParams(topBarOptions.title.component));
                 topBar.setTitleComponent(controller.getView());
             }
         }
 
-        topBar.setTitleFontSize(options.title.fontSize.get(defaultTitleFontSize));
-        topBar.setTitleTextColor(options.title.color.get(DEFAULT_TITLE_COLOR));
-        topBar.setTitleTypeface(options.title.fontFamily);
-        topBar.setTitleAlignment(options.title.alignment);
+        topBar.setTitleFontSize(topBarOptions.title.fontSize.get(defaultTitleFontSize));
+        topBar.setTitleTextColor(topBarOptions.title.color.get(DEFAULT_TITLE_COLOR));
+        topBar.setTitleTypeface(topBarOptions.title.fontFamily);
+        topBar.setTitleAlignment(topBarOptions.title.alignment);
 
-        topBar.setSubtitle(options.subtitle.text.get(""));
-        topBar.setSubtitleFontSize(options.subtitle.fontSize.get(defaultSubtitleFontSize));
-        topBar.setSubtitleColor(options.subtitle.color.get(DEFAULT_SUBTITLE_COLOR));
-        topBar.setSubtitleFontFamily(options.subtitle.fontFamily);
-        topBar.setSubtitleAlignment(options.subtitle.alignment);
+        topBar.setSubtitle(topBarOptions.subtitle.text.get(""));
+        topBar.setSubtitleFontSize(topBarOptions.subtitle.fontSize.get(defaultSubtitleFontSize));
+        topBar.setSubtitleColor(topBarOptions.subtitle.color.get(DEFAULT_SUBTITLE_COLOR));
+        topBar.setSubtitleFontFamily(topBarOptions.subtitle.fontFamily);
+        topBar.setSubtitleAlignment(topBarOptions.subtitle.alignment);
 
-        topBar.setBorderHeight(options.borderHeight.get(0d));
-        topBar.setBorderColor(options.borderColor.get(DEFAULT_BORDER_COLOR));
+        topBar.setBorderHeight(topBarOptions.borderHeight.get(0d));
+        topBar.setBorderColor(topBarOptions.borderColor.get(DEFAULT_BORDER_COLOR));
 
-        topBar.setBackgroundColor(options.background.color.get(Color.WHITE));
+        topBar.setBackgroundColor(topBarOptions.background.color.get(Color.WHITE));
 
-        if (options.background.component.hasValue()) {
-            View createdComponent = findBackgroundComponent(options.background.component);
+        if (topBarOptions.background.component.hasValue()) {
+            View createdComponent = findBackgroundComponent(topBarOptions.background.component);
             if (createdComponent != null) {
                 topBar.setBackgroundComponent(createdComponent);
             } else {
                 TopBarBackgroundViewController controller = new TopBarBackgroundViewController(activity, topBarBackgroundViewCreator);
-                controller.setWaitForRender(options.background.waitForRender);
+                controller.setWaitForRender(topBarOptions.background.waitForRender);
                 backgroundControllers.put(component, controller);
-                controller.setComponent(options.background.component);
+                controller.setComponent(topBarOptions.background.component);
                 controller.getView().setLayoutParams(new RelativeLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
                 topBar.setBackgroundComponent(controller.getView());
             }
@@ -220,18 +224,18 @@ public class StackPresenter {
             topBar.clearBackgroundComponent();
         }
 
-        if (options.testId.hasValue()) topBar.setTestId(options.testId.get());
-        applyTopBarVisibility(options, animationOptions, componentOptions);
-        if (options.drawBehind.isTrue() && !componentOptions.layout.topMargin.hasValue()) {
+        if (topBarOptions.testId.hasValue()) topBar.setTestId(topBarOptions.testId.get());
+        applyTopBarVisibility(topBarOptions, animationOptions, componentOptions);
+        if (topBarOptions.drawBehind.isTrue() && !componentOptions.layout.topMargin.hasValue()) {
             component.drawBehindTopBar();
-        } else if (options.drawBehind.isFalseOrUndefined()) {
+        } else if (topBarOptions.drawBehind.isFalseOrUndefined()) {
             component.drawBelowTopBar(topBar);
         }
-        if (options.hideOnScroll.isTrue()) {
+        if (topBarOptions.hideOnScroll.isTrue()) {
             if (component instanceof IReactView) {
                 topBar.enableCollapse(((IReactView) component).getScrollEventListener());
             }
-        } else if (options.hideOnScroll.isFalseOrUndefined()) {
+        } else if (topBarOptions.hideOnScroll.isFalseOrUndefined()) {
             topBar.disableCollapse();
         }
     }
@@ -351,7 +355,7 @@ public class StackPresenter {
         TopBarOptions topBar = toMerge.copy().mergeWith(resolvedOptions).withDefaultOptions(defaultOptions).topBar;
         mergeOrientation(toMerge.layout.orientation);
         mergeButtons(topBar, toMerge.topBar.buttons, child);
-        mergeTopBarOptions(toMerge.topBar, toMerge.animations, child);
+        mergeTopBarOptions(toMerge, child);
         mergeTopTabsOptions(toMerge.topTabs);
         mergeTopTabOptions(toMerge.topTabOptions);
     }
@@ -403,78 +407,82 @@ public class StackPresenter {
         return result;
     }
 
-    private void mergeTopBarOptions(TopBarOptions options, AnimationsOptions animationsOptions, Component component) {
-        if (options.height.hasValue()) topBar.setHeight(options.height.get());
-        if (options.elevation.hasValue()) topBar.setElevation(options.elevation.get());
-        if (options.topMargin.hasValue() && topBar.getLayoutParams() instanceof MarginLayoutParams) {
-            ((MarginLayoutParams) topBar.getLayoutParams()).topMargin = UiUtils.dpToPx(activity, options.topMargin.get());
+    private void mergeTopBarOptions(Options options, Component component) {
+        TopBarOptions topBarOptions = options.topBar;
+        AnimationsOptions animationsOptions = options.animations;
+
+        if (options.layout.direction.hasValue()) topBar.setLayoutDirection(options.layout.direction);
+        if (topBarOptions.height.hasValue()) topBar.setHeight(topBarOptions.height.get());
+        if (topBarOptions.elevation.hasValue()) topBar.setElevation(topBarOptions.elevation.get());
+        if (topBarOptions.topMargin.hasValue() && topBar.getLayoutParams() instanceof MarginLayoutParams) {
+            ((MarginLayoutParams) topBar.getLayoutParams()).topMargin = UiUtils.dpToPx(activity, topBarOptions.topMargin.get());
         }
 
-        if (options.title.height.hasValue()) topBar.setTitleHeight(options.title.height.get());
-        if (options.title.text.hasValue()) topBar.setTitle(options.title.text.get());
-        if (options.title.topMargin.hasValue()) topBar.setTitleTopMargin(options.title.topMargin.get());
+        if (topBarOptions.title.height.hasValue()) topBar.setTitleHeight(topBarOptions.title.height.get());
+        if (topBarOptions.title.text.hasValue()) topBar.setTitle(topBarOptions.title.text.get());
+        if (topBarOptions.title.topMargin.hasValue()) topBar.setTitleTopMargin(topBarOptions.title.topMargin.get());
 
-        if (options.title.component.hasValue()) {
+        if (topBarOptions.title.component.hasValue()) {
             if (titleControllers.containsKey(component)) {
                 topBar.setTitleComponent(titleControllers.get(component).getView());
             } else {
                 TitleBarReactViewController controller = new TitleBarReactViewController(activity, titleViewCreator);
                 titleControllers.put(component, controller);
-                controller.setComponent(options.title.component);
-                controller.getView().setLayoutParams(getComponentLayoutParams(options.title.component));
+                controller.setComponent(topBarOptions.title.component);
+                controller.getView().setLayoutParams(getComponentLayoutParams(topBarOptions.title.component));
                 topBar.setTitleComponent(controller.getView());
             }
         }
 
-        if (options.title.color.hasValue()) topBar.setTitleTextColor(options.title.color.get());
-        if (options.title.fontSize.hasValue()) topBar.setTitleFontSize(options.title.fontSize.get());
-        if (options.title.fontFamily != null) topBar.setTitleTypeface(options.title.fontFamily);
+        if (topBarOptions.title.color.hasValue()) topBar.setTitleTextColor(topBarOptions.title.color.get());
+        if (topBarOptions.title.fontSize.hasValue()) topBar.setTitleFontSize(topBarOptions.title.fontSize.get());
+        if (topBarOptions.title.fontFamily != null) topBar.setTitleTypeface(topBarOptions.title.fontFamily);
 
-        if (options.subtitle.text.hasValue()) topBar.setSubtitle(options.subtitle.text.get());
-        if (options.subtitle.color.hasValue()) topBar.setSubtitleColor(options.subtitle.color.get());
-        if (options.subtitle.fontSize.hasValue()) topBar.setSubtitleFontSize(options.subtitle.fontSize.get());
-        if (options.subtitle.fontFamily != null) topBar.setSubtitleFontFamily(options.subtitle.fontFamily);
+        if (topBarOptions.subtitle.text.hasValue()) topBar.setSubtitle(topBarOptions.subtitle.text.get());
+        if (topBarOptions.subtitle.color.hasValue()) topBar.setSubtitleColor(topBarOptions.subtitle.color.get());
+        if (topBarOptions.subtitle.fontSize.hasValue()) topBar.setSubtitleFontSize(topBarOptions.subtitle.fontSize.get());
+        if (topBarOptions.subtitle.fontFamily != null) topBar.setSubtitleFontFamily(topBarOptions.subtitle.fontFamily);
 
-        if (options.background.color.hasValue()) topBar.setBackgroundColor(options.background.color.get());
+        if (topBarOptions.background.color.hasValue()) topBar.setBackgroundColor(topBarOptions.background.color.get());
 
-        if (options.background.component.hasValue()) {
+        if (topBarOptions.background.component.hasValue()) {
             if (backgroundControllers.containsKey(component)) {
                 topBar.setBackgroundComponent(backgroundControllers.get(component).getView());
             } else {
                 TopBarBackgroundViewController controller = new TopBarBackgroundViewController(activity, topBarBackgroundViewCreator);
                 backgroundControllers.put(component, controller);
-                controller.setComponent(options.background.component);
+                controller.setComponent(topBarOptions.background.component);
                 controller.getView().setLayoutParams(new RelativeLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT));
                 topBar.setBackgroundComponent(controller.getView());
             }
         }
 
-        if (options.testId.hasValue()) topBar.setTestId(options.testId.get());
+        if (topBarOptions.testId.hasValue()) topBar.setTestId(topBarOptions.testId.get());
 
-        if (options.visible.isFalse()) {
-            if (options.animate.isTrueOrUndefined()) {
+        if (topBarOptions.visible.isFalse()) {
+            if (topBarOptions.animate.isTrueOrUndefined()) {
                 topBar.hideAnimate(animationsOptions.pop.topBar);
             } else {
                 topBar.hide();
             }
         }
-        if (options.visible.isTrue()) {
-            if (options.animate.isTrueOrUndefined()) {
+        if (topBarOptions.visible.isTrue()) {
+            if (topBarOptions.animate.isTrueOrUndefined()) {
                 topBar.showAnimate(animationsOptions.push.topBar);
             } else {
                 topBar.show();
             }
         }
-        if (options.drawBehind.isTrue()) {
+        if (topBarOptions.drawBehind.isTrue()) {
             component.drawBehindTopBar();
         }
-        if (options.drawBehind.isFalse()) {
+        if (topBarOptions.drawBehind.isFalse()) {
             component.drawBelowTopBar(topBar);
         }
-        if (options.hideOnScroll.isTrue() && component instanceof IReactView) {
+        if (topBarOptions.hideOnScroll.isTrue() && component instanceof IReactView) {
             topBar.enableCollapse(((IReactView) component).getScrollEventListener());
         }
-        if (options.hideOnScroll.isFalse()) {
+        if (topBarOptions.hideOnScroll.isFalse()) {
             topBar.disableCollapse();
         }
     }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/Navigator.java

@@ -10,6 +10,7 @@ import android.widget.FrameLayout;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.presentation.OverlayManager;
 import com.reactnativenavigation.presentation.Presenter;
+import com.reactnativenavigation.presentation.RootPresenter;
 import com.reactnativenavigation.react.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.CommandListenerAdapter;

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

@@ -4,11 +4,15 @@ import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.drawable.Drawable;
 import android.support.annotation.IntRange;
+import android.widget.LinearLayout;
 
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
+import com.reactnativenavigation.parse.LayoutDirection;
 import com.reactnativenavigation.utils.CompatUtils;
 
+import static com.reactnativenavigation.utils.ViewUtils.findChildByClass;
+
 @SuppressLint("ViewConstructor")
 public class BottomTabs extends AHBottomNavigation {
     private boolean itemsCreationEnabled = true;
@@ -39,7 +43,7 @@ public class BottomTabs extends AHBottomNavigation {
 
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
-
+        // NOOP - don't recreate views on size change
     }
 
     public void superCreateItems() {
@@ -75,4 +79,9 @@ public class BottomTabs extends AHBottomNavigation {
             refresh();
         }
     }
+
+    public void setLayoutDirection(LayoutDirection direction) {
+         LinearLayout tabsContainer = findChildByClass(this, LinearLayout.class);
+        if (tabsContainer != null) tabsContainer.setLayoutDirection(direction.get());
+    }
 }

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

@@ -26,6 +26,7 @@ import com.reactnativenavigation.anim.TopBarCollapseBehavior;
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Alignment;
 import com.reactnativenavigation.parse.AnimationOptions;
+import com.reactnativenavigation.parse.LayoutDirection;
 import com.reactnativenavigation.parse.params.Colour;
 import com.reactnativenavigation.parse.params.Number;
 import com.reactnativenavigation.utils.CompatUtils;
@@ -331,4 +332,8 @@ public class TopBar extends AppBarLayout implements ScrollEventListener.ScrollAw
     public void setOverflowButtonColor(int color) {
         titleBar.setOverflowButtonColor(color);
     }
+
+    public void setLayoutDirection(LayoutDirection direction) {
+        titleBar.setLayoutDirection(direction.get());
+    }
 }

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

@@ -40,7 +40,7 @@ public class BottomTabsPresenterTest extends BaseTest {
     }
 
     @Test
-    public void mergeChildOptions_onlyDeclaredOptionsAreApplied() { // default options are not applies on merge
+    public void mergeChildOptions_onlyDeclaredOptionsAreApplied() { // default options are not applied on merge
         Options defaultOptions = new Options();
         defaultOptions.bottomTabsOptions.visible = new Bool(false);
         uut.setDefaultOptions(defaultOptions);

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

@@ -18,6 +18,7 @@ import com.reactnativenavigation.presentation.BottomTabPresenter;
 import com.reactnativenavigation.presentation.BottomTabsPresenter;
 import com.reactnativenavigation.presentation.Presenter;
 import com.reactnativenavigation.presentation.OverlayManager;
+import com.reactnativenavigation.presentation.RootPresenter;
 import com.reactnativenavigation.react.EventEmitter;
 import com.reactnativenavigation.utils.CommandListener;
 import com.reactnativenavigation.utils.CommandListenerAdapter;

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/RootPresenterTest.java

@@ -5,19 +5,20 @@ import android.support.annotation.NonNull;
 import android.view.View;
 import android.widget.FrameLayout;
 
+import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.BaseTest;
 import com.reactnativenavigation.anim.NavigationAnimator;
 import com.reactnativenavigation.mocks.SimpleViewController;
 import com.reactnativenavigation.parse.AnimationOptions;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.parse.params.Bool;
+import com.reactnativenavigation.presentation.LayoutDirectionApplier;
+import com.reactnativenavigation.presentation.RootPresenter;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.element.ElementTransitionManager;
 
-import com.facebook.react.ReactInstanceManager;
-
 import org.junit.Test;
 import org.mockito.ArgumentCaptor;
 import org.mockito.Mockito;
@@ -36,6 +37,7 @@ public class RootPresenterTest extends BaseTest {
     private FrameLayout rootContainer;
     private ViewController root;
     private NavigationAnimator animator;
+    private LayoutDirectionApplier layoutDirectionApplier;
     private Options defaultOptions;
     private ReactInstanceManager reactInstanceManager;
 
@@ -47,7 +49,8 @@ public class RootPresenterTest extends BaseTest {
         rootContainer = new FrameLayout(activity);
         root = new SimpleViewController(activity, new ChildControllersRegistry(), "child1", new Options());
         animator = spy(createAnimator(activity));
-        uut = new RootPresenter(animator);
+        layoutDirectionApplier = Mockito.mock(LayoutDirectionApplier.class);
+        uut = new RootPresenter(animator, layoutDirectionApplier);
         uut.setRootContainer(rootContainer);
         defaultOptions = new Options();
     }
@@ -120,6 +123,13 @@ public class RootPresenterTest extends BaseTest {
         verify(listener).onSuccess(spy.getId());
     }
 
+    @Test
+    public void setRoot_appliesLayoutDirection() {
+        CommandListenerAdapter listener = spy(new CommandListenerAdapter());
+        uut.setRoot(root, defaultOptions, listener, reactInstanceManager);
+        verify(layoutDirectionApplier).apply(root, defaultOptions, reactInstanceManager);
+    }
+
     @NonNull
     private NavigationAnimator createAnimator(Activity activity) {
         return new NavigationAnimator(activity, mock(ElementTransitionManager.class)) {

playground/android/app/src/main/AndroidManifest.xml

@@ -10,6 +10,7 @@
         android:allowBackup="false"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
+        android:supportsRtl="true"
         android:theme="@style/AppTheme"
         android:usesCleartextTraffic="true"
         tools:ignore="GoogleAppIndexingWarning">

playground/src/commons/Options.js

@@ -4,7 +4,8 @@ const Colors = require('./Colors');
 const setDefaultOptions = () => Navigation.setDefaultOptions({
   layout: {
     componentBackgroundColor: Colors.background,
-    orientation: ['portrait']
+    orientation: ['portrait'],
+    direction: 'locale'
   },
   bottomTabs: {
     titleDisplayMode: 'alwaysShow'