{"repo":"arunabhverma/expo-animated-dashed-border","free":true,"listed":false,"github":"https://github.com/arunabhverma/expo-animated-dashed-border","clone":"git clone https://github.com/arunabhverma/expo-animated-dashed-border.git","description":"RN component that creates a smooth animated dashed border around any content using Skia.","language":"TypeScript","stars":13,"topics":["animated-border","expo","react-native","reanimated","shopify","skia","svg","marching-dashed-border"],"license":null,"category":"mobile-apps","readme_excerpt":"Animated Dashed Border Component A React Native component that creates a smooth animated dashed border around any content using Skia. Features - ✅ Smooth continuous animation using Skia - ✅ Customizable stroke color - ✅ Adjustable dash length and gap - ✅ Configurable animation speed - ✅ Rounded corners support - ✅ Linear, looping animation - ✅ TypeScript support Installation Make sure you have @shopify/react-native-skia installed: Usage Props Prop Type Default Description ---------------- ----------------- ----------- ----------------------------------- strokeColor string \"#ffffff\" Color of the dashed border strokeWidth number 2 Width of the stroke dashLength number 10 Length of each dash gapLength number 5 Length of gap between dashes animationSpeed number 1000 Animation duration in milliseconds borderRadius number 8 Border radius for rounded corners children React.ReactNode - Content to wrap with the border style ViewStyle - Additional styles for the container How it works The component uses: - Skia Canvas : Provides the drawing surface - Skia Path : Creates the border shape with customizable border radius - dash property : Defines dash and gap lengths - dashOffset : Animated to create the moving effect - React Native Reanimated : For smooth 60fps animations The animation continuously loops by animating the dashOffset from 0 to the total length of dash + gap, creating the illusion of dashes moving around the border. Examples Fast Animation Thick Border Sharp Corners Very Ro","default_branch":null,"files":null,"tree":[],"storefront":"/r/arunabhverma","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/arunabhverma/expo-animated-dashed-border/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}