react-native-waves
Create beautiful wave animations using React Native
Requirements
Demo
2 waves - bottom | 2 waves - top/bottom | 4 waves - top/bottom |
---|---|---|
Installation
npm i react-native-waves
Usage
import Wave from "react-native-waves"
<Wave placement="bottom"/>
Examples
Complex Wave
<Wave placement="bottom" speed={20} maxPoints={8} delta={30}/>
Multiple Waves
<Wave placement="top" />
<Wave placement="top" gap={20} color="#003d66"/>
<Wave placement="bottom" />
<Wave placement="bottom" gap={20} color="#003d66"/>
Performance
- Simulator can run up to 4/6 waves at 60fps depending on the device.
- This project was optimized to achieve full performance on any physical device.
- UI updates are handled by react-native-reanimated to optimize rendering and achieve 60fps.
Props (Wave)
prop | type | value | description | more info |
---|---|---|---|---|
placement |
string | bottom | view position | top or bottom of the screen |
speed |
number | 7.5 | animation speed | |
maxPoints |
number | 2 | number of wave points | |
width |
number | screen width | wave width | |
height |
number | screen height / 4 | wave height | |
delta |
number | 60 | wave delta | wave bounce amount |
color |
string | #005c99 | wave color | |
gap |
number | undefined | wave gap | gap between waves with equal placement |
flip |
boolean | false | flip wave 180deg |
Expo )
Run Example App (Clone app
git clone https://github.com/NxRoot/react-native-waves.git
cd react-native-waves/example
IOS
npm run ios
Android
npm run android