Animated rings component for React Native
Made by DannyGlade
Screen.Recording.2024-08-23.at.3.20.47.PM.mov
please install
react-native-reanimatedto use this package.
npm install react-native-reanimatedOR
if using expo
npx expo install react-native-reanimatednpm install rn-animated-wave// 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>
);
}// 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>
);
}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 | -- |
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 | -- |
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 | -- |
MIT
Made with create-react-native-library