Support large bottomTab icons

lib/android/app/build.gradle

@@ -173,7 +173,8 @@ dependencies {
     implementation 'androidx.annotation:annotation:1.1.0'
     implementation 'com.google.android.material:material:1.2.0-alpha03'
 
-    implementation 'com.github.wix-playground:ahbottomnavigation:3.2.0'
+    implementation 'com.github.wix-playground:ahbottomnavigation:3.3.0'
+//    implementation project(':AHBottomNavigation')
     implementation 'com.github.wix-playground:reflow-animator:1.0.6'
     implementation 'com.github.clans:fab:1.6.4'
 

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

@@ -30,6 +30,8 @@ public static BottomTabOptions parse(Context context, TypefaceLoader typefaceMan
         options.textColor = ColorParser.parse(context, json, "textColor");
         options.selectedTextColor = ColorParser.parse(context, json, "selectedTextColor");
         options.icon = IconParser.parse(json, "icon");
+        options.iconWidth = NumberParser.parse(json, "iconWidth");
+        options.iconHeight = NumberParser.parse(json, "iconHeight");
         options.selectedIcon = IconParser.parse(json, "selectedIcon");
         options.iconColor = ColorParser.parse(context, json, "iconColor");
         options.selectedIconColor = ColorParser.parse(context, json, "selectedIconColor");
@@ -50,6 +52,8 @@ public static BottomTabOptions parse(Context context, TypefaceLoader typefaceMan
     public Colour textColor = new NullColor();
     public Colour selectedTextColor = new NullColor();
     public Text icon = new NullText();
+    public Number iconWidth = new NullNumber();
+    public Number iconHeight = new NullNumber();
     public Text selectedIcon = new NullText();
     public Colour iconColor = new NullColor();
     public Colour selectedIconColor = new NullColor();
@@ -69,6 +73,8 @@ void mergeWith(final BottomTabOptions other) {
         if (other.textColor.hasValue()) textColor = other.textColor;
         if (other.selectedTextColor.hasValue()) selectedTextColor = other.selectedTextColor;
         if (other.icon.hasValue()) icon = other.icon;
+        if (other.iconWidth.hasValue()) iconWidth = other.iconWidth;
+        if (other.iconHeight.hasValue()) iconHeight = other.iconHeight;
         if (other.selectedIcon.hasValue()) selectedIcon = other.selectedIcon;
         if (other.iconColor.hasValue()) iconColor = other.iconColor;
         if (other.selectedIconColor.hasValue()) selectedIconColor = other.selectedIconColor;
@@ -88,6 +94,8 @@ void mergeWithDefault(final BottomTabOptions defaultOptions) {
         if (!textColor.hasValue()) textColor = defaultOptions.textColor;
         if (!selectedTextColor.hasValue()) selectedTextColor = defaultOptions.selectedTextColor;
         if (!icon.hasValue()) icon = defaultOptions.icon;
+        if (!iconWidth.hasValue()) iconWidth = defaultOptions.iconWidth;
+        if (!iconHeight.hasValue()) iconHeight = defaultOptions.iconHeight;
         if (!selectedIcon.hasValue()) selectedIcon = defaultOptions.selectedIcon;
         if (!iconColor.hasValue()) iconColor = defaultOptions.iconColor;
         if (!selectedIconColor.hasValue()) selectedIconColor = defaultOptions.selectedIconColor;

lib/android/app/src/main/java/com/reactnativenavigation/options/BottomTabsOptions.java

@@ -35,6 +35,7 @@ public static BottomTabsOptions parse(Context context, JSONObject json) {
         options.drawBehind = BoolParser.parse(json, "drawBehind");
         options.preferLargeIcons = BoolParser.parse(json, "preferLargeIcons");
 		options.animate = BoolParser.parse(json,"animate");
+        options.animateTabSelection = BoolParser.parse(json, "animateTabSelection");
         options.elevation = FractionParser.parse(json, "elevation");
         options.testId = TextParser.parse(json, "testID");
         options.titleDisplayMode = TitleDisplayMode.fromString(json.optString("titleDisplayMode"));
@@ -48,6 +49,7 @@ public static BottomTabsOptions parse(Context context, JSONObject json) {
 	public Bool visible = new NullBool();
     public Bool drawBehind = new NullBool();
 	public Bool animate = new NullBool();
+    public Bool animateTabSelection = new NullBool();
     public Bool preferLargeIcons = new NullBool();
 	public Number currentTabIndex = new NullNumber();
 	public Fraction elevation = new NullFraction();
@@ -63,6 +65,7 @@ void mergeWith(final BottomTabsOptions other) {
 		if (other.visible.hasValue()) visible = other.visible;
         if (other.drawBehind.hasValue()) drawBehind = other.drawBehind;
 		if (other.animate.hasValue()) animate = other.animate;
+        if (other.animateTabSelection.hasValue()) animateTabSelection = other.animateTabSelection;
         if (other.preferLargeIcons.hasValue()) preferLargeIcons = other.preferLargeIcons;
         if (other.elevation.hasValue()) elevation = other.elevation;
         if (other.backgroundColor.hasValue()) backgroundColor = other.backgroundColor;
@@ -78,6 +81,7 @@ void mergeWithDefault(final BottomTabsOptions defaultOptions) {
         if (!visible.hasValue()) visible = defaultOptions.visible;
         if (!drawBehind.hasValue()) drawBehind = defaultOptions.drawBehind;
         if (!animate.hasValue()) animate = defaultOptions.animate;
+        if (!animateTabSelection.hasValue()) animateTabSelection = defaultOptions.animateTabSelection;
         if (!preferLargeIcons.hasValue()) preferLargeIcons = defaultOptions.preferLargeIcons;
         if (!elevation.hasValue()) elevation = defaultOptions.elevation;
         if (!backgroundColor.hasValue()) backgroundColor = defaultOptions.backgroundColor;

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

@@ -55,6 +55,8 @@ public void applyOptions() {
         bottomTabs.perform(bottomTabs -> {
             for (int i = 0; i < tabs.size(); i++) {
                 BottomTabOptions tab = tabs.get(i).resolveCurrentOptions(defaultOptions).bottomTabOptions;
+                bottomTabs.setIconWidth(i, tab.iconWidth.get(null));
+                bottomTabs.setIconHeight(i, tab.iconHeight.get(null));
                 bottomTabs.setTitleTypeface(i, tab.font.getTypeface(typefaceLoader, Typeface.DEFAULT));
                 if (tab.selectedIconColor.canApplyValue()) bottomTabs.setIconActiveColor(i, tab.selectedIconColor.get(null));
                 if (tab.iconColor.canApplyValue()) bottomTabs.setIconInactiveColor(i, tab.iconColor.get(null));
@@ -81,6 +83,8 @@ public void mergeChildOptions(Options options, ViewController child) {
             int index = bottomTabFinder.findByControllerId(child.getId());
             if (index >= 0) {
                 BottomTabOptions tab = options.bottomTabOptions;
+                if (tab.iconWidth.hasValue()) bottomTabs.setIconWidth(index, tab.iconWidth.get(null));
+                if (tab.iconHeight.hasValue()) bottomTabs.setIconHeight(index, tab.iconHeight.get(null));
                 if (tab.font.hasValue()) bottomTabs.setTitleTypeface(index, tab.font.getTypeface(typefaceLoader, Typeface.DEFAULT));
                 if (canMerge(tab.selectedIconColor)) bottomTabs.setIconActiveColor(index, tab.selectedIconColor.get());
                 if (canMerge(tab.iconColor)) bottomTabs.setIconInactiveColor(index, tab.iconColor.get());

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

@@ -74,6 +74,9 @@ private void mergeBottomTabsOptions(Options options, ViewController view) {
         if (bottomTabsOptions.backgroundColor.hasValue()) {
             bottomTabs.setBackgroundColor(bottomTabsOptions.backgroundColor.get());
         }
+        if (bottomTabsOptions.animateTabSelection.hasValue()) {
+            bottomTabs.setAnimateTabSelection(bottomTabsOptions.animateTabSelection.get());
+        }
         if (bottomTabsOptions.currentTabIndex.hasValue()) {
             int tabIndex = bottomTabsOptions.currentTabIndex.get();
             if (tabIndex >= 0) tabSelector.selectTab(tabIndex);
@@ -122,6 +125,7 @@ private void applyBottomTabsOptions(Options options) {
         bottomTabs.setPreferLargeIcons(options.bottomTabsOptions.preferLargeIcons.get(false));
         bottomTabs.setTitleState(bottomTabsOptions.titleDisplayMode.get(getDefaultTitleState()));
         bottomTabs.setBackgroundColor(bottomTabsOptions.backgroundColor.get(Color.WHITE));
+        bottomTabs.setAnimateTabSelection(bottomTabsOptions.animateTabSelection.get(true));
         if (bottomTabsOptions.currentTabIndex.hasValue()) {
             int tabIndex = bottomTabsOptions.currentTabIndex.get();
             if (tabIndex >= 0) {

lib/src/interfaces/Options.ts

@@ -726,6 +726,12 @@ export interface OptionsBottomTabs {
    * Enable animations when toggling visibility
    */
   animate?: boolean;
+  /**
+   * Controls wether tab selection is animated or not
+   * #### (android specific)
+   * @default true
+   */
+  animateTabSelection?: boolean;
   /**
    * Use large icons when possible, even when three tabs without titles are displayed
    * #### (android specific)
@@ -840,6 +846,16 @@ export interface OptionsBottomTab {
    * Set the icon tint
    */
   iconColor?: Color;
+  /**
+   * Set the icon width
+   * #### (Android specific)
+   */
+  iconWidth?: number;
+  /**
+   * Set the icon height
+   * #### (Android specific)
+   */
+  iconHeight?: number;
   /**
    * Set the text color
    */
@@ -872,7 +888,6 @@ export interface OptionsBottomTab {
   fontSize?: number;
   /**
    * Set the insets of the icon
-   * #### (iOS specific)
    */
   iconInsets?: Insets;
   /**

playground/android/settings.gradle

@@ -4,3 +4,5 @@ applyNativeModulesSettingsGradle(settings)
 include ':app'
 include ':react-native-navigation'
 project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../../lib/android/app/')
+//include ':AHBottomNavigation'
+//project(':AHBottomNavigation').projectDir = new File(rootProject.projectDir, '../../../ahbottomnavigation/ahbottomnavigation/')

website/docs/api/options-bottomTab.mdx

@@ -66,9 +66,25 @@ const options = {
 
 ## `icon`
 
+| Type                                       | Required | Platform |
+| ------------------------------------------ | -------- | -------- |
+| [ImageResource](options-imageResource.mdx) | No       | Both     |
+
+## `iconWidth`
+
+The width (in dp) of the icon.
+
 | Type   | Required | Platform |
 | ------ | -------- | -------- |
-| [ImageResource](options-imageResource.mdx) | No       | Both     |
+| number | No       | Android  |
+
+## `iconHeight`
+
+The height (in dp) of the icon.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Android  |
 
 ## `iconColor`
 
@@ -84,8 +100,8 @@ const options = {
 
 ## `selectedIcon`
 
-| Type   | Required | Platform |
-| ------ | -------- | -------- |
+| Type                                       | Required | Platform |
+| ------------------------------------------ | -------- | -------- |
 | [ImageResource](options-imageResource.mdx) | No       | Both     |
 
 ## `selectedIconColor`

website/docs/api/options-bottomTabs.mdx

@@ -18,6 +18,14 @@ Controls whether toggling visibility states will be animated.
 | ------- | -------- | -------- |
 | boolean | No       | Both     |
 
+## `animateTabSelection`
+
+Controls wether tab selection is animated or not
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Android  |
+
 ## `backgroundColor`
 
 Change the background color.