Android: Fix ordering of top-bar left-hand button layout (#7848)

Author: d4vidi

e2e/Buttons.test.js

@@ -1,7 +1,12 @@
 import Utils from './Utils';
 import TestIDs from '../playground/src/testIDs';
 
-const { elementById, elementByLabel } = Utils;
+const {
+  elementById,
+  elementByLabel,
+  elementTopBar,
+  expectImagesToBeEqual,
+} = Utils;
 
 describe('Buttons', () => {
   beforeEach(async () => {
@@ -10,6 +15,12 @@ describe('Buttons', () => {
     await elementById(TestIDs.GOTO_BUTTONS_SCREEN).tap();
   });
 
+  it.e2e('should render top/navigation-bar buttons in the right order', async () => {
+    const snapshottedImagePath = `./e2e/assets/buttons_navbar.${device.getPlatform()}.png`;
+    const actual = await elementTopBar().takeScreenshot('buttons_navbar');
+    expectImagesToBeEqual(actual, snapshottedImagePath)
+  });
+
   it(':android: should not effect left buttons when hiding back button', async () => {
     await elementById(TestIDs.TOGGLE_BACK).tap();
     await expect(elementById(TestIDs.LEFT_BUTTON)).toBeVisible();

e2e/Utils.js

@@ -15,11 +15,14 @@ const utils = {
     // return element(by.label(label)).atIndex(0);
     return element(by.text(label));
   },
-  elementById: (id) => {
-    return element(by.id(id));
-  },
-  elementByTraits: (traits) => {
-    return element(by.traits(traits));
+  elementById: (id) => element(by.id(id)),
+  elementByTraits: (traits) => element(by.traits(traits)),
+  elementByType: (type) => element(by.type(type)),
+  elementTopBar: () => {
+    const elementType = (device.getPlatform() === 'ios') ?
+      'UINavigationBar' :
+      'com.reactnativenavigation.views.stack.topbar.TopBar';
+    return utils.elementByType(elementType);
   },
   tapBackIos: () => {
     try {

e2e/assets/buttons_navbar.android.png

@@ -71,7 +71,7 @@ class TitleAndButtonsContainer(context: Context) : ViewGroup(context) {
         component?.layoutDirection = layoutDirection
         titleSubTitleBar.layoutDirection = layoutDirection
         rightButtonBar.layoutDirection = layoutDirection
-        leftButtonBar.layoutDirection = if(isRTL()) View.LAYOUT_DIRECTION_LTR else View.LAYOUT_DIRECTION_RTL
+        leftButtonBar.layoutDirection = if (isRTL()) View.LAYOUT_DIRECTION_RTL else layoutDirection
     }
 
     fun setSubTitleTextAlignment(alignment: Alignment) = titleSubTitleBar.setSubTitleAlignment(alignment)