On tab press event (#5880)

* Open modal from tab iOS

* Open modal from tab Android

* Remove playground changes

Co-authored-by: Yogev Ben David <yogevbd@wix.com>

lib/android/app/src/main/java/com/reactnativenavigation/parse/BottomTabOptions.java

         options.fontSize = NumberParser.parse(json, "fontSize");
         options.selectedFontSize = NumberParser.parse(json, "selectedFontSize");
         options.dotIndicator = DotIndicatorOptions.parse(json.optJSONObject("dotIndicator"));
+        options.selectTabOnPress = BoolParser.parse(json, "selectTabOnPress");
+
         return options;
     }
 
     public DotIndicatorOptions dotIndicator = new DotIndicatorOptions();
     public Number fontSize = new NullNumber();
     public Number selectedFontSize = new NullNumber();
+    public Bool selectTabOnPress = new NullBool();
     @Nullable public Typeface fontFamily;
 
 
         if (other.selectedFontSize.hasValue()) selectedFontSize = other.selectedFontSize;
         if (other.fontFamily != null) fontFamily = other.fontFamily;
         if (other.dotIndicator.hasValue()) dotIndicator = other.dotIndicator;
+        if (other.selectTabOnPress.hasValue()) selectTabOnPress = other.selectTabOnPress;
     }
 
     void mergeWithDefault(final BottomTabOptions defaultOptions) {
         if (fontFamily == null) fontFamily = defaultOptions.fontFamily;
         if (!testId.hasValue()) testId = defaultOptions.testId;
         if (!dotIndicator.hasValue()) dotIndicator = defaultOptions.dotIndicator;
+        if (!selectTabOnPress.hasValue()) selectTabOnPress = defaultOptions.selectTabOnPress;
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/react/events/EventEmitter.java

     private static final String AppLaunched = "RNN.AppLaunched";
     private static final String CommandCompleted = "RNN.CommandCompleted";
     private static final String BottomTabSelected = "RNN.BottomTabSelected";
+    private static final String BottomTabPressed = "RNN.BottomTabPressed";
     private static final String ComponentDidAppear = "RNN.ComponentDidAppear";
     private static final String ComponentDidDisappear = "RNN.ComponentDidDisappear";
     private static final String NavigationButtonPressed = "RNN.NavigationButtonPressed";
         emit(BottomTabSelected, event);
     }
 
+    public void emitBottomTabPressed(int tabIndex) {
+        WritableMap event = Arguments.createMap();
+        event.putInt("tabIndex", tabIndex);
+        emit(BottomTabPressed, event);
+    }
+
     public void emitCommandCompleted(String commandName, String commandId, long completionTime) {
         WritableMap event = Arguments.createMap();
         event.putString("commandName", commandName);

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java

 
     @Override
     public boolean onTabSelected(int index, boolean wasSelected) {
-        eventEmitter.emitBottomTabSelected(bottomTabs.getCurrentItem(), index);
-        if (wasSelected) return false;
-        selectTab(index);
-        return false;
+        BottomTabOptions options = tabs.get(index).resolveCurrentOptions().bottomTabOptions;
+
+        eventEmitter.emitBottomTabPressed(index);
+
+        if (options.selectTabOnPress.get(true)){
+            eventEmitter.emitBottomTabSelected(bottomTabs.getCurrentItem(), index);
+            if (wasSelected) return false;
+            selectTab(index);
+            return false;
+        } else {
+            return false;
+        }
 	}
 
 	private List<AHBottomNavigationItem> createTabs() {

lib/ios/RNNBottomTabOptions.h

 @property(nonatomic, strong) Color *textColor;
 @property(nonatomic, strong) Number *fontSize;
 @property(nonatomic, strong) Bool *visible;
+@property(nonatomic, strong) Bool *selectTabOnPress;
 
 
 @end

lib/ios/RNNBottomTabOptions.m

     self.textColor = [ColorParser parse:dict key:@"textColor"];
     self.fontSize = [NumberParser parse:dict key:@"fontSize"];
     self.visible = [BoolParser parse:dict key:@"visible"];
+    self.selectTabOnPress = [BoolParser parse:dict key:@"selectTabOnPress"];
 
     return self;
 }

lib/ios/RNNBottomTabsController.m

     }
 }
 
+- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController
+{
+    NSUInteger _index = [tabBarController.viewControllers indexOfObject:viewController];
+    [self.eventEmitter sendBottomTabPressed:@(_index)];
+    
+    if([[viewController resolveOptions].bottomTab.selectTabOnPress getWithDefaultValue:YES]){
+        return YES;
+    }
+
+    return NO;
+}
+
 @end

