react-native-waves v1.2.5

react-native-waves

Create beautiful wave animations using React Native

Requirements

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

Demo

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)

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