expo-animated-dashed-border

KO | EN

gitlite — search

#javascript #python #hacktoberfest #go #android #machine-learning #docker #macos #nodejs #java #windows #kubernetes #pytorch #ios

expo-animated-dashed-border

(★ 13)

RN component that creates a smooth animated dashed border around any content using Skia.

expo-animated-dashed-border Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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:

```bash
npm install @shopify/react-native-skia
```

## Usage

```tsx
import AnimatedDashedBorder from "@/components/animated-dashed-border";

// Basic usage
<AnimatedDashedBorder>
  <Text>Your content here</Text>
</AnimatedDashedBorder>

// With custom properties
<AnimatedDashedBorder
  strokeColor="#00ff88"
  strokeWidth={3}
  dashLength={15}
  gapLength={8}
  animationSpeed={2000}
  borderRadius={16}
  style={{ padding: 20 }}
>
  <Text>Custom styled content</Text>
</AnimatedDashedBorder>
```

## 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

```tsx
<AnimatedDashedBorder
  strokeColor="#ff6b6b"
  animationSpeed={800}
  dashLength={8}
  gapLength={4}
>
  <Text>Fast moving dashes</Text>
</AnimatedDashedBorder>
```

### Thick Border

```tsx
<AnimatedDashedBorder
  strokeColor="#4ecdc4"
  strokeWidth={4}
  dashLength={20}
  gapLength={10}
>
  <Text>Thick dashed border</Text>
</AnimatedDashedBorder>
```

### Sharp Corners

```tsx
<AnimatedDashedBorder strokeColor="#f7b731" borderRadius={0}>
  <Text>Sharp cornered border</Text>
</AnimatedDashedBorder>
```

### Very Rounded

```tsx
<AnimatedDashedBorder strokeColor="#a55eea" borderRadius={30}>
  <Text>Very rounded border</Text>
</AnimatedDashedBorder>
```

expo-animated-dashed-border

expo-animated-dashed-border Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

expo-animated-dashed-border

expo-animated-dashed-border Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README