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