react-native-navigation 7.37.0 → 7.37.1-hotfix.1

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

package/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -59,7 +59,9 @@ public class NavigationModule extends ReactContextBaseJavaModule {
             @Override
             public void onHostPause() {
                 super.onHostPause();
-                UiUtils.runOnMainThread(() -> navigator().onHostPause());
+                UiUtils.runOnMainThread(() -> {
+                    if (navigator() != null) navigator().onHostPause();
+                });
             }
 
             @Override

package/lib/android/app/src/main/java/com/reactnativenavigation/utils/UiUtils.java

@@ -82,9 +82,9 @@ public class UiUtils {
 
     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);
         }
     }
 

package/lib/dist/Mock/Components/ComponentScreen.js

@@ -12,6 +12,9 @@ const TopBar_1 = require("./TopBar");
 const EventsStore_1 = require("../Stores/EventsStore");
 const lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
 const layoutActions_1 = require("../actions/layoutActions");
+function isURISource(src) {
+    return !!src && typeof src === 'object' && 'uri' in src;
+}
 exports.ComponentScreen = (0, connect_1.connect)(class extends react_1.Component {
     constructor(props) {
         super(props);
@@ -31,17 +34,22 @@ exports.ComponentScreen = (0, connect_1.connect)(class extends react_1.Component
             return null;
         const buttons = bottomTabs.children.map((child, i) => {
             const bottomTabOptions = child.resolveOptions().bottomTab;
+            const icon = bottomTabs.selectedIndex === i ? bottomTabOptions?.selectedIcon : bottomTabOptions?.icon;
+            const iconURI = isURISource(icon) ? icon.uri : undefined;
             return (react_1.default.createElement(react_native_1.View, { key: `tab-${i}` },
-                react_1.default.createElement(react_native_1.Button, { testID: bottomTabOptions?.testID, title: bottomTabOptions?.text || '', onPress: () => {
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: { padding: 10 }, testID: bottomTabOptions?.testID, onPress: () => {
                         EventsStore_1.events.invokeBottomTabPressed({
                             tabIndex: i,
                         });
                         if (lodash_1.default.defaultTo(bottomTabOptions?.selectTabOnPress, true))
                             (0, layoutActions_1.switchTabByIndex)(this.props.layoutNode.getBottomTabs(), i);
-                    } }),
-                react_1.default.createElement(react_native_1.Text, null, bottomTabOptions?.badge)));
+                    } },
+                    react_1.default.createElement(react_native_1.View, { style: { justifyContent: 'center', alignItems: 'center' } },
+                        react_1.default.createElement(react_native_1.Text, null, bottomTabOptions?.badge),
+                        iconURI && react_1.default.createElement(react_native_1.Image, { style: { width: 18, height: 18, marginBottom: 5 }, source: { uri: iconURI } }),
+                        react_1.default.createElement(react_native_1.Text, { style: { fontSize: 12 } }, bottomTabOptions?.text || '')))));
         });
-        return react_1.default.createElement(react_native_1.View, { testID: bottomTabsOptions?.testID }, buttons);
+        return (react_1.default.createElement(react_native_1.View, { testID: bottomTabsOptions?.testID, style: { flexDirection: 'row', justifyContent: 'center', width: '100%', backgroundColor: '#F0F2F5' } }, buttons));
     }
     render() {
         const Component = react_native_navigation_1.Navigation.mock.store.getWrappedComponent(this.props.layoutNode.data.name);
@@ -49,7 +57,7 @@ exports.ComponentScreen = (0, connect_1.connect)(class extends react_1.Component
             throw new Error(`${this.props.layoutNode.data.name} has not been registered.`);
         return (react_1.default.createElement(react_native_1.View, { testID: this.isVisible() ? constants_1.VISIBLE_SCREEN_TEST_ID : undefined },
             this.props.layoutNode.getStack() && (react_1.default.createElement(TopBar_1.TopBar, { layoutNode: this.props.layoutNode, topBarOptions: this.props.layoutNode.resolveOptions().topBar, backButtonOptions: this.props.layoutNode.resolveOptions().topBar?.backButton })),
-            this.renderTabBar(),
-            react_1.default.createElement(Component, { componentId: this.props.layoutNode.nodeId })));
+            react_1.default.createElement(Component, { componentId: this.props.layoutNode.nodeId }),
+            this.renderTabBar()));
     }
 });

package/lib/ios/RNNSplashScreen.m

@@ -14,6 +14,8 @@
     if (launchStoryBoard != nil) { // load the splash from the storyboard that's defined in the
                                    // info.plist as the LaunchScreen
         @try {
+            // Remove .storyboard extension
+            launchStoryBoard = [launchStoryBoard stringByDeletingPathExtension];
             UIStoryboard *storyboard = [UIStoryboard storyboardWithName:launchStoryBoard
                                                                  bundle:nil];
             UIViewController *launchVC = [storyboard instantiateInitialViewController];

package/lib/ios/RNNUIBarButtonItem.m

@@ -87,9 +87,28 @@
                      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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "7.37.0",
+  "version": "7.37.1-hotfix.1",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,

package/react-native.config.js

@@ -8,10 +8,6 @@ module.exports = {
         packageInstance: 'new NavigationPackage(reactNativeHost)',
       },
     },
-    assets: [],
-    hooks: {
-      postlink: 'node node_modules/react-native-navigation/autolink/postlink/run',
-    },
   },
   project: {
     android: {