{"id":26460025,"url":"https://github.com/drchai/react-native-rheostat","last_synced_at":"2025-04-09T22:19:16.326Z","repository":{"id":32829919,"uuid":"143817974","full_name":"DrChai/react-native-rheostat","owner":"DrChai","description":"inspired by Airbnb's rheostat, a powerful slider with assorted data visualized charts","archived":false,"fork":false,"pushed_at":"2023-01-07T04:14:48.000Z","size":4769,"stargazers_count":119,"open_issues_count":21,"forks_count":20,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T22:19:12.316Z","etag":null,"topics":["react-components","react-native","slider","styled-components"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/DrChai.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-08-07T04:05:42.000Z","updated_at":"2025-03-08T05:02:05.000Z","dependencies_parsed_at":"2023-01-14T22:30:28.269Z","dependency_job_id":null,"html_url":"https://github.com/DrChai/react-native-rheostat","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrChai%2Freact-native-rheostat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrChai%2Freact-native-rheostat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrChai%2Freact-native-rheostat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DrChai%2Freact-native-rheostat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DrChai","download_url":"https://codeload.github.com/DrChai/react-native-rheostat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119441,"owners_count":21050773,"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-components","react-native","slider","styled-components"],"created_at":"2025-03-19T02:48:04.199Z","updated_at":"2025-04-09T22:19:16.303Z","avatar_url":"https://github.com/DrChai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-rheostat \n\ninspired by Airbnb's [rheostat](https://github.com/airbnb/rheostat), a powerful slider with assorted data visualized charts\n\n- [Features](#features)\n- [Dependencies](#dependencies)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Examples](#examples)\n- [Advances](#advances)\n\n### Features\n- Followed original repo [rheostat](https://github.com/airbnb/rheostat) to provide similar usage, \nincludes algorithm and custom React component overrides for handles and progress bar.\n- Pure Javascript but optimized with Animated API, reduced times of re-render and data pass over the bridge.\n- Provide HOC wrapper `withRheostat` to allow you fully customize.\n- Built with styled-components, easily add your theme and styles.\n### Dependencies\n\nThis library uses [react-native-svg](https://github.com/react-native-community/react-native-svg) and [react-native-svg-charts](https://raw.githubusercontent.com/JesperLekland/react-native-svg-charts)\nfor optional charts display. If you develop with native code,you need to run `react-native link react-native-svg` \nto link your native code, please see the Installation below\n### Installation\n`npm install --save react-native-rheostat`\n\nlink native code, with Expo or create-react-native-app, just skip this:\n\n`react-native link react-native-svg`\n\n### Usage\n\n#### classic slider\n**ranged slider with snap points**\n\n![](https://raw.githubusercontent.com/DrChai/react-native-rheostat/master/example/screenshots/twoHandles.gif)\n\n```javascript\nconst demoTwoValues = [20,50]\nconst demoSnaps = [0,20,30,40,50,60,70,80,100];\n\u003cRheostat values={demoTwoValues} min={0} max={100} \n          snap snapPoints={demoSnaps}/\u003e\n\n```\n**single handle slider**\n\n![](https://raw.githubusercontent.com/DrChai/react-native-rheostat/master/example/screenshots/singleHandle.gif)\n\n```javascript\nconst singleValues = [33];\n\u003cRheostat values={singleValues} min={0} max={100} /\u003e\n```\n#### x-like slider with areaChart or barChart\n**rheostat with areaChart**\n\n![](https://raw.githubusercontent.com/DrChai/react-native-rheostat/master/example/screenshots/areaChartTwoHandles.gif)\n```javascript\nconst areaSvgData = [ 50, 10, 40, 85, 85, 91, 35,  53, 24]\nconst demoTwoValues = [480, 1040]\n\u003cAreaRheostat values={values} min={0} max={1440} svgData={areaSvgData}/\u003e\n```\n**rheostat with barChart**\n\n![](https://raw.githubusercontent.com/DrChai/react-native-rheostat/master/example/screenshots/barChartTwoHandles.gif)\n```javascript\nconst demoTwoValues = [3, 9]\nconst barSvgData = [  50, 10, 40, 85, 85, 91, 35,  53, 24]\n\u003cBarRheostat values={values} min={0} max={1440} svgData={areaSvgData}/\u003e\n```\n#### full component and event listeners binding\n\n![](https://raw.githubusercontent.com/DrChai/react-native-rheostat/master/example/screenshots/fullExampleComp.gif)\n\n```javascript\nimport React, {Component} from 'react';\nimport {Text, View, ScrollView} from 'react-native';\nimport Moment from 'moment';\nimport Rheostat, {AreaRheostat, BarRheostat} from \"react-native-rheostat\";\n\nconst areaSvgData = [ 50, 10, 40, 85, 85, 91, 35,  53, 24,\n    50, 10, 40, 95, 85, 40,\n    24]\nconst defaultProps = {\n    snapPoints: [0,60,120,180,240,300,330,360,420,480,540,570,600,630,660,690,\n        720,750,780,810,840,870,900,930,960,990,1020,1050,1080,1110,1140,1170,1200,\n        1260,1320,1380,\n        1440],\n    values: [\n        480, 1040\n    ],\n    svgData: [ 50, 50, 10, 10, 40, 40, 95,95, 85, 85, 91, 35, 53, 53, 24, 50,\n        50, 10, 40, 95, 85, 91, 35, 53,  24, 50,\n        50, 10, 40, 95, 85, 91, 35, 53,  50, 50,\n        50, 10, 40, 95, 91, 91, 24, 24,  50, 50,\n        10, 10,  ]\n};\nexport default class RheostatExample extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            scrollEnabled: true,\n            timeRange:{\n                values: [10, 80]\n            }\n        }\n    }\n    onRheostatValUpdated = (payload) =\u003e {\n        this.setState({\n            timeRange: payload\n        })\n    }\n    onSliderDragStart = () =\u003e {\n        this.setState({scrollEnabled:false})\n    }\n    onSliderDragEnd = () =\u003e {\n        this.setState({scrollEnabled:true})\n    }\n    render() {\n        return (\n            \u003cScrollView contentContainerStyle={{paddingTop: 20, paddingHorizontal:15}} scrollEnabled={this.state.scrollEnabled}\u003e\n                    \u003cText style={{fontWeight:'800'}}\u003eExample\u003c/Text\u003e\n                    \u003cView style={{flex:1, paddingTop: 20, paddingBottom: 80}}\u003e\n                        \u003cText style={{marginTop: 15}}\u003e\n                                {Moment.utc().startOf('day').add(this.state.timeRange.values[0], 'minutes').format('hh:mm A')}\n                                -\n                                {Moment.utc().startOf('day').add(this.state.timeRange.values[1], 'minutes').format('hh:mm A')}\n                        \u003c/Text\u003e\n                        \u003cRheostat values={this.props.values} min={0} max={1440}\n                                  snapPoints={this.props.snapPoints}\n                                  snap={true}\n                                  onValuesUpdated={this.onRheostatValUpdated}\n                                  onSliderDragStart={this.onSliderDragStart}\n                                  onSliderDragEnd={this.onSliderDragEnd}\n\n                        /\u003e\n                        \u003cBarRheostat values={this.props.values} min={0} max={1440}\n                                     snap={true} snapPoints={this.props.snapPoints}\n                                     svgData = {this.props.svgData}\n                                     onValuesUpdated={this.onRheostatValUpdated}/\u003e\n                        \u003cAreaRheostat values={this.props.values} min={0} max={1440}\n                                      svgData = {areaSvgData}\n                        /\u003e\n                    \u003c/View\u003e\n                \u003c/ScrollView\u003e\n        )\n    }\n}\nRheostatExample.defaultProps = defaultProps;\n```\n#### change appearance with styled-components\nOption 1) You can wrap Rheostat by `ThemeProvider` from styled-component:\n```javascript\nimport { ThemeProvider } from 'styled-components/native';\nconst theme = {\n    rheostat: {\n        themeColor: 'blue',\n        grey: '#fafafa',\n    }\n    //... other theme objects\n};\n\u003cThemeProvider theme={theme}\u003e\n        \u003cBarRheostat\n            values={this.props.values}\n            min={0}\n            max={1440}\n            svgData={areaSvgData}\n        /\u003e\n\u003c/ThemeProvider\u003e\n```\nOption 2) Or just pass theme as a prop to Rheostat without import `ThemeProvider` from styled-component:\n```javascript\n  \u003cAreaRheostat values={this.props.values} min={0} max={1440}\n                theme={{ rheostat: { themeColor: 'black', grey: '#fafafa' } }}\n                svgData = {areaSvgData}\n  /\u003e\n```\n[**Recommended**] Option 3) As recommended by [Shared Component Libraries](https://github.com/styled-components/styled-components-experimentation/blob/master/component-libraries/shared-component-libraries.md), import the custom themeProvider\n`RheostatThemeProvider` for namespacing and avoid theme variables name clashes. \n![](https://raw.githubusercontent.com/DrChai/react-native-rheostat/master/example/screenshots/styledComp.gif)\n\n```javascript\nimport { AreaRheostat, BarRheostat, RheostatThemeProvider } from 'react-native-rheostat';\nconst theme = {\n    // No namespacing needed\n    themeColor: '#ffbd45',\n    grey: '#fafafa'\n    // ...\n}\n\n\u003cView\u003e\n        \u003cText style={{fontWeight:'800'}}\u003eExample with styled-component\u003c/Text\u003e\n        \u003cRheostatThemeProvider theme={theme}\u003e\n            \u003cView\u003e\n                \u003cBarRheostat values={this.props.values} min={0} max={1440}\n                             svgData = {areaSvgData}\n                /\u003e\n                \u003cAreaRheostat values={this.props.values} min={0} max={1440}\n                              theme={{ rheostat: { themeColor: '#8bc34a', grey: '#fafafa' } }}\n                              svgData = {areaSvgData}\n                /\u003e\n            \u003c/View\u003e\n        \u003c/RheostatThemeProvider\u003e\n\u003c/View\u003e\n```\n### Examples\n```\ncd example\nnpm i\nreact-native link react-native-svg  \nreact-native run-ios\n```\n\n### Advances\n\nYou can pass your own customized chart component to the `withRheostat` higher order component.\n```javascript\nimport { withRheostat } from 'react-native-rheostat';\nimport AreaChart from 'react-native-rheostat/src/charts/AreaChart'\nimport {\n    Defs, LinearGradient, Stop,\n} from 'react-native-svg';\n\nconst CustomAreaChart = (props) =\u003e (\u003cAreaChart chartColor='url(#gradient)' {...props} \u003e\n    \u003cDefs key='gredient-refs'\u003e\n        \u003cLinearGradient id=\"gradient\" x1=\"0%\" y=\"0%\" x2=\"0%\" y2=\"100%\"\u003e\n            \u003cStop offset=\"50%\" stopColor='green' stopOpacity={0.5} /\u003e\n            \u003cStop offset=\"100%\" stopColor='green' stopOpacity={1} /\u003e\n        \u003c/LinearGradient\u003e\n    \u003c/Defs\u003e\n\u003c/AreaChart\u003e)\nconst CustomAreaRheostat= withRheostat(CustomAreaChart)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrchai%2Freact-native-rheostat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrchai%2Freact-native-rheostat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrchai%2Freact-native-rheostat/lists"}