update

src/components/BorderGradient/BorderGradient.web.js

@@ -5,20 +5,20 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
   const defaultGradientProps = {
     start: {
       x: 0.5,
-      y: 0
+      y: 0,
     },
     end: {
       x: 0.5,
-      y: 1
+      y: 1,
     },
     locations: [],
     colors: [],
     useAngle: false,
-    angle: 0
+    angle: 0,
   };
 
   const { locations, end, start, useAngle, angle, onLayout, colors } =
-  gradientProps;
+    gradientProps;
 
   const {
     style,
@@ -31,7 +31,7 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
     borderTopWidth,
     borderLeftWidth,
     borderRightWidth,
-    borderBottomWidth
+    borderBottomWidth,
   } = props;
 
   const propStart = start ?? defaultGradientProps?.start;
@@ -39,13 +39,13 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
 
   const [state, setState] = useState({
     width: 1,
-    height: 1
+    height: 1,
   });
 
   const measure = (event) => {
     setState({
       width: event.nativeEvent.layout.width,
-      height: event.nativeEvent.layout.height
+      height: event.nativeEvent.layout.height,
     });
     if (onLayout) {
       onLayout(event);
@@ -59,62 +59,62 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
 
     // Math.atan2 handles Infinity
     const _angle =
-    Math.atan2(
-      state.width * (propEnd.y - propStart.y),
-      state.height * (propEnd.x - propStart.x)
-    ) +
-    Math.PI / 2;
+      Math.atan2(
+        state.width * (propEnd.y - propStart.y),
+        state.height * (propEnd.x - propStart.x)
+      ) +
+      Math.PI / 2;
     return _angle + "rad";
   };
 
   const getColors = () =>
-  colors.
-  map((color, index) => {
-    const location = locations?.[index] ?? defaultGradientProps.locations;
-    let locationStyle = "";
-    if (location) {
-      locationStyle = " " + location * 100 + "%";
-    }
-    return color + locationStyle;
-  }).
-  join(",");
+    colors
+      .map((color, index) => {
+        const location = locations?.[index] ?? defaultGradientProps.locations;
+        let locationStyle = "";
+        if (location) {
+          locationStyle = " " + location * 100 + "%";
+        }
+        return color + locationStyle;
+      })
+      .join(",");
 
   return (
     <View
       style={{
-        position: "relative"
-      }}>
-
+        position: "relative",
+      }}
+    >
       <View
         onLayout={measure}
         style={[
-        style,
-        {
-          borderWidth,
-          borderRadius,
-          borderTopLeftRadius,
-          borderTopRightRadius,
-          borderBottomLeftRadius,
-          borderBottomRightRadius,
-          borderTopWidth,
-          borderLeftWidth,
-          borderRightWidth,
-          borderBottomWidth,
-          borderStyle: "solid",
-          borderColor: "transparent",
-          // borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`,
-          background: `linear-gradient(${getAngle()},${getColors()}) border-box`,
-          WebkitMask:
-          "linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)",
-          WebkitMaskComposite: "xor",
-          maskComposite: "exclude",
-          overflow: "hidden"
-        }]
-        }>
-      </View>
+          style,
+          {
+            borderWidth,
+            borderRadius,
+            borderTopLeftRadius,
+            borderTopRightRadius,
+            borderBottomLeftRadius,
+            borderBottomRightRadius,
+            borderTopWidth,
+            borderLeftWidth,
+            borderRightWidth,
+            borderBottomWidth,
+            borderStyle: "solid",
+            borderColor: "transparent",
+            // borderImage: `linear-gradient(${getAngle()},${getColors()}) 1`,
+            background: `linear-gradient(${getAngle()},${getColors()}) border-box`,
+            WebkitMask:
+              "linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0)",
+            WebkitMaskComposite: "xor",
+            maskComposite: "exclude",
+            overflow: "hidden",
+          },
+        ]}
+      ></View>
       <View style={styles.innerContainer}>{children}</View>
-    </View>);
-
+    </View>
+  );
 };
 
 export default BorderGradient;
@@ -122,7 +122,6 @@ export default BorderGradient;
 const styles = StyleSheet.create({
   innerContainer: {
     flex: 1,
-    margin: 5, // <-- Border Width
     position: "absolute",
     top: 0,
     bottom: 0,
@@ -130,6 +129,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     right: 0,
     left: 0,
-    overflow: "hidden"
-  }
-});
+    overflow: "hidden",
+  },
+});