lib/ios/RNNButtonOptions.h

 @property (nonatomic, strong) Image* icon;
 @property (nonatomic, strong) Bool* enabled;
 @property (nonatomic, strong) RNNInsetsOptions* iconInsets;
+@property(nonatomic, strong) Bool *selectTabOnPress;
 
 @end

lib/ios/RNNButtonOptions.m

 	self.icon = [ImageParser parse:dict key:@"icon"];
 	self.iconInsets = [[RNNInsetsOptions alloc] initWithDict:dict[@"iconInsets"]];
 	self.enabled = [BoolParser parse:dict key:@"enabled"];
-	
+	self.selectTabOnPress = [BoolParser parse:dict key:@"selectTabOnPress"];
+
 
 	return self;
 }

lib/ios/RNNEventEmitter.h

 
 - (void)sendScreenPoppedEvent:(NSString *)componentId;
 
+- (void)sendBottomTabPressed:(NSNumber *)tabIndex;
+
 
 @end

lib/ios/RNNEventEmitter.m

 static NSString* const SearchBarCancelPressed 	= @"RNN.SearchBarCancelPressed";
 static NSString* const PreviewCompleted         = @"RNN.PreviewCompleted";
 static NSString* const ScreenPopped             = @"RNN.ScreenPopped";
+static NSString* const BottomTabPressed         = @"RNN.BottomTabPressed";
 
 -(NSArray<NSString *> *)supportedEvents {
 	return @[AppLaunched,
 			 CommandCompleted,
 			 BottomTabSelected,
        BottomTabLongPressed,
+       BottomTabPressed,
 			 ComponentDidAppear,
 			 ComponentDidDisappear,
 			 NavigationButtonPressed,
                                         				  }];
 }
 
