feat: add props borderWidth & borderColor

hoaphantn7604 · Jul 27, 2024 · fa3baea · fa3baea
1 parent 0259956
commit fa3baea
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,8 @@ Now we need to install [react-native-svg](https://github.com/react-native-svg/re
 | width              | Number                                                | No        | Customize width for container view                                |
 | height             | Number                                                | No        | Customize height for container view, Minimum is 50px and Maximum is 90px |
 | borderTopLeftRight | Boolean                                               | No        | Border radius top left and top right of container view            |
+| borderColor        | String                                                | No        | Border color                                                      |
+| borderWidth        | Number                                                | No        | Border width                                                      |
 | bgColor            | String                                                | No        | Background color of container view                                |
 
 

diff --git a/src/CurvedBottomBar/components/BottomBarView/index.tsx b/src/CurvedBottomBar/components/BottomBarView/index.tsx
@@ -38,6 +38,8 @@ const BottomBarComponent: (
       renderCircle,
       borderTopLeftRight = false,
       shadowStyle,
+      borderColor = 'gray',
+      borderWidth = 0,
     } = props;
 
     const [itemLeft, setItemLeft] = useState<any[]>([]);
@@ -263,6 +265,8 @@ const BottomBarComponent: (
               }
               bgColor={bgColor}
               path={d}
+              borderColor={borderColor}
+              borderWidth={borderWidth}
             />
             {_renderTabContainer(props)}
           </View>
@@ -278,6 +282,8 @@ const BottomBarComponent: (
         shadowStyle,
         style,
         type,
+        borderColor,
+        borderWidth,
       ]
     );
 

