Support subtitle FontFamily on size on Android (#2036)

* Support subtitle FontFamily on size on Android

Font family can be either a .ttf/.otf asset or one of the default font families:

* sans-serif (regular)
* sans-serif-light
* sans-serif-condensed
* sans-serif-thin
* sans-serif-medium

* update docs

android/app/src/main/java/com/reactnativenavigation/params/StyleParams.java

@@ -52,8 +52,10 @@ public class StyleParams {
 
     public static class Font {
         private Typeface typeface;
+        String fontFamilyName;
 
         public Font(String font) {
+            fontFamilyName = font;
             typeface = new TypefaceLoader(font).getTypeFace();
         }
 
@@ -61,7 +63,7 @@ public class StyleParams {
         }
 
         public boolean hasFont() {
-            return typeface != null;
+            return typeface != null && fontFamilyName != null;
         }
 
         public Typeface get() {
@@ -70,6 +72,11 @@ public class StyleParams {
             }
             return typeface;
         }
+
+        @Override
+        public String toString() {
+            return fontFamilyName;
+        }
     }
 
     public Orientation orientation;
@@ -98,6 +105,8 @@ public class StyleParams {
     public boolean topBarTranslucent;
     public Color titleBarTitleColor;
     public Color titleBarSubtitleColor;
+    public int titleBarSubtitleFontSize;
+    public Font titleBarSubtitleFontFamily;
     public Color titleBarButtonColor;
     public Color titleBarDisabledButtonColor;
     public Font titleBarTitleFont;

android/app/src/main/java/com/reactnativenavigation/params/parsers/StyleParamsParser.java

@@ -55,6 +55,8 @@ public class StyleParamsParser {
         result.topBarBorderWidth = Float.parseFloat(params.getString("topBarBorderWidth", getDefaultTopBarBorderWidth()));
 
         result.titleBarSubtitleColor = getColor("titleBarSubtitleColor", getDefaultSubtitleBarColor());
+        result.titleBarSubtitleFontSize = getInt("titleBarSubtitleFontSize", getDefaultSubtitleTextFontSize());
+        result.titleBarSubtitleFontFamily = getFont("titleBarSubtitleFontFamily", getDefaultSubtitleFontFamily());
         result.titleBarButtonColor = getColor("titleBarButtonColor", getTitleBarButtonColor());
         result.titleBarDisabledButtonColor = getColor("titleBarDisabledButtonColor", getTitleBarDisabledButtonColor());
         result.titleBarTitleFont = getFont("titleBarTitleFontFamily", getDefaultTitleTextFontFamily());
@@ -282,6 +284,14 @@ public class StyleParamsParser {
         return AppStyle.appStyle == null ? -1 : AppStyle.appStyle.titleBarTitleFontSize;
     }
 
+    private int getDefaultSubtitleTextFontSize() {
+        return AppStyle.appStyle == null ? -1 : AppStyle.appStyle.titleBarSubtitleFontSize;
+    }
+
+    private StyleParams.Font getDefaultSubtitleFontFamily() {
+        return AppStyle.appStyle == null ? new StyleParams.Font() : AppStyle.appStyle.titleBarSubtitleFontFamily;
+    }
+
     private boolean getDefaultTitleTextFontBold() {
         return AppStyle.appStyle != null && AppStyle.appStyle.titleBarTitleFontBold;
     }

android/app/src/main/java/com/reactnativenavigation/screens/Screen.java

@@ -135,7 +135,7 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
             topBar.setReactView(screenParams.styleParams);
         } else {
             topBar.setTitle(screenParams.title, styleParams);
-            topBar.setSubtitle(screenParams.subtitle);
+            topBar.setSubtitle(screenParams.subtitle, styleParams);
         }
     }
 
@@ -243,7 +243,7 @@ public abstract class Screen extends RelativeLayout implements Subscriber {
     }
 
     public void setTitleBarSubtitle(String subtitle) {
-        topBar.setSubtitle(subtitle);
+        topBar.setSubtitle(subtitle, styleParams);
     }
 
     public void setTitleBarRightButtons(String navigatorEventId, List<TitleBarButtonParams> titleBarButtons) {

android/app/src/main/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -113,7 +113,7 @@ public class ViewUtils {
     public static <T> T findChildByClass(ViewGroup root, Class clazz, Matcher<T> matcher) {
         for (int i = 0; i < root.getChildCount(); i++) {
             View view = root.getChildAt(i);
-            if (clazz.isAssignableFrom(view.getClass())) {
+            if (clazz.isAssignableFrom(view.getClass()) && (matcher == null || matcher.match((T) view))) {
                 return (T) view;
             }
 

android/app/src/main/java/com/reactnativenavigation/views/TitleBar.java

@@ -9,6 +9,7 @@ import android.graphics.Typeface;
 import android.support.annotation.Nullable;
 import android.support.v7.widget.ActionMenuView;
 import android.support.v7.widget.Toolbar;
+import android.text.TextUtils;
 import android.view.Menu;
 import android.view.View;
 import android.view.animation.AccelerateDecelerateInterpolator;
@@ -79,6 +80,8 @@ public class TitleBar extends Toolbar {
         setTitleTextFontSize(params);
         setTitleTextFontWeight(params);
         setSubtitleTextColor(params);
+        setSubtitleFontSize(params);
+        setSubtitleFont(params);
         colorOverflowButton(params);
         setBackground(params);
         centerTitle(params);
@@ -90,9 +93,32 @@ public class TitleBar extends Toolbar {
 
     public void setTitle(String title, StyleParams styleParams) {
         setTitle(title);
+        setTitleTextFont(styleParams);
         centerTitle(styleParams);
     }
 
+    public void setSubtitle(CharSequence subtitle, StyleParams styleParams) {
+        super.setSubtitle(subtitle);
+        setSubtitleFontSize(styleParams);
+        setSubtitleFont(styleParams);
+    }
+
+    private void setSubtitleFontSize(StyleParams params) {
+        TextView subtitleView = getSubtitleView();
+        if (subtitleView != null && params.titleBarSubtitleFontSize > 0) {
+            subtitleView.setTextSize(params.titleBarSubtitleFontSize);
+        }
+    }
+
+    private void setSubtitleFont(StyleParams params) {
+        if (params.titleBarSubtitleFontFamily.hasFont()) {
+            TextView subtitleView = getSubtitleView();
+            if (subtitleView != null) {
+                subtitleView.setTypeface(params.titleBarSubtitleFontFamily.get());
+            }
+        }
+    }
+
     private void centerTitle(final StyleParams params) {
         final View titleView = getTitleView();
         if (titleView == null) {
@@ -280,6 +306,17 @@ public class TitleBar extends Toolbar {
         });
     }
 
+    @Nullable
+    private TextView getSubtitleView() {
+        if (TextUtils.isEmpty(getSubtitle())) return null;
+        return ViewUtils.findChildByClass(this, TextView.class, new ViewUtils.Matcher<TextView>() {
+            @Override
+            public boolean match(TextView child) {
+                return child.getText().equals(getSubtitle());
+            }
+        });
+    }
+
     public void setButtonColor(StyleParams.Color titleBarButtonColor) {
         if (!titleBarButtonColor.hasColor()) {
             return;

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

@@ -93,8 +93,8 @@ public class TopBar extends AppBarLayout {
         titleBar.setTitle(title, styleParams);
     }
 
-    public void setSubtitle(String subtitle) {
-        titleBar.setSubtitle(subtitle);
+    public void setSubtitle(String subtitle, StyleParams styleParams) {
+        titleBar.setSubtitle(subtitle, styleParams);
     }
 
     public void setReactView(@NonNull StyleParams styleParams) {

docs/styling-the-navigator.md

@@ -68,7 +68,8 @@ this.props.navigator.setStyle({
   statusBarHidden: false, // make the status bar hidden regardless of nav bar state
   statusBarTextColorScheme: 'dark', // text color of status bar, 'dark' / 'light' (remembered across pushes)
   navBarSubtitleColor: 'red', // subtitle color
-  navBarSubtitleFontFamily: 'font-name', // subtitle font
+  navBarSubtitleFontFamily: 'font-name', // subtitle font, 'sans-serif-thin' for example
+  navBarSubtitleFontSize: 13, // subtitle font size
   screenBackgroundColor: 'white', // Default screen color, visible before the actual react view is rendered
   orientation: 'portrait' // Sets a specific orientation to a modal and all screens pushed to it. Default: 'auto'. Supported values: 'auto', 'landscape', 'portrait'
   disabledButtonColor: '#ff0000' // chnaged the navigation bar button text color when disabled.

src/deprecated/platformSpecificDeprecated.android.js

@@ -162,6 +162,8 @@ function convertStyleParams(originalStyleObject) {
     titleBarHideOnScroll: originalStyleObject.navBarHideOnScroll,
     titleBarTitleColor: processColor(originalStyleObject.navBarTextColor),
     titleBarSubtitleColor: processColor(originalStyleObject.navBarSubtitleColor),
+    titleBarSubtitleFontSize: originalStyleObject.navBarSubtitleFontSize,
+    titleBarSubtitleFontFamily: originalStyleObject.navBarSubtitleFontFamily,
     titleBarButtonColor: processColor(originalStyleObject.navBarButtonColor),
     titleBarDisabledButtonColor: processColor(originalStyleObject.titleBarDisabledButtonColor),
     titleBarTitleFontFamily: originalStyleObject.navBarTextFontFamily,