🎨 expo-ios-mesh-gradient

Beautiful iOS animated mesh gradient made with Expo

---

✨ Features

- 🎨 Beautiful animated mesh gradients
- 🌈 Smooth color transitions and customizable points
- 🍎 Native SwiftUI rendering on iOS
- ⚙️ Fully configurable animations
- 🎭 Optional masking, safe area ignoring, and more

---

🚀 Installation

$3

``bash
bunx expo install expo-ios-mesh-gradient
`

$3

`bash
cd ios && pod install
`

$3

`bash
bunx expo prebuild --platform ios
`

$3

`bash
bun ios
`

> ✅ iOS only — This module is built with SwiftUI and works exclusively on iOS.

---

📦 Usage

`tsx
import { AnimatedMeshGradient } from "expo-ios-mesh-gradient";

export default function App() {
return (
columns={3}
rows={3}
colors={["#ff6ec4", "#7873f5", "#4ADEDE"]}
smoothsColors
animated
animationSpeed={0.003}
style={{ flex: 1 }}
>
{/ Optional content goes here /}

);
}
`

---

⚙️ Props

| ⚙️ Prop | 🧾 Type | 🧮 Default | 📝 Description |
| --------------------- | ---------------------- | ----------- | ---------------------------------- |
| columns | number | 3 | Number of columns for the mesh |
| rows | number | 3 | Number of rows for the mesh |
| points | [number, number][] | undefined | Custom mesh point coordinates |
| colors | string[] | [] | Colors to render the gradient with |
| smoothsColors | boolean | false | Smooth out color transitions |
| ignoresSafeArea | boolean | false | Expand mesh into safe area |
| mask | boolean | false | Enable mask mode |
| animated | boolean | false | Enable animation |
| animationSpeed | number | 1 | Controls speed of animation |
| animationInterval | number | undefined | Interval between animations |
| noiseAmplitude | number | undefined | Amplitude of mesh point noise |
| frequencyModulation | number | undefined | Modulation frequency for animation |
| animationRanges | [number, number][] | undefined | Ranges for point animation |
| animationOffsets | number[] | undefined | Per-point animation offset |
| animationScales | number[] | undefined | Per-point animation scaling factor |
| style | StyleProp | undefined | Custom styles for the wrapper |
| children | React.ReactNode | undefined` | Optional child components |

---

📱 Platform Support

- ✅ iOS _(SwiftUI based)_
- ❌ Android _(not supported)_

---

🛠 Built With

- ⚛️ Expo
- 🍎 SwiftUI
- 📱 React Native

---

❤️ Contributing

Feel free to open issues, feature requests, or PRs.
All contributions are welcome!

---

📄 License

MIT © rit3zh