cubesugar / react-native-waveview Goto Github PK

View Code? Open in Web Editor NEW

111.0 4.0 23.0 357 KB

WaveView for React-Native

License: MIT License

JavaScript 100.00%

react-native wave waveview svg

react-native-waveview's Introduction

WaveView for React-Native

SHOWCASE

DEPENDENCIES

React-Native-Svg

INSTALL

Install react-native-svg, use

npm install --save react-native-svg or

yarn add react-native-svg
Link react-native-svg, check here for help.
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

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

<View style={_styles.container} >
    <Wave
        style={_styles.waveBall}
        H={70}
        waveParams={[
            {A: 10, T: 180, fill: '#62c2ff'},
            {A: 15, T: 140, fill: '#0087dc'},
            {A: 20, T: 100, fill: '#1aa7ff'},
        ]}
        animated={true}
    />
</View>

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',
    }
});

react-native-waveview's People

Contributors

Stargazers

Watchers

react-native-waveview's Issues

Change Wave Direction?

Hello,

I would like to know if it is possible to change the wave's movement direction?

Left to Right instead of Right to left

Thank you

ReadMe

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

Poor performance while changing water heigh

I noticed very poor rendering performance with setWaterHeight while rendered. On the simulator it updates smoothly, however on the actual device it's not smooth at all.

When param H changed the wave height not changed

It's good only if I call setWaterHeightfunction in ref callback.

                    <Wave ref={(wave) => wave && wave.setWaterHeight(150 * score / scoreTotal)}
                        style={{ width: 150, aspectRatio: 1, overflow: 'hidden', backgroundColor: '#FEB25780', borderRadius: 75 }}
                        H={150 * score / scoreTotal} animated={true} waveParams={[
                            { A: 10, T: 180, fill: '#FEB25780' },
                            { A: 10, T: 180, fill: '#FEB25780' },
                            { A: 10, T: 180, fill: '#FEB25780' },
                        ]}
                    />

v2.0.0 PLAN

🎨 Redesign component - ✅
- ⚡️ Wave
- ✨ WaveBackground
- ✨ Tide
🏷 Written in typescript - ✅
📝 Document / API Ref
💡 Example

How to add a label in the middle of the wave?

Hi there, I'm new to react native, what I want to do in my project is I would like to make the button with a background of water wave, is there any suggestion to make it? Or is there any way to add a label in the middle of the water wave?

Wave display is cut when display the movement on a full phone screen width (tested on iphone 7plus)

Hello,

When displaying the wave on a full screen (tested on iphone 7plus) It seems that the continuation of the wave image is cut, interrupted.

Could you please advise?

Thank you

cubesugar / react-native-waveview Goto Github PK

react-native-waveview's Introduction

WaveView for React-Native

SHOWCASE

DEPENDENCIES

INSTALL

USAGE

Props

Methods

Example

react-native-waveview's People

Contributors

Stargazers

Watchers

Forkers

react-native-waveview's Issues

v2.0.0 PLAN

Recommend Projects

Recommend Topics

Recommend Org