https://github.com/cubesugar/react-native-waveview

WaveView for React-Native
https://github.com/cubesugar/react-native-waveview

react-native svg wave waveview

Last synced: 4 days ago
JSON representation

WaveView for React-Native

• Host: GitHub
• URL: https://github.com/cubesugar/react-native-waveview
• Owner: CubeSugar
• License: mit
• Created: 2018-05-05T13:43:34.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-01-08T10:48:46.000Z (about 5 years ago)
• Last Synced: 2024-12-12T19:13:05.038Z (about 1 month ago)
• Topics: react-native, svg, wave, waveview
• Language: JavaScript
• Size: 349 KB
• Stars: 112
• Watchers: 4
• Forks: 23
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# WaveView for React-Native

![](https://img.shields.io/badge/license-MIT-000000.svg)

[![npm](https://img.shields.io/npm/dm/react-native-waveview.svg)](https://www.npmjs.com/package/react-native-waveview)

[![npm](https://img.shields.io/npm/v/react-native-waveview.svg)](https://www.npmjs.com/package/react-native-waveview)

![](https://img.shields.io/badge/platform-react--native-brightgreen.svg)

## SHOWCASE

![Ball](https://github.com/CubeSugar/react-native-waveview/blob/master/showcase/wave-ball.gif?raw=true)

![Rectangle](https://github.com/CubeSugar/react-native-waveview/blob/master/showcase/wave-rect.gif?raw=true)

## DEPENDENCIES

- [React-Native-Svg](https://github.com/react-native-community/react-native-svg)

## INSTALL

1. Install react-native-svg, use

    `npm install --save react-native-svg`  or

    `yarn add react-native-svg`

2. Link react-native-svg, check [here](https://github.com/react-native-community/react-native-svg) for help.

3. `npm install --save react-native-waveview` or `yarn add react-native-waveview`

## USAGE

#### Props

name        |   type   | desc

:-----------|:--------:|:----------------

H           |  number  | BaseLine height

animated    |  bool    | animation when mounted

waveParams  |  Array   | [{ A, T, fill}, ...]

easing      |  string  | name of easing from ReactNative#Easing

speed       |  number  | base duration in ms of one wave cycle

speedIncreasePerWave | number | increase in speed in ms per each wave

```

/**

  ---------+------------------------+

  <-- P -->|<--    T    -->|        |______

           |   /\          |   /\   |  ^

           |  /  \         |  /  \  |  A

           | /    \        | /    \ |  |

           |/      \       |/      \|__V___

           |        \      /        |  ^

           |         \    /         |  |

           |          \  /          |  |

           |           \/           |  H

           |                        |  |

           |        fill            |  |

  ---------+------------------------+__V___

*/

```

#### Methods

* setWaveParams(waveParams)

* setWaterHeight(H)

* startAnim

* stopAnim

#### Example

```JSX

    {

        // 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'},

        ]);

    }}>

    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}

    />

    

```

```

    

```

```

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',

    }

});

```