@wowmaking/react-native-ios-scroll-picker
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

@wowmaking/react-native-ios-scroll-picker

React Native Scroll Picker like IOS UIDatePicker on iOS and Android.

npm version License: MIT

Installation

Open a Terminal in the project root and run:

yarn add @wowmaking/react-native-ios-scroll-picker

Or if you use npm:

npm i @wowmaking/react-native-ios-scroll-picker --save

Now we need to install: react-native-gesture-handler; react-native-reanimated; react-native-haptic-feedback;

Usage

import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Picker from '@wowmaking/react-native-ios-scroll-picker';

const start = 2000;
const years = new Array(new Date().getFullYear() - start + 1)
  .fill(0)
  .map((_, i) => {
    const value = start + i;
    return { value, label: value };
  })
  .reverse();

const App = () => {
  const defaultValue = 2010;
  const [currentValue, setCurrentValue] = useState(defaultValue);

  const handelPickerItemChange = (value) => {
    setCurrentValue(value);
  };

  return (
    <View style={styles.pickerContainer}>
      <Picker
        values={years} 
        containerWidth={120}
        defaultValue={defaultValue} 
        withTranslateZ={true}
        withOpacity={true}
        withScale={true}
        visibleItems={5}
        itemHeight={32}
        deviderStyle={styles.pickerDevider}
        labelStyle={styles.pickerItemLabel}
        onChange={handelPickerChange}
      />

      <Text>{currentValue}</Text>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  pickerContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  pickerDevider: {
    borderColor: 'rgba(0,0,0,0.1)',
    borderTopWidth: 1,
    borderBottomWidth: 1, 
  },
  pickerItemLabel: {
    color: '#000000',
    fontSize: 25,
  },
});

Props

name required default description
values yes Items Array
containerWidth yes Defines width of gesture container
visibleItems yes Defines how many items will be visible
itemHeight yes Item height
defaultValue no 0 Defines selected item by default
withTranslateZ no false Enable
withScale no false
withOpacity no false
deviderStyle no Styles for the Devider
labelStyle no Styles for label Items

Package Sidebar

Install

npm i @wowmaking/react-native-ios-scroll-picker

Weekly Downloads

31

Version

1.0.3

License

MIT

Unpacked Size

92.1 kB

Total Files

33

Last publish

Collaborators

  • mdvdop
  • kurtsergey
  • dmitrychystik
  • tillwecollapse
  • fearmear
  • g.volchetskiy