From dab2ee3f0dc18e101a90babecab4ed53b7ac317f Mon Sep 17 00:00:00 2001
From: Nir Yosef <niryo@wix.com>
Date: Wed, 20 Sep 2023 10:05:11 +0300
Subject: [PATCH 1/6] Make bottom tabs more visually correct (#7788)

I have made some changes it order to make the bottom tabs more correct when rendering visually (by using react-native-web).
before:
![image](https://github.com/wix/react-native-navigation/assets/8758348/6d8c9717-e8bc-4ddd-b711-c1d5bb704559)

after:
![image](https://github.com/wix/react-native-navigation/assets/8758348/8a75748b-437d-42e1-ac3f-987a66b45ed1)
---
 lib/Mock/Components/ComponentScreen.tsx | 34 ++++++++++++++++++-------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/lib/Mock/Components/ComponentScreen.tsx b/lib/Mock/Components/ComponentScreen.tsx
index 21b0a80168d..40ba36a74cb 100644
--- a/lib/Mock/Components/ComponentScreen.tsx
+++ b/lib/Mock/Components/ComponentScreen.tsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { Button, View, Text } from 'react-native';
-import { Navigation } from 'react-native-navigation';
+import { View, Text, TouchableOpacity, Image, ImageURISource} from 'react-native';
+import { Navigation, ImageResource} from 'react-native-navigation';
 import { ComponentProps } from '../ComponentProps';
 import { VISIBLE_SCREEN_TEST_ID } from '../constants';
 import { LayoutStore } from '../Stores/LayoutStore';
@@ -10,6 +10,11 @@ import { events } from '../Stores/EventsStore';
 import _ from 'lodash';
 import { switchTabByIndex } from '../actions/layoutActions';
 
+
+function isURISource(src: ImageResource| undefined): src is ImageURISource {
+  return !!src && typeof src === 'object' && 'uri' in src;
+}
+
 export const ComponentScreen = connect(
   class extends Component<ComponentProps> {
     constructor(props: ComponentProps) {
@@ -27,16 +32,17 @@ export const ComponentScreen = connect(
     renderTabBar() {
       const bottomTabs = this.props.layoutNode.getBottomTabs();
       if (!bottomTabs) return null;
-
       const bottomTabsOptions = bottomTabs.resolveOptions().bottomTabs;
       if (bottomTabsOptions?.visible === false) return null;
       const buttons = bottomTabs!.children!.map((child, i) => {
         const bottomTabOptions = child.resolveOptions().bottomTab;
+        const icon = (bottomTabs as any).selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
+        const iconURI = isURISource(icon) ? icon.uri : undefined;
         return (
           <View key={`tab-${i}`}>
-            <Button
+            <TouchableOpacity
+              style={{padding:10}}
               testID={bottomTabOptions?.testID}
-              title={bottomTabOptions?.text || ''}
               onPress={() => {
                 events.invokeBottomTabPressed({
                   tabIndex: i,
@@ -44,13 +50,23 @@ export const ComponentScreen = connect(
                 if (_.defaultTo(bottomTabOptions?.selectTabOnPress, true))
                   switchTabByIndex(this.props.layoutNode.getBottomTabs(), i);
               }}
-            />
-            <Text>{bottomTabOptions?.badge}</Text>
+            >
+            <View style={{justifyContent: 'center', alignItems: 'center'}}>
+              <Text>{bottomTabOptions?.badge}</Text>
+              {iconURI && <Image style={{width: 18, height: 18, marginBottom: 5}} source={{uri: iconURI}}/>}
+              <Text style={{fontSize: 12}}>{bottomTabOptions?.text || ''}</Text>
+            </View>
+            </TouchableOpacity>
           </View>
         );
       });
 
-      return <View testID={bottomTabsOptions?.testID}>{buttons}</View>;
+      return (
+      <View 
+        testID={bottomTabsOptions?.testID} 
+        style={{flexDirection: 'row',justifyContent: 'center', width: '100%', backgroundColor: '#F0F2F5'}}>
+          {buttons}
+      </View>);
     }
 
     render() {
@@ -67,8 +83,8 @@ export const ComponentScreen = connect(
               backButtonOptions={this.props.layoutNode.resolveOptions().topBar?.backButton}
             />
           )}
-          {this.renderTabBar()}
           <Component componentId={this.props.layoutNode.nodeId} />
+          {this.renderTabBar()}
         </View>
       );
     }

From a544451baf60eec3a0e976b15ad6a2215bf0624f Mon Sep 17 00:00:00 2001
From: Yogev Ben David <yogev132@gmail.com>
Date: Wed, 20 Sep 2023 10:05:54 +0300
Subject: [PATCH 2/6] Fix buttons layout (#7781)

---
 lib/ios/RNNUIBarButtonItem.m | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/lib/ios/RNNUIBarButtonItem.m b/lib/ios/RNNUIBarButtonItem.m
index ece1da192d0..26730aec843 100644
--- a/lib/ios/RNNUIBarButtonItem.m
+++ b/lib/ios/RNNUIBarButtonItem.m
@@ -87,9 +87,28 @@ - (instancetype)initWithCustomView:(RNNReactView *)reactView
                      buttonOptions:(RNNButtonOptions *)buttonOptions
                            onPress:(RNNButtonPressCallback)onPress {
     self = [super initWithCustomView:reactView];
-    [reactView setFrame:CGRectMake(0, 0, 50, 50)];
     [self applyOptions:buttonOptions];
-
+    reactView.sizeFlexibility = RCTRootViewSizeFlexibilityWidthAndHeight;
+    reactView.hidden = CGRectEqualToRect(reactView.frame, CGRectZero);
+
+    [NSLayoutConstraint deactivateConstraints:reactView.constraints];
+    self.widthConstraint =
+        [NSLayoutConstraint constraintWithItem:reactView
+                                     attribute:NSLayoutAttributeWidth
+                                     relatedBy:NSLayoutRelationEqual
+                                        toItem:nil
+                                     attribute:NSLayoutAttributeNotAnAttribute
+                                    multiplier:1.0
+                                      constant:reactView.intrinsicContentSize.width];
+    self.heightConstraint =
+        [NSLayoutConstraint constraintWithItem:reactView
+                                     attribute:NSLayoutAttributeHeight
+                                     relatedBy:NSLayoutRelationEqual
+                                        toItem:nil
+                                     attribute:NSLayoutAttributeNotAnAttribute
+                                    multiplier:1.0
+                                      constant:reactView.intrinsicContentSize.height];
+    [NSLayoutConstraint activateConstraints:@[ self.widthConstraint, self.heightConstraint ]];
     reactView.delegate = self;
 
     reactView.backgroundColor = [UIColor clearColor];

From 1de6a41dde3273e10566f2165367cd6fbc170d08 Mon Sep 17 00:00:00 2001
From: Fahmi <fahmimodelo@gmail.com>
Date: Tue, 3 Oct 2023 19:18:39 +0700
Subject: [PATCH 3/6] Single Quote Consistency (#7787)

Most of the values within this file are using Single Quote. It might be useful to keep consistency to just use Single Quote.
---
 playground/src/testIDs.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/playground/src/testIDs.ts b/playground/src/testIDs.ts
index c6a36050fa2..130c97eafb7 100644
--- a/playground/src/testIDs.ts
+++ b/playground/src/testIDs.ts
@@ -220,18 +220,18 @@ const testIDs = {
   POP_NATIVE_BTN: 'POP_NATIVE_BTN',
 
   // Elements
-  SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,
-  BOTTOM_TABS_ELEMENT: `BOTTOM_TABS_ELEMENT`,
-  LANDSCAPE_ELEMENT: `LANDSCAPE_ELEMENT`,
-  PORTRAIT_ELEMENT: `PORTRAIT_ELEMENT`,
+  SCROLLVIEW_ELEMENT: 'SCROLLVIEW_ELEMENT',
+  BOTTOM_TABS_ELEMENT: 'BOTTOM_TABS_ELEMENT',
+  LANDSCAPE_ELEMENT: 'LANDSCAPE_ELEMENT',
+  PORTRAIT_ELEMENT: 'PORTRAIT_ELEMENT',
 
   // Headers
-  WELCOME_SCREEN_HEADER: `WELCOME_SCREEN_HEADER`,
-  PUSHED_SCREEN_HEADER: `PUSHED_SCREEN_HEADER`,
-  LAZILY_REGISTERED_SCREEN_HEADER: `LAZILY_REGISTERED_SCREEN_HEADER`,
-  OPTIONS_SCREEN_HEADER: `OPTIONS_SCREEN_HEADER`,
-  MODAL_SCREEN: `MODAL_SCREEN`,
-  CENTERED_TEXT_HEADER: `CENTERED_TEXT_HEADER`,
+  WELCOME_SCREEN_HEADER: 'WELCOME_SCREEN_HEADER',
+  PUSHED_SCREEN_HEADER: 'PUSHED_SCREEN_HEADER',
+  LAZILY_REGISTERED_SCREEN_HEADER: 'LAZILY_REGISTERED_SCREEN_HEADER',
+  OPTIONS_SCREEN_HEADER: 'OPTIONS_SCREEN_HEADER',
+  MODAL_SCREEN: 'MODAL_SCREEN',
+  CENTERED_TEXT_HEADER: 'CENTERED_TEXT_HEADER',
 };
 
 export default testIDs;

From b5f6c596cc276856806f844339bfde9bf5fff9f1 Mon Sep 17 00:00:00 2001
From: Ayodeji Oyeleye <71940927+ayodeji-jackson@users.noreply.github.com>
Date: Wed, 4 Oct 2023 10:21:23 +0100
Subject: [PATCH 4/6] fix: typo (#7784)

change 'thier' to 'their'

Co-authored-by: Yogev Ben David <yogev132@gmail.com>
---
 website/versioned_docs/version-7.37.0/docs/stack-buttons.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/versioned_docs/version-7.37.0/docs/stack-buttons.mdx b/website/versioned_docs/version-7.37.0/docs/stack-buttons.mdx
index a173cf6e9b8..cb2e47af482 100644
--- a/website/versioned_docs/version-7.37.0/docs/stack-buttons.mdx
+++ b/website/versioned_docs/version-7.37.0/docs/stack-buttons.mdx
@@ -34,7 +34,7 @@ To do so, you'll first need to register the view with Navigation, just like you
 Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));
 ```
 
-Now you can create buttons which use the component registered with `'ButtonComponent'` as thier custom view:
+Now you can create buttons which use the component registered with `'ButtonComponent'` as their custom view:
 
 ```js
 topBar: {

From d8774bc85fd79424901e66f1a88180ed8c53d185 Mon Sep 17 00:00:00 2001
From: Yogev Ben David <yogev132@gmail.com>
Date: Thu, 5 Oct 2023 16:04:26 +0300
Subject: [PATCH 5/6] Fix runOnMainThread to run at front of queue (#7792)

---
 .../main/java/com/reactnativenavigation/utils/UiUtils.java    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java b/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java
index 5389321c5e7..3d202ca4576 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java
@@ -82,9 +82,9 @@ public void onWindowDetached() {
 
     public static void runOnMainThread(Runnable runnable) {
         if (Looper.myLooper() == Looper.getMainLooper()) {
-            new Handler(Looper.getMainLooper()).postAtFrontOfQueue(runnable);
+            runnable.run();
         } else {
-            new Handler(Looper.getMainLooper()).post(runnable);
+            new Handler(Looper.getMainLooper()).postAtFrontOfQueue(runnable);
         }
     }
 

From 570aae52fcbd05576bc4939820304f26ef87c086 Mon Sep 17 00:00:00 2001
From: wixmobile <mobile1@wix.com>
Date: Sun, 8 Oct 2023 02:37:03 -0700
Subject: [PATCH 6/6] Update package.json version to 7.37.1 [buildkite skip]

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2e87b3296f0..6f4024596f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "7.37.0",
+  "version": "7.37.1",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,