react-native-waves

Create beautiful wave animations using React Native

Requirements

• react-native-svg
• react-native-reanimated

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 | |

Run Example App ( Expo )

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