Implement TopBar border

Ability to set a flat border under the TopBar. `topBarElevationShadowEnabled` should be set to true if using this feature.

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

@@ -80,6 +80,8 @@ public class StyleParams {
     public Color contextualMenuBackgroundColor;
 
     public Color topBarColor;
+    public Color topBarBorderColor;
+    public float topBarBorderWidth;
     public String topBarReactView;
     public String topBarReactViewAlignment;
     public Bundle topBarReactViewInitialProps;

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

@@ -7,6 +7,7 @@ import com.reactnativenavigation.params.AppStyle;
 import com.reactnativenavigation.params.Orientation;
 import com.reactnativenavigation.params.StatusBarTextColorScheme;
 import com.reactnativenavigation.params.StyleParams;
+import com.reactnativenavigation.utils.ViewUtils;
 
 public class StyleParamsParser {
     private Bundle params;
@@ -49,6 +50,8 @@ public class StyleParamsParser {
         result.topBarElevationShadowEnabled = getBoolean("topBarElevationShadowEnabled", getDefaultTopBarElevationShadowEnabled());
         result.titleBarTitleColor = getColor("titleBarTitleColor", getDefaultTitleBarColor());
         result.topBarTranslucent = getBoolean("topBarTranslucent", getDefaultTopBarTranslucent());
+        result.topBarBorderColor = getColor("topBarBorderColor", getDefaultTopBarBorderColor());
+        result.topBarBorderWidth = Float.parseFloat(params.getString("topBarBorderWidth", getDefaultTopBarBorderWidth()));
 
         result.titleBarSubtitleColor = getColor("titleBarSubtitleColor", getDefaultSubtitleBarColor());
         result.titleBarButtonColor = getColor("titleBarButtonColor", getTitleBarButtonColor());
@@ -237,6 +240,14 @@ public class StyleParamsParser {
         return AppStyle.appStyle != null && AppStyle.appStyle.topBarTranslucent;
     }
 
+    private StyleParams.Color getDefaultTopBarBorderColor() {
+        return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.topBarBorderColor;
+    }
+
+    private String getDefaultTopBarBorderWidth() {
+        return String.valueOf(AppStyle.appStyle == null ? ViewUtils.convertDpToPixel(1) : AppStyle.appStyle.topBarBorderWidth);
+    }
+
     private boolean getDefaultTitleBarHideOnScroll() {
         return AppStyle.appStyle != null && AppStyle.appStyle.titleBarHideOnScroll;
     }

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

@@ -155,7 +155,9 @@ public class TopBar extends AppBarLayout {
     }
 
     public void setStyle(StyleParams styleParams) {
-        if (styleParams.topBarColor.hasColor()) {
+        if (styleParams.topBarBorderColor.hasColor()) {
+            setBackground(new TopBarBorder(styleParams));
+        } else if (styleParams.topBarColor.hasColor()) {
             setBackgroundColor(styleParams.topBarColor.getColor());
         }
         if (styleParams.topBarTransparent) {

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

@@ -0,0 +1,71 @@
+package com.reactnativenavigation.views;
+
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.Point;
+import android.graphics.drawable.ShapeDrawable;
+import android.graphics.drawable.shapes.RectShape;
+import android.graphics.drawable.shapes.Shape;
+
+import com.reactnativenavigation.params.StyleParams;
+
+class TopBarBorder extends ShapeDrawable {
+    private StyleParams.Color backgroundColor;
+    private final Paint pathPaint;
+    private Border border;
+
+    private class Border {
+        private Path path;
+        int width;
+        int height;
+
+        Border(int width, int height) {
+            this.width = width;
+            this.height = height;
+            path = createPath();
+        }
+
+        private Path createPath() {
+            Point a = new Point(0, height);
+            Point b = new Point(width, height);
+            Path path = new Path();
+            path.moveTo(a.x, a.y);
+            path.lineTo(b.x, b.y);
+            return path;
+        }
+
+        boolean dimensionsChanged(int width, int height) {
+            return this.width != width || this.height != height;
+        }
+    }
+
+    TopBarBorder(StyleParams styleParams) {
+        super(new RectShape());
+        backgroundColor = styleParams.topBarColor;
+        pathPaint = createPathPaint(styleParams.topBarBorderColor, styleParams.topBarBorderWidth);
+    }
+
+    private Paint createPathPaint(StyleParams.Color color, float strokeWidth) {
+        Paint res = new Paint();
+        res.setStyle(Paint.Style.STROKE);
+        res.setColor(color.getColor());
+        res.setStrokeWidth(strokeWidth);
+        return res;
+    }
+
+    @Override
+    protected void onDraw(Shape shape, Canvas canvas, Paint paint) {
+        super.onDraw(shape, canvas, paint);
+        createBorder(canvas);
+        paint.setColor(backgroundColor.getColor(Color.WHITE));
+        canvas.drawPath(border.path, pathPaint);
+    }
+
+    private void createBorder(Canvas canvas) {
+        if (border == null || border.dimensionsChanged(canvas.getWidth(), canvas.getHeight())) {
+            border = new Border(canvas.getWidth(), canvas.getHeight());
+        }
+    }
+}

docs/styling-the-navigator.md

@@ -90,6 +90,8 @@ this.props.navigator.setStyle({
   navBarTextFontBold: false, // Optional. Set the title to bold.
   navBarHeight: 70, // Optional, set the navBar height in pixels.
   topTabsHeight: 70, // Optional, set topTabs height in pixels.
+  topBarBorderColor: 'red', Optional, set a flat border under the TopBar.
+  topBarBorderWidth: 5.5, // Optional, set the width of the border.
 }
 ```
 

src/deprecated/platformSpecificDeprecated.android.js

@@ -148,6 +148,8 @@ function convertStyleParams(originalStyleObject) {
     topBarTranslucent: originalStyleObject.navBarTranslucent,
     topBarElevationShadowEnabled: originalStyleObject.topBarElevationShadowEnabled,
     topBarCollapseOnScroll: originalStyleObject.topBarCollapseOnScroll,
+    topBarBorderColor: processColor(originalStyleObject.topBarBorderColor),
+    topBarBorderWidth: originalStyleObject.topBarBorderWidth && `${originalStyleObject.topBarBorderWidth}`,
     collapsingToolBarImage: originalStyleObject.collapsingToolBarImage,
     collapsingToolBarComponent: originalStyleObject.collapsingToolBarComponent,
     collapsingToolBarComponentHeight: originalStyleObject.collapsingToolBarComponentHeight,
@@ -198,7 +200,7 @@ function convertStyleParams(originalStyleObject) {
     bottomTabFontFamily: originalStyleObject.tabFontFamily,
 
     navigationBarColor: processColor(originalStyleObject.navigationBarColor)
-  }
+  };
 
   if (originalStyleObject.collapsingToolBarImage) {
     if (_.isString(originalStyleObject.collapsingToolBarImage)) {