Wave

Code demo

Basic wave pattern

import { Wave } from 'tuya-panel-kit';
// import Wave from 'tuya-panel-animation-wave';

<Wave />

Custom wave styles

import { Wave } from 'tuya-panel-kit';
// import Wave from 'tuya-panel-animation-wave';

<Wave
  style={{ width: 120, height: 120, borderRadius: 60 }}
  H={60}
  waveParams={[
    { A: 30, T: 120, fill: '#333' },
    { A: 20, T: 100, fill: '#666' },
  ]}
  animated={true}
/>

API

Wave

Name	Description	Type	Default
H	Water wave height (percentage)	number	`50`
waveParams	Wave array: [{ A: height of crest, T: length of single group of crest + trough, fill: fill color }]	{ A: number; T: number; fill: string; }[]	`[]`
style	Container style @types StyleProp	StyleProp	`{ justifyContent: 'center', alignItems: 'center' }`
animated	Whether to exercise immediately after mounting	boolean	`true`
animationConfig	Animation configuration items	{ easing?: (...args: any[]) => any; duration?: number; delay?: number; isInteraction?: boolean; useNativeDriver?: boolean; }	`{ easing: Easing.linear, duration: 5000, delay: 2000, isInteraction: true, useNativeDriver: true }`

Tuya Design

Wave

Code demo

Basic wave pattern

Custom wave styles

API

Wave