Use arrow fn. syntax

Author: retyui

src/index.tsx

@@ -1,3 +1,4 @@
+import type { FC } from "react";
 import { useMemo } from "react";
 import { View } from "react-native";
 import type { ViewProps } from "react-native";
@@ -15,22 +16,21 @@ export interface LinearGradientProps extends ViewProps {
 
 type RequiredProps = Required<LinearGradientProps>;
 
-function getCssColors(
+const getCssColors = (
   colors: RequiredProps["colors"],
   locations: RequiredProps["locations"],
-) {
-  return colors
+) =>
+  colors
     .map((color, i) =>
       locations?.[i] != null ? `${color} ${locations[i] * 100}%` : color,
     )
     .join(",");
-}
 
-function getSvgColors(
+const getSvgColors = (
   colors: RequiredProps["colors"],
   locations: RequiredProps["locations"],
-) {
-  return colors
+) =>
+  colors
     .map((color, i) => {
       const offsetValue =
         locations?.[i] != null
@@ -42,40 +42,39 @@ function getSvgColors(
       return `<stop offset="${normalizedOffset * 100}%" stop-color="${color}" />`;
     })
     .join("");
-}
 
 const toPercent = (v: number): string => v * 100 + "%";
 
-export function getLinearGradientBackgroundImage(
+export const getLinearGradientBackgroundImage = (
   start: RequiredProps["start"],
   end: RequiredProps["end"],
   locations: RequiredProps["locations"],
   colors: RequiredProps["colors"],
   useAngle: LinearGradientProps["useAngle"],
   angle: RequiredProps["angle"],
-) {
+) => {
   if (useAngle) {
     return `linear-gradient(${angle}deg, ${getCssColors(colors, locations)})`;
   }
 
   const svgColors = getSvgColors(colors, locations);
   const svgGradient = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="${toPercent(start.x)}" y1="${toPercent(start.y)}" x2="${toPercent(end.x)}" y2="${toPercent(end.y)}">${svgColors}</linearGradient></defs><rect width="100%" height="100%" fill="url(#g)"/></svg>`;
   return `url("data:image/svg+xml,${encodeURIComponent(svgGradient)}")`;
-}
+};
 
 const emptyArray: [] = [];
 const defaultStart = { x: 0.5, y: 0 };
 const defaultEnd = { x: 0.5, y: 1 };
 
-function LinearGradientWeb({
+const LinearGradientWeb: FC<LinearGradientProps> = ({
   start = defaultStart,
   end = defaultEnd,
   locations = emptyArray,
   colors = emptyArray,
   useAngle,
   angle = 0,
   ...viewProps
-}: LinearGradientProps) {
+}) => {
   "use memo";
 
   const bgStyle = useMemo((): ViewProps["style"] => {
@@ -95,6 +94,8 @@ function LinearGradientWeb({
   }, [start, end, locations, colors, useAngle, angle]);
 
   return <View {...viewProps} style={[viewProps.style, bgStyle]} />;
-}
+};
+
+LinearGradientWeb.displayName = "LinearGradientWeb";
 
 export default LinearGradientWeb;