Warning "Gradient contains only one stop" for Loader component

[geertvansoest]

In the error logs, via Logcat in Android Studio, we saw lots of warnings (multiple times per millisecond!) saying "Gradient contains only one stop" when opening the stories modal:

2025-10-10 14:09:48.539 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.539 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.539 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.540 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.540 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.540 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.567 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.567 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.568 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.568 26332-26332 unknown:ReactNative           W  Gradient contains only one stop
2025-10-10 14:09:48.568 26332-26332 unknown:ReactNative           W  Gradient contains only one stop

This is triggered by the Loader component that is visible when the stories modal is opened but the image/video is still loading. The (default) colors for this component are defined in LOADER_COLORS, which is an array with only one color: https://github.com/birdwingo/react-native-instagram-stories/blob/main/src/core/constants/index.ts#L8

The same warning is triggered by the spinner around avatars of "seen" stories, which uses the same Loader component with only one color (as defined in SEEN_LOADER_COLORS).

For now, I fixed this by creating a simple patch that always adds at least two Stop components into LinearGradient:

diff --git a/node_modules/@birdwingo/react-native-instagram-stories/src/components/Loader/index.tsx b/node_modules/@birdwingo/react-native-instagram-stories/src/components/Loader/index.tsx
index 64148ff..5e4da53 100644
--- a/node_modules/@birdwingo/react-native-instagram-stories/src/components/Loader/index.tsx
+++ b/node_modules/@birdwingo/react-native-instagram-stories/src/components/Loader/index.tsx
@@ -88,11 +88,18 @@ const Loader: FC<StoryLoaderProps> = ( {
   return (
     <AnimatedSvg width={size} height={size} style={animatedStyles}>
       <Defs>
-        <LinearGradient id={LOADER_ID} x1="0%" y1="0%" x2="100%" y2="0%">
-          {colors?.map( ( item, i ) => (
-            <Stop key={item} offset={i / colors.length} stopColor={item} />
-          ) )}
-        </LinearGradient>
+        {colors && colors.length > 1 ? (
+          <LinearGradient id={LOADER_ID} x1="0%" y1="0%" x2="100%" y2="0%">
+            {colors.map((item, i) => (
+              <Stop key={item} offset={i / colors.length} stopColor={item} />
+            ))}
+          </LinearGradient>
+        ) : (
+          <LinearGradient id={LOADER_ID} x1="0%" y1="0%" x2="100%" y2="0%">
+            <Stop key={0} offset={0} stopColor={colors?.[0]} />
+            <Stop key={1} offset={1} stopColor={colors?.[0]} />
+          </LinearGradient>
+        )}
       </Defs>
       <AnimatedCircle
         cx={size / 2}