mahdi-wheel

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