feat: Get rid of react-native-skeleton-content

– required to upgrade Expo to 49 and to fix issues with react-reanimated being outdated – reduces bundle size
Bonfida · Nov 14, 2023 · 919bf28 · 919bf28
1 parent fe6968f
commit 919bf28
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 95 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,7 +73,6 @@
     "react-native-reanimated": "2.14.4",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "3.20.0",
-    "react-native-skeleton-content": "1.0.28",
     "react-native-svg": "13.4.0",
     "react-native-web": "0.18.12",
     "recoil": "*",
@@ -99,8 +98,7 @@
     "xnft": "latest"
   },
   "overrides": {
-    "react-error-overlay": "6.0.11",
-    "react-native-reanimated": "2.14.4"
+    "react-error-overlay": "6.0.11"
   },
   "volta": {
     "node": "20.9.0"

diff --git a/src/components/DomainRowRecord.tsx b/src/components/DomainRowRecord.tsx
@@ -3,7 +3,7 @@ import { Text, View, TouchableOpacity, Image } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { Feather } from "@expo/vector-icons";
 import { useProfilePic } from "@bonfida/sns-react";
-import SkeletonContent from "react-native-skeleton-content";
+import { Skeleton } from "@src/components/Skeleton";
 import { LinearGradient } from "expo-linear-gradient";
 
 import { useSolanaConnection } from "@src/hooks/xnft-hooks";
@@ -45,8 +45,8 @@ export const DomainRowRecord = ({
 
   return (
     <View style={tw`flex flex-row items-center gap-4`}>
-      <SkeletonContent
-        containerStyle={tw`w-[40px] h-[40px]`}
+      <Skeleton
+        style={tw`w-[40px] h-[40px] rounded-full`}
         isLoading={picRecord.loading}
       >
         <>
@@ -65,7 +65,7 @@ export const DomainRowRecord = ({
             </LinearGradient>
           )}
         </>
-      </SkeletonContent>
+      </Skeleton>
 
       <Text style={tw`mr-auto`} numberOfLines={1}>
         {abbreviate(`${domain}.sol`, isSubdomain ? 25 : 20, 3)}

diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
@@ -0,0 +1,68 @@
+import tw from "@src/utils/tailwind";
+import React, { useRef, useEffect, useState, ReactNode } from "react";
+import { Animated, type LayoutChangeEvent, View, Easing } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+
+const AnimatedGradient = Animated.createAnimatedComponent(LinearGradient);
+
+interface SkeletonProps {
+  style?: ReturnType<typeof tw>;
+  bgColor?: string;
+  isLoading?: boolean;
+  children?: ReactNode;
+}
+
+export const Skeleton = ({
+  style,
+  bgColor = "#e1e9ee",
+  isLoading = false,
+  children,
+}: SkeletonProps = {}) => {
+  const translateX = useRef(new Animated.Value(-1)).current;
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(translateX, {
+          toValue: 1,
+          duration: 1200,
+          useNativeDriver: false,
+          easing: Easing.ease,
+        }),
+      ])
+    ).start();
+  }, [translateX]);
+
+  const translateXStyle = {
+    transform: [
+      {
+        translateX: translateX.interpolate({
+          inputRange: [-1, 1],
+          outputRange: [-width * 2, width * 2],
+        }),
+      },
+    ],
+  };
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width: newWidth } = event.nativeEvent.layout;
+    setWidth(newWidth);
+  };
+
+  return isLoading ? (
+    <View
+      style={[style, tw`overflow-hidden bg-[${bgColor}]`]}
+      onLayout={onLayout}
+    >
+      <AnimatedGradient
+        colors={[bgColor, "#F2F8FC", bgColor]}
+        start={{ x: 0, y: 0 }}
+        end={{ x: 1, y: 0 }}
+        style={[translateXStyle, tw`w-full h-full`]}
+      />
+    </View>
+  ) : (
+    <>{children}</>
+  );
+};
diff --git a/src/providers/SolanaProvider.tsx b/src/providers/SolanaProvider.tsx
@@ -4,7 +4,7 @@ import {
   WalletProvider,
 } from "@solana/wallet-adapter-react";
 import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
