React Native Siri Wave View
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 |