+-(void)sendBottomTabPressed:(NSNumber *)tabIndex {
+    [self send:BottomTabPressed body:@{
+                                        @"tabIndex": tabIndex
+                                        }];
+}
+
 -(void)sendOnNavigationCommandCompletion:(NSString *)commandName commandId:(NSString *)commandId params:(NSDictionary*)params {
 	[self send:CommandCompleted body:@{
 									   @"commandId":commandId,

lib/src/adapters/NativeEventsReceiver.ts

-import { NativeModules, NativeEventEmitter, EventEmitter, EmitterSubscription } from 'react-native';
+import {
+  NativeModules,
+  NativeEventEmitter,
+  EventEmitter,
+  EmitterSubscription
+} from 'react-native';
 import {
   ComponentDidAppearEvent,
   ComponentDidDisappearEvent,
   ScreenPoppedEvent,
   ModalAttemptedToDismissEvent
 } from '../interfaces/ComponentEvents';
-import { CommandCompletedEvent, BottomTabSelectedEvent, BottomTabLongPressedEvent } from '../interfaces/Events';
+import {
+  CommandCompletedEvent,
+  BottomTabSelectedEvent,
+  BottomTabLongPressedEvent,
+  BottomTabPressedEvent
+} from '../interfaces/Events';
 
 export class NativeEventsReceiver {
   private emitter: EventEmitter;
     try {
       this.emitter = new NativeEventEmitter(NativeModules.RNNEventEmitter);
     } catch (e) {
-      this.emitter = {
+      this.emitter = ({
         addListener: () => {
           return {
             remove: () => undefined
           };
         }
-      } as any as EventEmitter;
+      } as any) as EventEmitter;
     }
   }
 
-  public registerAppLaunchedListener(callback: () => void): EmitterSubscription {
+  public registerAppLaunchedListener(
+    callback: () => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.AppLaunched', callback);
   }
 
-  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EmitterSubscription {
+  public registerComponentDidAppearListener(
+    callback: (event: ComponentDidAppearEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.ComponentDidAppear', callback);
   }
 
-  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EmitterSubscription {
+  public registerComponentDidDisappearListener(
+    callback: (event: ComponentDidDisappearEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.ComponentDidDisappear', callback);
   }
 
-  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EmitterSubscription {
+  public registerNavigationButtonPressedListener(
+    callback: (event: NavigationButtonPressedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.NavigationButtonPressed', callback);
   }
 
-  public registerModalDismissedListener(callback: (event: ModalDismissedEvent) => void): EmitterSubscription {
+  public registerBottomTabPressedListener(
+    callback: (data: BottomTabPressedEvent) => void
+  ): EmitterSubscription {
+    return this.emitter.addListener('RNN.BottomTabPressed', callback);
+  }
+
+  public registerModalDismissedListener(
+    callback: (event: ModalDismissedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.ModalDismissed', callback);
   }
 
-  public registerModalAttemptedToDismissListener(callback: (event: ModalAttemptedToDismissEvent) => void): EmitterSubscription {
+  public registerModalAttemptedToDismissListener(
+    callback: (event: ModalAttemptedToDismissEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.ModalAttemptedToDismiss', callback);
   }
 
-  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EmitterSubscription {
+  public registerSearchBarUpdatedListener(
+    callback: (event: SearchBarUpdatedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.SearchBarUpdated', callback);
   }
 
-  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EmitterSubscription {
+  public registerSearchBarCancelPressedListener(
+    callback: (event: SearchBarCancelPressedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.SearchBarCancelPressed', callback);
   }
 
-  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EmitterSubscription {
+  public registerPreviewCompletedListener(
+    callback: (event: PreviewCompletedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.PreviewCompleted', callback);
   }
 
-  public registerCommandCompletedListener(callback: (data: CommandCompletedEvent) => void): EmitterSubscription {
+  public registerCommandCompletedListener(
+    callback: (data: CommandCompletedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.CommandCompleted', callback);
   }
 
-  public registerBottomTabSelectedListener(callback: (data: BottomTabSelectedEvent) => void): EmitterSubscription {
+  public registerBottomTabSelectedListener(
+    callback: (data: BottomTabSelectedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.BottomTabSelected', callback);
   }
 
-  public registerBottomTabLongPressedListener(callback: (data: BottomTabLongPressedEvent) => void): EmitterSubscription {
+  public registerBottomTabLongPressedListener(
+    callback: (data: BottomTabLongPressedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.BottomTabLongPressed', callback);
   }
 
-  public registerScreenPoppedListener(callback: (event: ScreenPoppedEvent) => void): EmitterSubscription {
+  public registerScreenPoppedListener(
+    callback: (event: ScreenPoppedEvent) => void
+  ): EmitterSubscription {
     return this.emitter.addListener('RNN.ScreenPopped', callback);
   }
 }

lib/src/events/EventsRegistry.ts

   ScreenPoppedEvent,
   ModalAttemptedToDismissEvent
 } from '../interfaces/ComponentEvents';
-import { CommandCompletedEvent, BottomTabSelectedEvent, BottomTabLongPressedEvent } from '../interfaces/Events';
+import {
+  CommandCompletedEvent,
+  BottomTabSelectedEvent,
+  BottomTabLongPressedEvent,
+  BottomTabPressedEvent
+} from '../interfaces/Events';
 
 export class EventsRegistry {
-  constructor(private nativeEventsReceiver: NativeEventsReceiver, private commandsObserver: CommandsObserver, private componentEventsObserver: ComponentEventsObserver) { }
-
-  public registerAppLaunchedListener(callback: () => void): EmitterSubscription {
+  constructor(
+    private nativeEventsReceiver: NativeEventsReceiver,
+    private commandsObserver: CommandsObserver,
+    private componentEventsObserver: ComponentEventsObserver
+  ) {}
+
+  public registerAppLaunchedListener(
+    callback: () => void
+  ): EmitterSubscription {
     return this.nativeEventsReceiver.registerAppLaunchedListener(callback);
   }
 
-  public registerComponentDidAppearListener(callback: (event: ComponentDidAppearEvent) => void): EmitterSubscription {
-    return this.nativeEventsReceiver.registerComponentDidAppearListener(callback);
+  public registerComponentDidAppearListener(
+    callback: (event: ComponentDidAppearEvent) => void
+  ): EmitterSubscription {
+    return this.nativeEventsReceiver.registerComponentDidAppearListener(
+      callback
+    );
   }
 
-  public registerComponentDidDisappearListener(callback: (event: ComponentDidDisappearEvent) => void): EmitterSubscription {
-    return this.nativeEventsReceiver.registerComponentDidDisappearListener(callback);
+  public registerComponentDidDisappearListener(
+    callback: (event: ComponentDidDisappearEvent) => void
+  ): EmitterSubscription {
+    return this.nativeEventsReceiver.registerComponentDidDisappearListener(
+      callback
+    );
   }
 
-  public registerCommandCompletedListener(callback: (event: CommandCompletedEvent) => void): EmitterSubscription {
+  public registerCommandCompletedListener(
+    callback: (event: CommandCompletedEvent) => void
+  ): EmitterSubscription {
     return this.nativeEventsReceiver.registerCommandCompletedListener(callback);
   }
 
-  public registerBottomTabSelectedListener(callback: (event: BottomTabSelectedEvent) => void): EmitterSubscription {
-    return this.nativeEventsReceiver.registerBottomTabSelectedListener(callback);
+  public registerBottomTabSelectedListener(
+    callback: (event: BottomTabSelectedEvent) => void
+  ): EmitterSubscription {
+    return this.nativeEventsReceiver.registerBottomTabSelectedListener(
+      callback
+    );
   }
 
-  public registerBottomTabLongPressedListener(callback: (event: BottomTabLongPressedEvent) => void): EmitterSubscription {
-    return this.nativeEventsReceiver.registerBottomTabLongPressedListener(callback);
+  public registerBottomTabPressedListener(
+    callback: (event: BottomTabPressedEvent) => void
+  ): EmitterSubscription {
+    return this.nativeEventsReceiver.registerBottomTabPressedListener(callback);
   }
 
-  public registerNavigationButtonPressedListener(callback: (event: NavigationButtonPressedEvent) => void): EmitterSubscription {
-    return this.nativeEventsReceiver.registerNavigationButtonPressedListener(callback);
+  public registerBottomTabLongPressedListener(
+    callback: (event: BottomTabLongPressedEvent) => void
+  ): EmitterSubscription {
+    return this.nativeEventsReceiver.registerBottomTabLongPressedListener(
+      callback
+    );
   }
 
-  public registerModalDismissedListener(callback: (event: ModalDismissedEvent) => void): EmitterSubscription {
+  public registerNavigationButtonPressedListener(
+    callback: (event: NavigationButtonPressedEvent) => void
+  ): EmitterSubscription {
+    return this.nativeEventsReceiver.registerNavigationButtonPressedListener(
+      callback
+    );
+  }
+
+  public registerModalDismissedListener(
+    callback: (event: ModalDismissedEvent) => void
+  ): EmitterSubscription {
     return this.nativeEventsReceiver.registerModalDismissedListener(callback);
   }
 
-  public registerModalAttemptedToDismissListener(callback: (event: ModalAttemptedToDismissEvent) => void): EmitterSubscription {
-    return this.nativeEventsReceiver.registerModalAttemptedToDismissListener(callback);
+  public registerModalAttemptedToDismissListener(
+    callback: (event: ModalAttemptedToDismissEvent) => void
+  ): EmitterSubscription {
+    return this.nativeEventsReceiver.registerModalAttemptedToDismissListener(
+      callback
+    );
   }
 
-  public registerSearchBarUpdatedListener(callback: (event: SearchBarUpdatedEvent) => void): EmitterSubscription {
+  public registerSearchBarUpdatedListener(
+    callback: (event: SearchBarUpdatedEvent) => void
+  ): EmitterSubscription {
     return this.nativeEventsReceiver.registerSearchBarUpdatedListener(callback);
   }
 
-  public registerSearchBarCancelPressedListener(callback: (event: SearchBarCancelPressedEvent) => void): EmitterSubscription {
-    return this.nativeEventsReceiver.registerSearchBarCancelPressedListener(callback);
+  public registerSearchBarCancelPressedListener(
+    callback: (event: SearchBarCancelPressedEvent) => void
+  ): EmitterSubscription {
+    return this.nativeEventsReceiver.registerSearchBarCancelPressedListener(
+      callback
+    );
   }
 
-  public registerPreviewCompletedListener(callback: (event: PreviewCompletedEvent) => void): EmitterSubscription {
+  public registerPreviewCompletedListener(
+    callback: (event: PreviewCompletedEvent) => void
+  ): EmitterSubscription {
     return this.nativeEventsReceiver.registerPreviewCompletedListener(callback);
   }
 
-  public registerCommandListener(callback: (name: string, params: any) => void): EventSubscription {
+  public registerCommandListener(
+    callback: (name: string, params: any) => void
+  ): EventSubscription {
     return this.commandsObserver.register(callback);
   }
 
-  public bindComponent(component: React.Component<any>, componentId?: string): EventSubscription {
+  public bindComponent(
+    component: React.Component<any>,
+    componentId?: string
+  ): EventSubscription {
     return this.componentEventsObserver.bindComponent(component, componentId);
   }
 
-  public registerScreenPoppedListener(callback: (event: ScreenPoppedEvent) => void): EmitterSubscription {
+  public registerScreenPoppedListener(
+    callback: (event: ScreenPoppedEvent) => void
+  ): EmitterSubscription {
     return this.nativeEventsReceiver.registerScreenPoppedListener(callback);
   }
-
 }

lib/src/interfaces/Events.ts

 export interface BottomTabLongPressedEvent {
   selectedTabIndex: number;
 }
+
+export interface BottomTabPressedEvent {
+  tabIndex: number;
+}

lib/src/interfaces/Options.ts

 
 type Color = string;
 type FontFamily = string;
-type FontWeight = 'regular' | 'bold' | 'thin' | 'ultraLight' | 'light' | 'medium' | 'semibold' | 'heavy' | 'black';
+type FontWeight =
+  | 'regular'
+  | 'bold'
+  | 'thin'
+  | 'ultraLight'
+  | 'light'
+  | 'medium'
+  | 'semibold'
+  | 'heavy'
+  | 'black';
 type LayoutOrientation = 'portrait' | 'landscape';
 type AndroidDensityNumber = number;
-type SystemItemIcon = 'done' | 'cancel' | 'edit'
-  | 'save' | 'add' | 'flexibleSpace' | 'fixedSpace'
-  | 'compose' | 'reply' | 'action' | 'organize'
-  | 'bookmarks' | 'search' | 'refresh' | 'stop'
-  | 'camera' | 'trash' | 'play' | 'pause'
-  | 'rewind' | 'fastForward' | 'undo' | 'redo';
+type SystemItemIcon =
+  | 'done'
+  | 'cancel'
+  | 'edit'
+  | 'save'
+  | 'add'
+  | 'flexibleSpace'
+  | 'fixedSpace'
+  | 'compose'
+  | 'reply'
+  | 'action'
+  | 'organize'
+  | 'bookmarks'
+  | 'search'
+  | 'refresh'
+  | 'stop'
+  | 'camera'
+  | 'trash'
+  | 'play'
+  | 'pause'
+  | 'rewind'
+  | 'fastForward'
+  | 'undo'
+  | 'redo';
 
 export interface OptionsSplitView {
   /**
    * #### (Android specific)
    */
   drawBehind?: boolean;
+  /**
+   * If it's set to false, pressing a tab won't select the tab
+   * instead it will emit a bottomTabPressedEvent
+   */
+  selectTabOnPress?: boolean;
 }
 
 export interface OptionsLayout {
    */
   icon?: ImageRequireSource;
   /**
-  * Set the button icon insets
-  */
+   * Set the button icon insets
+   */
   iconInsets?: IconInsets;
   /**
    * Set the button as a custom component
    * Control the text display mode below the tab icon
    * #### (Android specific)
    */
-  titleDisplayMode?: 'alwaysShow' | 'showWhenActive' | 'alwaysHide' | 'showWhenActiveForce';
+  titleDisplayMode?:
+    | 'alwaysShow'
+    | 'showWhenActive'
+    | 'alwaysHide'
+    | 'showWhenActiveForce';
   /**
    * Set the elevation of the Bottom Tabs in dp
    * #### (Android specific)
 }
 
 export interface DotIndicatorOptions {
-    // default red
-    color?: Color;
-    // default 6
-    size?: number;
-    // default false
-    visible?: boolean;
+  // default red
+  color?: Color;
+  // default 6
+  size?: number;
+  // default false
+  visible?: boolean;
 }
 
 export type ImageResource = string;
 
 export interface OptionsBottomTab {
-    dotIndicator?: DotIndicatorOptions;
+  dotIndicator?: DotIndicatorOptions;
 
   /**
    * Set the text to display below the icon
    * Set the text font family
    */
   fontFamily?: FontFamily;
-    /**
+  /**
    * Set the font weight, ignore fontFamily and use the iOS system fonts instead
    * #### (iOS specific)
    */

playground/ios/Podfile.lock

     - ReactCommon/jscallinvoker (= 0.61.4)
   - ReactNativeKeyboardTrackingView (5.6.1):
     - React
-  - ReactNativeNavigation (4.0.6):
+  - ReactNativeNavigation (4.6.0):
     - React
   - Yoga (1.14.0)
 
   - Yoga (from `../../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
-  https://github.com/cocoapods/specs.git:
+  https://github.com/CocoaPods/Specs.git:
     - boost-for-react-native
     - OCMock
 
   React-RCTVibration: 0f76400ee3cec6edb9c125da49fed279340d145a
   ReactCommon: a6a294e7028ed67b926d29551aa9394fd989c24c
   ReactNativeKeyboardTrackingView: a240a6a0dba852bb107109a7ec7e98b884055977
-  ReactNativeNavigation: a04159cfe472aa4d9dd48d1185b4a2539b9dbbe2
+  ReactNativeNavigation: fb74494c1b6f0abd36a17c7af40f804f77d3181f
   Yoga: ba3d99dbee6c15ea6bbe3783d1f0cb1ffb79af0f
 
 PODFILE CHECKSUM: 781f49751a12b13af3e83d5dfc4b122aa5770543
 
-COCOAPODS: 1.7.1
+COCOAPODS: 1.8.4