-import { isXnft, isWeb } from "@src/utils/platform";
+import { isWeb } from "@src/utils/platform";
 import { URL } from "@src/utils/rpc";
 
 require("@solana/wallet-adapter-react-ui/styles.css");

diff --git a/src/screens/Profile/LoadingState.tsx b/src/screens/Profile/LoadingState.tsx
@@ -1,28 +1,28 @@
-import { View } from "react-native";
-import SkeletonContent from "react-native-skeleton-content";
-
+import { View, Platform } from "react-native";
+import { Skeleton } from "@src/components/Skeleton";
 import tw from "@src/utils/tailwind";
 
 export const LoadingState = () => {
   return (
-    <View style={tw`flex items-start w-full h-full px-3 py-5 mt-4`}>
-      <View style={tw`relative w-full h-[140px] mb-20`}>
-        <SkeletonContent isLoading>
-          <View
-            style={tw`w-[100px] h-[100px] mb-2 rounded-full absolute top-[-25px]`}
-          />
-        </SkeletonContent>
-        <SkeletonContent isLoading>
-          <View style={tw`h-[140px] w-full rounded-lg`} />
-        </SkeletonContent>
+    <View
+      style={[
+        tw`flex items-start w-full h-full px-3 mt-5`,
+        Platform.OS === "web" && tw`mt-0`,
+      ]}
+    >
+      <View style={tw`w-full h-[180px] mb-10`}>
+        <Skeleton
+          style={tw`w-[100px] h-[100px] mb-2 rounded-full m-auto -mb-[40px]`}
+          isLoading
+        />
+        <Skeleton style={tw`h-[140px] w-full rounded-lg`} isLoading />
       </View>
-      <View style={tw`w-full h-[240px]`}>
-        <SkeletonContent isLoading>
-          <View style={tw`w-full h-[50px] my-1`} />
-          <View style={tw`w-full h-[50px] my-1`} />
-          <View style={tw`w-full h-[50px] my-1`} />
-          <View style={tw`w-full h-[50px] my-1`} />
-        </SkeletonContent>
+
+      <View style={tw`w-full`}>
+        <Skeleton style={tw`w-full h-[50px] my-1`} isLoading />
+        <Skeleton style={tw`w-full h-[50px] my-1`} isLoading />
+        <Skeleton style={tw`w-full h-[50px] my-1`} isLoading />
+        <Skeleton style={tw`w-full h-[50px] my-1`} isLoading />
       </View>
     </View>
   );

diff --git a/src/screens/SearchResult.tsx b/src/screens/SearchResult.tsx
@@ -1,6 +1,6 @@
 import { View, FlatList, ScrollView } from "react-native";
 import { useEffect, useState } from "react";
-import SkeletonContent from "react-native-skeleton-content";
+import { Skeleton } from "@src/components/Skeleton";
 import { useModal } from "react-native-modalfy";
 import { t } from "@lingui/macro";
 import { useIsFocused, useNavigation } from "@react-navigation/native";
@@ -137,12 +137,12 @@ export const SearchResult = ({
 };
 
 const RenderSkeleton = () => (
-  <SkeletonContent isLoading>
-    <View style={tw`w-full h-[56px] my-1 rounded-lg`} />
-    <View style={tw`w-full h-[56px] my-1 rounded-lg`} />
-    <View style={tw`w-full h-[56px] my-1 rounded-lg`} />
-    <View style={tw`w-full h-[56px] my-1 rounded-lg`} />
-    <View style={tw`w-full h-[56px] my-1 rounded-lg`} />
-    <View style={tw`w-full h-[56px] my-1 rounded-lg`} />
-  </SkeletonContent>
+  <View>
+    <Skeleton isLoading style={tw`w-full h-[56px] my-1 rounded-lg`} />
+    <Skeleton isLoading style={tw`w-full h-[56px] my-1 rounded-lg`} />
+    <Skeleton isLoading style={tw`w-full h-[56px] my-1 rounded-lg`} />
+    <Skeleton isLoading style={tw`w-full h-[56px] my-1 rounded-lg`} />
+    <Skeleton isLoading style={tw`w-full h-[56px] my-1 rounded-lg`} />
+    <Skeleton isLoading style={tw`w-full h-[56px] my-1 rounded-lg`} />
+  </View>
 );