React Native Siri Wave View

React Native Bridge for iOS: stefanceriu/SCSiriWaveformView & Android: alexgomes09/SIRIWaveView. It reproduces the waveform effect seen in Siri on iOS 7.

Before we dive into on how to use this library. We would like to thank all the contributor of stefanceriu/SCSiriWaveformView & alexgomes09/SIRIWaveView for providing such a awesome nice, cool library

Getting started

  • $ npm install react-native-siri-wave-view --save

  • $ react-native link react-native-siri-wave-view

Android

Please add siriwaveview module in your app by adding below snippet in your app settings.gradle

include ':siriwaveview'
project(':siriwaveview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-siri-wave-view/android/SIRIWaveView/siriwaveview')

Usage


import RNSiriWaveView from 'react-native-siri-wave-view';

<RNSiriWaveView width={400} height={200} startAnimation={this.state.startAnimation} stopAnimation={this.state.stopAnimation} />

Props

Prop Type Default Note
width number 200 Width of Siri Wave View
height number 100 Height of Siri Wave View
numberOfWaves number 5 Number of waves you want in the view
backgroundColor string #FFFFFF Background Color of Siri Wave View
waveColor string #000000 Color of Siri Waves
primaryWaveLineWidth string iOS: 3, Android: 50 Width of primary wave
iOS: secondaryWaveLineWidth string 1 Width of secondary wave
frequency number 1.5 Frequency of Waves
idleAmplitude number 0.01 Idle Amplitude of Waves
amplitude number 0.01 Amplitude of Waves
iOS: density number 5 Density of Waves
iOS: phaseShift number -0.15 Width of secondary wave
startAnimation bool false To Start the wave animation
stopAnimation bool false To Stop the ongoing wave animation

GitHub