feat: fixes and formatter

src/components/BorderGradient/BorderGradient.js

@@ -1,13 +1,8 @@
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View } from 'react-native'
 
-import { GradientBorderView } from "../GradientBorderView";
+import { GradientBorderView } from '../GradientBorderView'
 
-const BorderGradient = ({
-  children,
-  contentContainerStyle,
-  gradientProps,
-  ...props
-}) => {
+const BorderGradient = ({ children, contentContainerStyle, gradientProps, ...props }) => {
   return (
     <GradientBorderView
       gradientProps={{
@@ -26,13 +21,13 @@ const BorderGradient = ({
         {children}
       </View>
     </GradientBorderView>
-  );
-};
+  )
+}
 
-export default BorderGradient;
+export default BorderGradient
 
 const styles = StyleSheet.create({
   innerContainer: {
     flex: 1,
   },
-});
+})

src/components/BorderGradient/BorderGradient.web.js

@@ -1,5 +1,5 @@
-import { StyleSheet, View } from "react-native";
-import { useState } from "react";
+import { StyleSheet, View } from 'react-native'
+import { useState } from 'react'
 
 const BorderGradient = ({ children, gradientProps, ...props }) => {
   const defaultGradientProps = {
@@ -15,10 +15,9 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
     colors: [],
     useAngle: false,
     angle: 0,
-  };
+  }
 
-  const { locations, end, start, useAngle, angle, onLayout, colors } =
-    gradientProps;
+  const { locations, end, start, useAngle, angle, onLayout, colors } = gradientProps
 
   const {
     style,
@@ -32,29 +31,29 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
     borderLeftWidth,
     borderRightWidth,
     borderBottomWidth,
-  } = props;
+  } = props
 
-  const propStart = start ?? defaultGradientProps?.start;
-  const propEnd = end ?? defaultGradientProps?.end;
+  const propStart = start ?? defaultGradientProps?.start
+  const propEnd = end ?? defaultGradientProps?.end
 
   const [state, setState] = useState({
     width: 1,
     height: 1,
-  });
+  })
 
   const measure = (event) => {
     setState({
       width: event.nativeEvent.layout.width,
       height: event.nativeEvent.layout.height,
-    });
+    })
     if (onLayout) {
-      onLayout(event);
+      onLayout(event)
     }
-  };
+  }
 
   const getAngle = () => {
     if (useAngle) {
-      return angle + "deg";
+      return angle + 'deg'
     }
 
     // Math.atan2 handles Infinity
@@ -63,26 +62,26 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
         state.width * (propEnd.y - propStart.y),
         state.height * (propEnd.x - propStart.x)
       ) +
-      Math.PI / 2;
-    return _angle + "rad";
-  };
+      Math.PI / 2
+    return _angle + 'rad'
+  }
 
   const getColors = () =>
     colors
       .map((color, index) => {
-        const location = locations?.[index] ?? defaultGradientProps.locations;
-        let locationStyle = "";
+        const location = locations?.[index] ?? defaultGradientProps.locations
+        let locationStyle = ''
         if (location) {
-          locationStyle = " " + location * 100 + "%";
+          locationStyle = ' ' + location * 100 + '%'
         }
-        return color + locationStyle;
+        return color + locationStyle
       })
-      .join(",");
+      .join(',')
 
   return (
     <View
       style={{
-        position: "relative",
+        position: 'relative',
       }}
     >
       <View
@@ -100,35 +99,34 @@ const BorderGradient = ({ children, gradientProps, ...props }) => {
             borderLeftWidth,
             borderRightWidth,
             borderBottomWidth,
-            borderStyle: "solid",
-            borderColor: "transparent",
+            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",
+            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>
-  );
-};
+  )
+}
 
-export default BorderGradient;
+export default BorderGradient
 
 const styles = StyleSheet.create({
   innerContainer: {
     flex: 1,
-    position: "absolute",
+    position: 'absolute',
     top: 0,
     bottom: 0,
-    alignItems: "center",
-    justifyContent: "center",
+    alignItems: 'center',
+    justifyContent: 'center',
     right: 0,
     left: 0,
-    overflow: "hidden",
+    overflow: 'hidden',
   },
-});
+})