{"id":24118945,"url":"https://github.com/cubesugar/react-native-waveview","last_synced_at":"2025-09-18T09:31:00.858Z","repository":{"id":53867138,"uuid":"132251550","full_name":"CubeSugar/react-native-waveview","owner":"CubeSugar","description":"WaveView for React-Native","archived":false,"fork":false,"pushed_at":"2020-01-08T10:48:46.000Z","size":357,"stargazers_count":112,"open_issues_count":8,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-12-12T19:13:05.038Z","etag":null,"topics":["react-native","svg","wave","waveview"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CubeSugar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-05T13:43:34.000Z","updated_at":"2024-08-07T08:54:17.000Z","dependencies_parsed_at":"2022-08-24T09:11:22.614Z","dependency_job_id":null,"html_url":"https://github.com/CubeSugar/react-native-waveview","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CubeSugar%2Freact-native-waveview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CubeSugar%2Freact-native-waveview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CubeSugar%2Freact-native-waveview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CubeSugar%2Freact-native-waveview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CubeSugar","download_url":"https://codeload.github.com/CubeSugar/react-native-waveview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233465478,"owners_count":18680441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-native","svg","wave","waveview"],"created_at":"2025-01-11T09:37:52.209Z","updated_at":"2025-09-18T09:30:55.568Z","avatar_url":"https://github.com/CubeSugar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WaveView for React-Native\n\n![](https://img.shields.io/badge/license-MIT-000000.svg)\n[![npm](https://img.shields.io/npm/dm/react-native-waveview.svg)](https://www.npmjs.com/package/react-native-waveview)\n[![npm](https://img.shields.io/npm/v/react-native-waveview.svg)](https://www.npmjs.com/package/react-native-waveview)\n![](https://img.shields.io/badge/platform-react--native-brightgreen.svg)\n\n## SHOWCASE\n\n![Ball](https://github.com/CubeSugar/react-native-waveview/blob/master/showcase/wave-ball.gif?raw=true)\n\n![Rectangle](https://github.com/CubeSugar/react-native-waveview/blob/master/showcase/wave-rect.gif?raw=true)\n\n## DEPENDENCIES\n\n- [React-Native-Svg](https://github.com/react-native-community/react-native-svg)\n\n## INSTALL\n\n1. Install react-native-svg, use\n\n    `npm install --save react-native-svg`  or\n\n    `yarn add react-native-svg`\n\n2. Link react-native-svg, check [here](https://github.com/react-native-community/react-native-svg) for help.\n\n3. `npm install --save react-native-waveview` or `yarn add react-native-waveview`\n\n## USAGE\n\n#### Props\n\nname        |   type   | desc\n:-----------|:--------:|:----------------\nH           |  number  | BaseLine height\nanimated    |  bool    | animation when mounted\nwaveParams  |  Array   | [{ A, T, fill}, ...]\neasing      |  string  | name of easing from ReactNative#Easing\nspeed       |  number  | base duration in ms of one wave cycle\nspeedIncreasePerWave | number | increase in speed in ms per each wave\n\n```\n/**\n  ---------+------------------------+\n  \u003c-- P --\u003e|\u003c--    T    --\u003e|        |______\n           |   /\\          |   /\\   |  ^\n           |  /  \\         |  /  \\  |  A\n           | /    \\        | /    \\ |  |\n           |/      \\       |/      \\|__V___\n           |        \\      /        |  ^\n           |         \\    /         |  |\n           |          \\  /          |  |\n           |           \\/           |  H\n           |                        |  |\n           |        fill            |  |\n  ---------+------------------------+__V___\n*/\n```\n\n#### Methods\n\n* setWaveParams(waveParams)\n\n* setWaterHeight(H)\n\n* startAnim\n\n* stopAnim\n\n#### Example\n\n```JSX\n\u003cView style={_styles.container} \u003e\n    \u003cTouchableHighlight onPress={()=\u003e{\n        // Stop Animation\n        this._waveRect \u0026\u0026 this._waveRect.stopAnim();\n\n        // set water baseline height\n        this._waveRect \u0026\u0026 this._waveRect.setWaterHeight(70);\n\n        // reset wave effect\n        this._waveRect \u0026\u0026 this._waveRect.setWaveParams([\n            {A: 10, T: 180, fill: '#FF9F2E'},\n            {A: 15, T: 140, fill: '#F08200'},\n            {A: 20, T: 100, fill: '#B36100'},\n        ]);\n    }}\u003e\n    \u003cWave\n        ref={ref=\u003ethis._waveRect = ref}\n        style={_styles.wave}\n        H={30}\n        waveParams={[\n            {A: 10, T: 180, fill: '#62c2ff'},\n            {A: 15, T: 140, fill: '#0087dc'},\n            {A: 20, T: 100, fill: '#1aa7ff'},\n        ]}\n        animated={true}\n    /\u003e\n    \u003c/TouchableHighlight\u003e\n\u003c/View\u003e\n```\n\n```\n\u003cView style={_styles.container} \u003e\n    \u003cWave\n        style={_styles.waveBall}\n        H={70}\n        waveParams={[\n            {A: 10, T: 180, fill: '#62c2ff'},\n            {A: 15, T: 140, fill: '#0087dc'},\n            {A: 20, T: 100, fill: '#1aa7ff'},\n        ]}\n        animated={true}\n    /\u003e\n\u003c/View\u003e\n```\n\n```\nconst _styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        marginVertical: 10,\n        marginHorizontal: 20,\n        justifyContent: 'center',\n        alignItems: 'center',\n        borderWidth: StyleSheet.hairlineWidth,\n    },\n    wave: {\n        width: 100,\n        aspectRatio: 1,\n        overflow: 'hidden',\n        backgroundColor: 'white',\n    },\n    waveBall: {\n        width: 100,\n        aspectRatio: 1,\n        borderRadius: 50,\n        overflow: 'hidden',\n    }\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcubesugar%2Freact-native-waveview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcubesugar%2Freact-native-waveview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcubesugar%2Freact-native-waveview/lists"}