rn-animated-wave
v0.1.6
Published
Animated rings component for React Native
Downloads
26
Maintainers
Keywords
Readme
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