Skip to content

muecke36/react-native-ios-scroll-picker

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%