Merge branch 'master' into patch-1

wix · Oct 31, 2023 · a4bc46a · a4bc46a
2 parents db9d1e5 + 570aae5
commit a4bc46a
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 25 deletions.
diff --git 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,30 +32,41 @@ 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,
                 });
                 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>
       );
     }

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

diff --git 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];

diff --git 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,

diff --git 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;
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
@@ -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: {