diff --git a/src/CurvedBottomBar/components/BottomBarView/model.ts b/src/CurvedBottomBar/components/BottomBarView/model.ts
@@ -42,6 +42,8 @@ interface Props {
   borderTopLeftRight?: boolean;
   circleWidth?: Range<50, 61>;
   bgColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
   initialRouteName: string;
   defaultScreenOptions?: unknown;
   renderCircle: ({

diff --git a/src/CurvedBottomBar/components/BottomBarViewExpo/model.ts b/src/CurvedBottomBar/components/BottomBarViewExpo/model.ts
@@ -42,6 +42,8 @@ interface Props {
   borderTopLeftRight?: boolean;
   circleWidth?: Range<50, 61>;
   bgColor?: string;
+  borderColor?: string;
+  borderWidth?: number;
   initialRouteName: string;
   defaultScreenOptions?: unknown;
   renderCircle: ({

diff --git a/src/CurvedBottomBar/components/CurvedView/curvedView.tsx b/src/CurvedBottomBar/components/CurvedView/curvedView.tsx
@@ -4,12 +4,18 @@ import { CurvedBottomBarView } from '../ShadowView';
 import { CurvedView } from './model';
 
 const CurvedContainer: CurvedView = (props) => {
-  const { style, width, height, bgColor, path } = props;
+  const { style, width, height, bgColor, path, borderColor, borderWidth } =
+    props;
+
+  const border =
+    borderWidth && borderWidth > 0
+      ? { stroke: borderColor, strokeWidth: borderWidth }
+      : {};
 
   return (
     <CurvedBottomBarView style={style}>
       <Svg width={width} height={height}>
-        <Path fill={bgColor} {...{ d: path }} />
+        <Path fill={bgColor} {...{ d: path }} {...border} />
       </Svg>
     </CurvedBottomBarView>
   );

diff --git a/src/CurvedBottomBar/components/CurvedView/curvedViewExpo.tsx b/src/CurvedBottomBar/components/CurvedView/curvedViewExpo.tsx
@@ -4,12 +4,18 @@ import { Path, Svg } from 'react-native-svg';
 import { CurvedView } from './model';
 
 const CurvedContainer: CurvedView = (props) => {
-  const { style, width, height, bgColor, path } = props;
+  const { style, width, height, bgColor, path, borderColor, borderWidth } =
+    props;
+
+  const border =
+    borderWidth && borderWidth > 0
+      ? { stroke: borderColor, strokeWidth: borderWidth }
+      : {};
 
   return (
     <View style={style}>
       <Svg width={width} height={height}>
-        <Path fill={bgColor} {...{ d: path }} />
+        <Path fill={bgColor} {...{ d: path }} {...border} />
       </Svg>
     </View>
   );

diff --git a/src/CurvedBottomBar/components/CurvedView/model.ts b/src/CurvedBottomBar/components/CurvedView/model.ts
@@ -7,6 +7,8 @@ interface ICurvedView {
   height: number;
   bgColor: string;
   path: any;
+  borderColor?: string;
+  borderWidth?: number;
 }
 
 export type CurvedView = React.FC<ICurvedView>;
diff --git a/src/CurvedBottomBar/utils/pathDown.ts b/src/CurvedBottomBar/utils/pathDown.ts
@@ -2,31 +2,63 @@ import * as shape from 'd3-shape';
 import { scale } from 'react-native-size-scaling';
 
 //** Path Line */
-const line = (width: number, height: number) => {
+const line = (width: number, height: number, centerWidth: number) => {
   const path = (shape as any)
     .line()
     .x((d: { x: any }) => d.x)
     .y((d: { y: any }) => d.y)([
-    { x: width / 2, y: 0 },
+    { x: width / 2 + scale(centerWidth), y: 0 },
     { x: width, y: 0 },
     { x: width, y: height },
     { x: 0, y: height },
     { x: 0, y: 0 },
-    { x: width / 2, y: 0 },
+    { x: width / 2 - scale(centerWidth), y: 0 },
+  ]);
+
+  return path;
+};
+
+//** Path Line Left*/
+const lineLeft = (width: number, height: number, centerWidth: number) => {
+  const path = (shape as any)
+    .line()
+    .x((d: { x: any }) => d.x)
+    .y((d: { y: any }) => d.y)([
+    { x: scale(centerWidth * 1.9) + scale(10), y: 0 },
+    { x: width, y: 0 },
+    { x: width, y: height },
+    { x: 0, y: height },
+    { x: 0, y: 0 },
+  ]);
+
+  return path;
+};
+
+//** Path Line Right*/
+const lineRight = (width: number, height: number, centerWidth: number) => {
+  const path = (shape as any)
+    .line()
+    .x((d: { x: any }) => d.x)
+    .y((d: { y: any }) => d.y)([
+    { x: width, y: 0 },
+    { x: width, y: height },
+    { x: 0, y: height },
+    { x: 0, y: 0 },
+    { x: width - scale(centerWidth * 1.9) - scale(10), y: 0 },
   ]);
 
   return path;
 };
 
 //** Path Line Border Left Right Down */
-const lineBorder = (width: number, height: number) => {
+const lineBorder = (width: number, height: number, centerWidth: number) => {
   const border = (shape as any)
     .line()
     .x((d: { x: any }) => d.x)
     .y((d: { y: any }) => d.y)
     .curve(shape.curveBasis)([
     // right
-    { x: width / 2, y: 0 },
+    { x: width / 2 + scale(centerWidth), y: 0 },
     { x: width - scale(20), y: 0 },
     { x: width - scale(10), y: scale(2) },
     { x: width - scale(2), y: scale(10) },
@@ -43,14 +75,18 @@ const lineBorder = (width: number, height: number) => {
     { x: 0 + scale(2), y: scale(10) },
     { x: 0 + scale(10), y: scale(2) },
     { x: 0 + scale(20), y: 0 },
-    { x: width / 2, y: 0 },
+    { x: width / 2 - scale(centerWidth), y: 0 },
   ]);
 
   return border;
 };
 
 //** Path Line Border Left Right Down */
-const lineBorderLeft = (width: number, height: number) => {
+const lineBorderRight = (
+  width: number,
+  height: number,
+  centerWidth: number
+) => {
   const border = (shape as any)
     .line()
     .x((d: { x: any }) => d.x)
@@ -70,21 +106,21 @@ const lineBorderLeft = (width: number, height: number) => {
     { x: 0 + scale(2), y: scale(10) },
     { x: 0 + scale(10), y: scale(2) },
     { x: 0 + scale(20), y: 0 },
-    { x: width / 2, y: 0 },
+    { x: width - scale(centerWidth * 1.9) - scale(10), y: 0 },
   ]);
 
   return border;
 };
 
 //** Path Line Border Left Right Down */
-const lineBorderRight = (width: number, height: number) => {
+const lineBorderLeft = (width: number, height: number, centerWidth: number) => {
   const border = (shape as any)
     .line()
     .x((d: { x: any }) => d.x)
     .y((d: { y: any }) => d.y)
     .curve(shape.curveBasis)([
     // right
-    { x: width / 2, y: 0 },
+    { x: scale(centerWidth * 1.9) + scale(10), y: 0 },
     { x: width - scale(20), y: 0 },
     { x: width - scale(10), y: scale(2) },
     { x: width - scale(2), y: scale(10) },
@@ -96,6 +132,7 @@ const lineBorderRight = (width: number, height: number) => {
     { x: 0, y: height },
     // left
     { x: 0, y: height },
+    { x: 0, y: height },
     { x: 0, y: 0 },
   ]);
 
@@ -144,46 +181,46 @@ export const getPathDown = (
   const circleWidth = scale(centerWidth) + scale(16);
 
   if (borderTopLeftRight && position === 'LEFT') {
-    return `${lineBorderRight(width, height)} ${lineCurved(
+    return `${lineBorderLeft(width, height, centerWidth)} ${lineCurved(
       circleWidth / 3,
       height,
       circleWidth
     )}`;
   }
 
   if (borderTopLeftRight && position === 'RIGHT') {
-    return `${lineBorderLeft(width, height)} ${lineCurved(
+    return `${lineBorderRight(width, height, centerWidth)} ${lineCurved(
       width - circleWidth * 1.33,
       height,
       circleWidth
     )}`;
   }
 
   if (borderTopLeftRight && position === 'CENTER') {
-    return `${lineBorder(width, height)} ${lineCurved(
+    return `${lineBorder(width, height, centerWidth)} ${lineCurved(
       width / 2 - circleWidth / 2,
       height,
       circleWidth
     )}`;
   }
 
   if (position === 'LEFT') {
-    return `${line(width, height)} ${lineCurved(
+    return `${lineLeft(width, height, centerWidth)} ${lineCurved(
       circleWidth / 3,
       height,
       circleWidth
     )}`;
   }
 
   if (position === 'RIGHT') {
-    return `${line(width, height)} ${lineCurved(
+    return `${lineRight(width, height, centerWidth)} ${lineCurved(
       width - circleWidth * 1.33,
       height,
       circleWidth
     )}`;
   }
 
-  return `${line(width, height)} ${lineCurved(
+  return `${line(width, height, centerWidth)} ${lineCurved(
     width / 2 - circleWidth / 2,
     height,
     circleWidth