rn-animated-wave
Animated rings component for React Native
Made by DannyGlade
Demo
https://github.com/user-attachments/assets/642adbb9-2c81-4434-ad70-c7e26dccb043
Installation
please install react-native-reanimated to use this package.
npm install react-native-reanimated
OR
if using expo
npx expo install react-native-reanimated
npm install rn-animated-wave
Ready to use component
// add import
import WavyRings from 'rn-animated-wave';
export default function App() {
return (
<View>
{/* Use Component */}
<WavyRings
rings={7}
width={200}
height={200}
delay={500}
isRunning={true}
>
{/*children*/}
</WavyRings>
</View>
);
}
Customize your waves
// Container to contain the rings
import { RingsContainer, Ring } from 'rn-animated-wave';
export default function App() {
return (
<View>
{/* Use Container */}
<RingsContainer width={100} height={100}>
{/* Use and style individual Rings */}
<Ring delay={0} width={100} height={100} isRunning={true} />
<Ring delay={500} width={100} height={100} isRunning={true} />
{/* Content to show inside Box/Circle */}
<View
style={{
position: 'absolute',
zIndex: 2,
}}
>
<Text>Box</Text>
</View>
</RingsContainer>
</View>
);
}
WavyRings Component
Premade ready to use rings component
| Props | Description | Required | Default |
|---|
| rings | number of rings to display | yes | -- |
| width | width of the visible Box/Circle | yes | -- |
| height | height of the visible Box/Circle | no | width |
| delay | delay in miliseconds between each ring's animation | yes | -- |
| isRunning | boolean to toggle animation | yes | -- |
| ringsStyle | stylesheet object to style every ring | no | -- |
| containerStyle | stylesheet object to style the parent wrapper | no | -- |
| boxStyle | stylesheet object to style the visible shape | no | -- |
| childrenContainerStyle | stylesheet object to style children wrapper | no | -- |
RingsContainer Component
A wrapper to use if you wish to customize your individual rings
| Props | Description | Required | Default |
|---|
| width | width of the visible Box/Circle | yes | -- |
| height | height of the visible Box/Circle | no | width |
| containerStyle | stylesheet object to style the parent wrapper | no | -- |
| boxStyle | stylesheet object to style the visible shape | no | -- |
Ring Component
Animated ring component
| Props | Description | Required | Default |
|---|
| delay | delay in miliseconds between each ring's animation | yes | -- |
| width | width of the visible Box/Circle | yes | -- |
| height | height of the visible Box/Circle | no | width |
| isRunning | boolean to toggle animation | yes | -- |
| style | stylesheet object to style the ring | no | -- |
License
MIT
Made with create-react-native-library
