React native mahdi picker

A simple Wheel Picker

Example

You can clone the repo and run example from ./example folder

android Installation

npm install mahdi_wheel

ios installation

npm install mahdi_wheel npm install @react-native-community/picker

Usage

import {
  WheelPicker,
  TimePicker,
  DatePicker
} from "mahdi_wheel";
import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, Button } from "react-native";

const wheelPickerData = [
  "sunday",
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday"
];

class MyPicker extends Component {
  state = {
    selectedItem: 0
  };

  onItemSelected = selectedItem => {
    this.setState({ selectedItem });
  };

  onPress = () => {
    this.setState({ selectedItem: 3 });
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title={"Select third element"} onPress={this.onPress} />
        <Text>Selected position: {this.state.selectedItem}</Text>
        <WheelPicker
          selectedItem={this.state.selectedItem}
          data={wheelPickerData}
          onItemSelected={this.onItemSelected}
        />
      </View>
    );
  }
}

module.exports = MyPicker;

Props

| Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | onItemSelected | - | func | Returns selected position | | data | - | Array<string> | Data array | | isCyclic | false | bool | Make Wheel Picker cyclic | | selectedItemTextColor | black | string | Wheel Picker's selected Item text color | | selectedItemTextSize | 16 | number | Wheel Picker's selected Item text size | | selectedItemTextFontFamily | - | font-family | Wheel Picker's selected Item font | | itemTextColor | grey | string | Wheel Picker's Item Text Color | | itemTextSize | 16 | number | Wheel Picker's Item text size | | itemTextFontFamily | - | font-family | Wheel Picker's Item font | | selectedItem | 0 | number | Current item position | | initPosition | 0 | number | Initial item position | | indicatorColor | black | string | Indicator color | | hideIndicator | - | boolean | Hide indicator | | indicatorWidth | 1 | number | Indicator width | | backgroundColor | transparent | string | Wheel Picker background color | | disabled | undefind | bool | Disable picker selection |