rn-animated-wave v0.1.6

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

RingsContainer Component

A wrapper to use if you wish to customize your individual rings

Ring Component

Animated ring component

License

MIT

Made with create-react-native-library