Description:
expo-ios-mesh-gradient is a library for React Native and Expo that creates animated mesh gradients.
It uses Apple’s native SwiftUI for rendering, which results in fluid animations and high-quality visual output directly on iOS devices.
Features
- 🎨 Renders animated, multi-color mesh gradients.
- 🍎 Leverages native SwiftUI for rendering on iOS, ensuring smooth performance.
- ⚙️ Provides extensive configuration options for animation speed, color blending, and mesh density.
- 🎭 Supports optional masking to apply the gradient effect to child components.
- 📱 Allows the gradient to extend into the safe area for immersive, full-screen designs.
Use Cases
- App Backgrounds: Create subtle, slowly shifting color backgrounds for an entire application.
- Onboarding Screens: Develop engaging welcome screens that capture user attention.
- Component Styling: Use masked gradients to fill text, icons, or other UI elements with an animated texture.
- Loading Indicators: Display a dynamic gradient animation as a visually pleasing loading state.
- Interactive Feedback: Change gradient colors or animation intensity in response to user input.
How to Use It
1. Add the package to your Expo project. Open your terminal and run the following command.
npx expo install expo-ios-mesh-gradient2. Navigate to the ios directory and install the necessary CocoaPods dependencies.
cd ios && pod installIf you have not created a native build for your project before, you will need to prebuild it.
npx expo prebuild --platform ios3. Run your application on an iOS simulator or physical device to see the changes.
pnpm ios4. To implement the gradient, import the AnimatedMeshGradient component and place it in your app. The component requires an array of colors and will fill the space of its container.
import { AnimatedMeshGradient } from "expo-ios-mesh-gradient";
import { View } from "react-native";
export default function GradientScreen() {
return (
<View style={{ flex: 1 }}>
<AnimatedMeshGradient
colors={["#E2B2FF", "#9F7CFD", "#4ADEDE"]}
columns={4}
rows={4}
animated={true}
animationSpeed={0.004}
style={{ flex: 1 }}
/>
</View>
);
}5. All available component props.
columns: Sets the number of columns in the mesh grid.rows: Sets the number of rows in the mesh grid.points: Defines custom coordinates for each point in the mesh grid.colors: An array of color strings that the gradient will use.smoothsColors: A boolean that enables smoother, cubic interpolation between gradient colors.ignoresSafeArea: A boolean that, if true, allows the gradient to fill the entire screen, including safe areas.mask: A boolean that enables mask mode, applying the gradient to any child components.animated: A boolean that turns the gradient animation on or off.animationSpeed: A number that adjusts the speed of the animation.animationInterval: Defines the time interval between animation cycles.noiseAmplitude: Controls the amplitude of the noise applied to the mesh points for more random movement.frequencyModulation: Sets the modulation frequency for the animation.animationRanges: Specifies the animation ranges for individual points.animationOffsets: An array of numbers to offset the animation for each point.animationScales: An array of numbers that scales the animation for each point.style: Accepts custom style objects to apply to the component’s container.children: Allows you to pass child components that can be rendered on top of or masked by the gradient.
FAQs
Q: Is expo-ios-mesh-gradient compatible with Android?
A: No, this library is built exclusively for iOS. It depends on SwiftUI for rendering, which is an Apple-specific technology and not available on Android.
Q: Can I create a static, non-animated gradient with this library?
A: Yes, you can display a static mesh gradient by setting the animated prop to false.
Q: How does this library impact app performance?
A: The library uses native SwiftUI, which is efficient. However, complex grids with many points and fast animations can increase resource usage. It is advisable to test performance on various devices.
