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

 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
     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

+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

 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;
 
         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;
     }
     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

 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;
     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;
 
         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

     }
 
     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);
         }
     }
 
-    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

+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

-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);
             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

     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);
     }
         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);
     }
         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());
             }
             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();
         }
     }
         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);
     }
         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

 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

 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;
 
     @Override
     protected void onSizeChanged(int w, int h, int oldw, int oldh) {
-
+        // NOOP - don't recreate views on size change
     }
 
     public void superCreateItems() {
             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

 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;
     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

     }
 
     @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

 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

 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;
     private FrameLayout rootContainer;
     private ViewController root;
     private NavigationAnimator animator;
+    private LayoutDirectionApplier layoutDirectionApplier;
     private Options defaultOptions;
     private ReactInstanceManager reactInstanceManager;
 
         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();
     }
         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

         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

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