Support changing TopTabs font size (#2449)

* Currently doesn't work - need to implement custom TopTab view

docs/_sidebar.md

@@ -11,6 +11,7 @@
 - Options
  - [NavigationOptions](/docs/options/NavigationOptions)
  - [TopBar](/docs/options/TopBar)
+ - [TopTabs](/docs/options/TopTabs)
  - [TopTab](/docs/options/TopTab)
  - [Button](/docs/options/Button)
  - [BottomTabs](/docs/options/BottomTabs)

docs/docs/Container.md

@@ -5,6 +5,7 @@
 | Name | Type | Description |
 | --- | --- | --- |
 | name | <code>string</code> | The container's registered name |
+| topTabs | [<code>Array.&lt;Container&gt;</code>](#Container) |  |
 | passProps | <code>object</code> | props |
 | navigationOptions | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/NavigationOptions">NavigationOptions</a> |  |
 

docs/docs/Navigation.md

@@ -10,7 +10,7 @@
     * [.showModal(params)](#Navigation+showModal)
     * [.dismissModal(containerId)](#Navigation+dismissModal)
     * [.dismissAllModals()](#Navigation+dismissAllModals)
-    * [.push(containerId, params)](#Navigation+push)
+    * [.push(containerId, container)](#Navigation+push)
     * [.pop(containerId, params)](#Navigation+pop)
     * [.popTo(containerId)](#Navigation+popTo)
     * [.popToRoot(containerId)](#Navigation+popToRoot)
@@ -109,14 +109,14 @@ Dismiss all Modals
 
 <a name="Navigation+push"></a>
 
-## navigation.push(containerId, params)
+## navigation.push(containerId, container)
 Push a new screen into this screen's navigation stack.
 
 
 | Param | Type | Description |
 | --- | --- | --- |
 | containerId | <code>string</code> | The container's id. |
-| params | <code>*</code> |  |
+| container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> |  |
 
 
 * * *

docs/docs/options/BottomTabs.md

@@ -9,4 +9,5 @@
 | hidden | <code>boolean</code> | 
 | animateHide | <code>boolean</code> | 
 | testID | <code>string</code> | 
+| drawUnder | <code>boolean</code> | 
 

docs/docs/options/NavigationOptions.md

@@ -8,6 +8,7 @@
 | bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/BottomTabs">BottomTabs</a> | 
 | bottomTab | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/BottomTab">BottomTab</a> | 
 | orientation | <code>string</code> | 
+| topTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/TopTabs">TopTabs</a> | 
 | rightButtons | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/Button">Button[]</a> | 
 | leftButtons | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/Button">Button[]</a> | 
 

docs/docs/options/TopBar.md

@@ -19,4 +19,5 @@
 | blur | <code>boolean</code> | 
 | noBorder | <code>boolean</code> | 
 | largeTitle | <code>boolean</code> | 
+| drawUnder | <code>boolean</code> | 
 

docs/docs/options/TopTabs.md

@@ -0,0 +1,10 @@
+<h1>TopTabs</h1>
+
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| selectedTabColor | <code>string</code> | Selected tab color |
+| unselectedTabColor | <code>string</code> | Unselected tab color |
+| fontSize | <code>int</code> |  |
+

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

@@ -0,0 +1,16 @@
+package com.reactnativenavigation.parse;
+
+import android.support.annotation.ColorInt;
+
+public class Color extends Param<Integer>{
+
+    public Color(@ColorInt int color) {
+        super(color);
+    }
+
+    @SuppressWarnings("MagicNumber")
+    @Override
+    public String toString() {
+        return String.format("#%06X", (0xFFFFFF & get()));
+    }
+}

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

@@ -1,8 +1,5 @@
 package com.reactnativenavigation.parse;
 
-import com.reactnativenavigation.views.style.Color;
-import com.reactnativenavigation.views.style.NullColor;
-
 import org.json.JSONObject;
 
 public class ColorParser {

lib/android/app/src/main/java/com/reactnativenavigation/views/style/NullColor.java → lib/android/app/src/main/java/com/reactnativenavigation/parse/NullColor.java

@@ -1,16 +1,16 @@
-package com.reactnativenavigation.views.style;
+package com.reactnativenavigation.parse;
 
 public class NullColor extends Color {
 
-    public NullColor() {
+    NullColor() {
         super(0);
     }
 
-    public boolean hasColor() {
+    @Override
+    public boolean hasValue() {
         return false;
     }
 
-    @SuppressWarnings("MagicNumber")
     @Override
     public String toString() {
         return "Null Color";

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

@@ -0,0 +1,12 @@
+package com.reactnativenavigation.parse;
+
+public class NullNumber extends Number {
+    public NullNumber() {
+        super(0);
+    }
+
+    @Override
+    public boolean hasValue() {
+        return false;
+    }
+}

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

@@ -0,0 +1,8 @@
+package com.reactnativenavigation.parse;
+
+public class Number extends Param<Integer> {
+
+    public Number(int value) {
+        super(value);
+    }
+}

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

@@ -0,0 +1,9 @@
+package com.reactnativenavigation.parse;
+
+import org.json.JSONObject;
+
+public class NumberParser {
+    public static Number parse(JSONObject json, String number) {
+        return json.has(number) ? new Number(json.optInt(number)) : new NullNumber();
+    }
+}

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

@@ -0,0 +1,20 @@
+package com.reactnativenavigation.parse;
+
+public abstract class Param<T> {
+    protected T value;
+
+    public Param(T value) {
+        this.value = value;
+    }
+
+    public T get() {
+        if (hasValue()) {
+            return value;
+        }
+        throw new RuntimeException("Tried to get null value!");
+    }
+
+    public boolean hasValue() {
+        return value != null;
+    }
+}

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

@@ -3,39 +3,32 @@ package com.reactnativenavigation.parse;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 
-import com.reactnativenavigation.views.style.Color;
-import com.reactnativenavigation.views.style.NullColor;
-
 import org.json.JSONObject;
 
 public class TopTabsOptions implements DEFAULT_VALUES {
 
     @NonNull public Color selectedTabColor = new NullColor();
     @NonNull public Color unselectedTabColor = new NullColor();
+    @NonNull public Number fontSize = new NullNumber();
 
     public static TopTabsOptions parse(@Nullable JSONObject json) {
         TopTabsOptions result = new TopTabsOptions();
         if (json == null) return result;
         result.selectedTabColor = ColorParser.parse(json, "selectedTabColor");
         result.unselectedTabColor = ColorParser.parse(json, "unselectedTabColor");
+        result.fontSize = NumberParser.parse(json, "fontSize");
         return result;
     }
 
     void mergeWith(TopTabsOptions other) {
-        if (other.selectedTabColor.hasColor()) {
-            selectedTabColor = other.selectedTabColor;
-        }
-        if (other.unselectedTabColor.hasColor()) {
-            unselectedTabColor = other.unselectedTabColor;
-        }
+        if (other.selectedTabColor.hasValue()) selectedTabColor = other.selectedTabColor;
+        if (other.unselectedTabColor.hasValue()) unselectedTabColor = other.unselectedTabColor;
+        if (other.fontSize.hasValue()) fontSize = other.fontSize;
     }
 
     void mergeWithDefault(TopTabsOptions defaultOptions) {
-        if (!selectedTabColor.hasColor()) {
-            selectedTabColor = defaultOptions.selectedTabColor;
-        }
-        if (!unselectedTabColor.hasColor()) {
-            unselectedTabColor = defaultOptions.unselectedTabColor;
-        }
+        if (!selectedTabColor.hasValue()) selectedTabColor = defaultOptions.selectedTabColor;
+        if (!unselectedTabColor.hasValue()) unselectedTabColor = defaultOptions.unselectedTabColor;
+        if (!fontSize.hasValue()) fontSize = defaultOptions.fontSize;
     }
 }

lib/android/app/src/main/java/com/reactnativenavigation/presentation/OptionsPresenter.java

@@ -74,6 +74,7 @@ public class OptionsPresenter {
 
     private void applyTopTabsOptions(TopTabsOptions options) {
         topBar.applyTopTabsColors(options.selectedTabColor, options.unselectedTabColor);
+        topBar.applyTopTabsFontSize(options.fontSize);
     }
 
     private void applyTopTabOptions(TopTabOptions topTabOptions) {

lib/android/app/src/main/java/com/reactnativenavigation/views/TopBar.java

@@ -14,8 +14,9 @@ import android.view.ViewGroup;
 import android.widget.TextView;
 
 import com.reactnativenavigation.parse.Button;
+import com.reactnativenavigation.parse.Number;
 import com.reactnativenavigation.viewcontrollers.toptabs.TopTabsViewPager;
-import com.reactnativenavigation.views.style.Color;
+import com.reactnativenavigation.parse.Color;
 
 import java.util.ArrayList;
 
@@ -67,6 +68,10 @@ public class TopBar extends AppBarLayout {
         topTabs.applyTopTabsColors(selectedTabColor, unselectedTabColor);
     }
 
+    public void applyTopTabsFontSize(Number fontSize) {
+        topTabs.applyTopTabsFontSize(fontSize);
+    }
+
 	public void setButtons(ArrayList<Button> leftButtons, ArrayList<Button> rightButtons) {
 		setLeftButtons(leftButtons);
 		setRightButtons(rightButtons);

lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabs.java

@@ -4,7 +4,8 @@ import android.content.Context;
 import android.graphics.Typeface;
 import android.support.design.widget.TabLayout;
 
-import com.reactnativenavigation.views.style.Color;
+import com.reactnativenavigation.parse.Color;
+import com.reactnativenavigation.parse.Number;
 
 public class TopTabs extends TabLayout {
     private final TopTabsStyleHelper styleHelper;
@@ -29,4 +30,8 @@ public class TopTabs extends TabLayout {
     public void applyTopTabsColors(Color selectedTabColor, Color unselectedTabColor) {
         styleHelper.applyTopTabsColors(selectedTabColor, unselectedTabColor);
     }
+
+    public void applyTopTabsFontSize(Number fontSize) {
+        styleHelper.applyTopTabsFontSize(fontSize);
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/TopTabsStyleHelper.java

@@ -5,9 +5,10 @@ import android.graphics.Typeface;
 import android.view.ViewGroup;
 import android.widget.TextView;
 
+import com.reactnativenavigation.parse.Color;
+import com.reactnativenavigation.parse.Number;
 import com.reactnativenavigation.utils.Task;
 import com.reactnativenavigation.utils.ViewUtils;
-import com.reactnativenavigation.views.style.Color;
 
 class TopTabsStyleHelper {
     private TopTabs topTabs;
@@ -16,18 +17,25 @@ class TopTabsStyleHelper {
         this.topTabs = topTabs;
     }
 
+    void applyTopTabsFontSize(Number fontSize) {
+        if (!fontSize.hasValue()) return;
+        for (int i = 0; i < topTabs.getTabCount(); i++) {
+            applyOnTabTitle(i, (title) -> title.setTextSize(fontSize.get()));
+        }
+    }
+
     void applyTopTabsColors(Color selected, Color unselected) {
-        if (!selected.hasColor() && !unselected.hasColor()) return;
+        if (!selected.hasValue() && !unselected.hasValue()) return;
 
         ColorStateList originalColors = topTabs.getTabTextColors();
         int selectedTabColor = originalColors != null ? originalColors.getColorForState(topTabs.getSelectedTabColors(), -1) : -1;
         int tabTextColor = originalColors != null ? originalColors.getColorForState(topTabs.getDefaultTabColors(), -1) : -1;
 
-        if (selected.hasColor()) {
+        if (selected.hasValue()) {
             tabTextColor = selected.get();
         }
 
-        if (unselected.hasColor()) {
+        if (unselected.hasValue()) {
             selectedTabColor = unselected.get();
         }
 

lib/android/app/src/main/java/com/reactnativenavigation/views/style/Color.java

@@ -1,30 +0,0 @@
-package com.reactnativenavigation.views.style;
-
-import android.support.annotation.ColorInt;
-
-public class Color {
-
-    private Integer color;
-
-    public Color(@ColorInt int color) {
-        this.color = color;
-    }
-
-    public boolean hasColor() {
-        return color != null;
-    }
-
-    @ColorInt
-    public int get() {
-        if (hasColor()) {
-            return color;
-        }
-        throw new RuntimeException("Tried to get null color!");
-    }
-
-    @SuppressWarnings("MagicNumber")
-    @Override
-    public String toString() {
-        return String.format("#%06X", (0xFFFFFF & get()));
-    }
-}

lib/src/params/options/TopTabs.js

@@ -2,10 +2,12 @@ class TopTabs {
   /**
    * @property {string} [selectedTabColor] Selected tab color
    * @property {string} unselectedTabColor Unselected tab color
+   * @property {int} fontSize
    */
   constructor(topTabs) {
     this.selectedTabColor = topTabs.selectedTabColor;
     this.unselectedTabColor = topTabs.unselectedTabColor;
+    this.fontSize = topTabs.fontSize;
   }
 }
 

lib/src/params/options/TopTabs.test.js

@@ -2,7 +2,8 @@ const TopTabs = require('./TopTabs');
 
 const TOP_TABS = {
   selectedTabColor: 'red',
-  unselectedTabColor: 'blue'
+  unselectedTabColor: 'blue',
+  fontSize: 11
 };
 
 describe('TopTabs', () => {
@@ -10,5 +11,6 @@ describe('TopTabs', () => {
     const uut = new TopTabs(TOP_TABS);
     expect(uut.selectedTabColor).toEqual('red');
     expect(uut.unselectedTabColor).toEqual('blue');
+    expect(uut.fontSize).toEqual(11);
   });
 });

playground/src/containers/WelcomeScreen.js

@@ -203,7 +203,8 @@ class WelcomeScreen extends Component {
       navigationOptions: {
         topTabs: {
           selectedTabColor: '#12766b',
-          unselectedTabColor: 'red'
+          unselectedTabColor: 'red',
+          fontSize: 6
         }
       }
     });