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

1.1.2 • Public • Published

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

Fork of @wowmaking/react-native-ios-scroll-picker published to NPM so as not to wait for pull requests to be accepted

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 @wave909/react-native-ios-scroll-picker

Or if you use npm:

npm i @wave909/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 '@wave909/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} 
        defaultValue={defaultValue} 
        withTranslateZ={true}
        withOpacity={true}
        withScale={true}
        visibleItems={5}
        itemHeight={32}
        containerStyle={styles.containerStyle}
        dividerStyle={styles.pickerDivider}
        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',
  },
  containerStyle: {
    width: 120,
  },
  pickerDivider: {
    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
containerStyle no Styles for the outer container
dividerStyle no Styles for the Divider
labelStyle no Styles for label Items

Package Sidebar

Install

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

Weekly Downloads

10

Version

1.1.2

License

MIT

Unpacked Size

56.9 kB

Total Files

23

Last publish

Collaborators

  • vadkou
  • kiri_rin