ReadMe

[MohamadFazuan]

Can you show full example code to apply this library? Im so confuse with the object waveRect.

[alexaragao]

@MohamadFazuan He is using class components. I suppose the full example would be:

import React from 'react';
import {
  SafeAreaView, StyleSheet, TouchableHighlight, View
} from 'react-native';
import Wave from 'react-native-waveview';


class App extends React.Component {
  constructor(props) {
    super(props);

    this._waveRect = null;
  }

  render() {
    return (
      <SafeAreaView>
        <View style={_styles.container}>
          <TouchableHighlight
            onPress={() => {
              // Stop Animation
              this._waveRect && this._waveRect.stopAnim();

              // set water baseline height
              this._waveRect && this._waveRect.setWaterHeight(70);

              // reset wave effect
              this._waveRect &&
                this._waveRect.setWaveParams([
                  { A: 10, T: 180, fill: '#FF9F2E' },
                  { A: 15, T: 140, fill: '#F08200' },
                  { A: 20, T: 100, fill: '#B36100' },
                ]);
            }}
          >
            <Wave
              ref={ref => (this._waveRect = ref)}
              style={_styles.wave}
              H={30}
              waveParams={[
                { A: 10, T: 180, fill: '#62c2ff' },
                { A: 15, T: 140, fill: '#0087dc' },
                { A: 20, T: 100, fill: '#1aa7ff' },
              ]}
              animated={true}
            />
          </TouchableHighlight>
        </View>
      </SafeAreaView>
    );
  }
}

const _styles = StyleSheet.create({
  container: {
    flex: 1,
    marginVertical: 10,
    marginHorizontal: 20,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: StyleSheet.hairlineWidth,
  },
  wave: {
    width: 100,
    aspectRatio: 1,
    overflow: 'hidden',
    backgroundColor: 'white',
  },
  waveBall: {
    width: 100,
    aspectRatio: 1,
    borderRadius: 50,
    overflow: 'hidden',
  },
});

export default App;

You can create a blank project with npx react-native init and use this code in your App.js.