CircleLoader

Features

• Smooth circular motion with easing
• Customizable radius, ball size, and colors
• Built with performance in mind using Skia and Reanimated
• Fully self-contained and copy-paste ready

Dependencies

This component requires React Native Reanimated and Skia:

npx expo install react-native-reanimated @shopify/react-native-skia

Usage

This component is self-contained and can be used by simply copying the file.

Steps

1. Copy and paste the CircleLoader.tsx file into your project

2. Use it inside your component:

   export default function CircleLoaderExample() {
     const [play, setPlay] = useState(false)
   
     return (
       <View style={styles.container}>
         <Pressable onPress={()=> setPlay(p => !p)} style={{marginBottom: 32}}>
           <Text style={styles.playText}>
             {play ? "Reset" : "Play"}
           </Text>
         </Pressable>
         <CircleLoader
           radius={80}
           circleR={4}
           colors={["#EF5A57", "#F5AF00", "#4BAA4E","#EF5A57", "#F5AF00", "#4BAA4E"]}
           isPlaying={play}
         />
       </View>
     )
   }

Props

Made with love by niche.guys