v--custom-scrollable-picker

Customize scrollable picker library

Usage no npm install needed!

<script type="module">
  import vCustomScrollablePicker from 'https://cdn.skypack.dev/v--custom-scrollable-picker';
</script>

README

v--calendar-react-native

Build Status

This is a library that allows you to customize a scrollable picker Use on both android and ios

Install

npm install v--custom-scrollable-picker --save

Usage

  import VScrollPicker from 'v--custom-scrollable-picker';
  


  <VScrollPicker
          activeStyle={{
            color: 'red',
            fontSize: 30,
            fontWeight: 'bold',
          }}
          notActiveStyle={{
            color: 'black',
            fontSize: 20,
            fontWeight: 'bold',
          }}
          onValueChange={(value, index) => {
             console.log(value + '-' + index);
          }}
          data={[1, 2, 3, 4, 5, 6, 7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
          height={700}
          itemShowNumber={10}
      selectedIndex={3}
      styleLine = {{backgroundColor:"blue", height:5}}
        />
  • Props Example:
  • activeStyle: Customize the selected item style.
  • notActiveStyle: Custom item style is not selected.
  • onValueChange: Returns index and value.
  • data: A list of data.
  • height: The height of the picker.
  • itemShowNumber: The number of items to display in the picker.
  • styleLine: Customize twos line

alt text Create by: Vuong Nguyen - 2019