Nighttime Peanut Migrations

    @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

    Install

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

    DownloadsWeekly Downloads

    10

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    92.1 kB

    Total Files

    33

    Last publish

    Collaborators

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