Noctiflorous Pansy Mulch

    @adamtyler/react-native-scrub
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published

    React Native Scrub

    A React Native number scrubber using React Native Gesture Handler

    Install

    yarn add react-native-scrub react-native-gesture-handler
    
    cd ios
    pod install
    

    On Android, make sure to finish integrating react-native-gesture-handler, if you haven't already.

    How To Use

    onUpdate will return each scrub which should be used to update a display value.

    onChange will return when the user stops scrubbing. This can be used to update the display, and update the value passed into the component again. If you adjust the value another way the Scrubber will spring to the new value.

    min is the minimum value that is allowed

    max is the maximum value that is allowed

    step is how the scrubber should create the range from the min to the max.

    renderTick will be called with the current index, step value, and allow you to control how each tick is rendered. You can use the one provided or write your own.

    Demo

    import React, { useState } from 'react';
    import { SafeAreaView, View, Text } from 'react-native';
    import { Slider, Tick, CenterLine } from 'react-native-scrub';
    
    const App = () => {
      const [display, setDisplay] = useState(50);
      const [value, setValue] = useState(50);
    
      return (
        <SafeAreaView>
          <Text
            style={{
              paddingVertical: 20,
              fontSize: 40,
              fontWeight: 'bold',
              textAlign: 'center',
            }}
          >
            {display}
          </Text>
          <Slider
            min={10}
            max={100}
            step={1}
            value={value}
            onUpdate={v => {
              setDisplay(v);
            }}
            onChange={v => {
              setDisplay(v);
              setValue(v);
            }}
            renderTick={tick => <Tick key={tick.index} {...tick} />}
          >
            <CenterLine
              style={{
                backgroundColor: 'red',
              }}
            />
          </Slider>
        </SafeAreaView>
      );
    };
    
    export default App;

    Install

    npm i @adamtyler/react-native-scrub

    DownloadsWeekly Downloads

    5

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    70.3 kB

    Total Files

    13

    Last publish

    Collaborators

    • adamtyler