cero-studio / reactnativewheelpicker Goto Github PK

Whenever I launch the demo app with wheelpicker or any picker component, the app gets crashed. Logcat showing java.lang.ArithmeticException: divide by zero .

Any workaround available then please let me know via comment :)

I have list to show on picker and I want to select lets say third item programatically. So it should show third item default as selected when I open the picker. But it is not happening right now.

How can I apply style to the select item indicator?

When the component mounts, instead of 70 it renders 23.

    render() {
        let arr = Array.from({ length: 100 }, (v, i) => i);
        return (
            <WheelPicker
                onItemSelected={(event) => { console.log(event) }}
                isCurved
                isCyclic
                data={arr}
                selectedItemPosition={70}
                style={{ width: 300, height: 300 }} />
        );
    }

I have to update the component manually when it mounts.

class Teste extends Component {

    constructor() {
        super()
        this.state = {
            selectedItemPosition: 0
        }
    }

    componentDidMount() {
        this.setState({ selectedItemPosition: 70 })
    }

    render() {
        let arr = Array.from({ length: 100 }, (v, i) => i);
        return (
            <WheelPicker
                onItemSelected={(event) => { console.log(event) }}
                isCurved
                isCyclic
                data={arr}
                selectedItemPosition={this.state.selectedItemPosition}
                style={{ width: 300, height: 300 }} />
        );
    }
}

WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
It will be removed at the end of 2018. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html

WARNING: The specified Android SDK Build Tools version (23.0.3) is ignored, as it is below the minimum supported version (27.0.3) for Android Gradle Plugin 3.1.4.
Android SDK Build Tools 27.0.3 will be used.
To suppress this warning, remove "buildToolsVersion '23.0.3'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools.

I really need to use just the Time Picker but i need to remove the PM at least, i can give 24 hours to the array but how do I remove the PM AM? or just a option to have format24 = {true}

I have an implementation as follow:

<WheelPicker onItemSelected={ (event)=> this.setState({ minute: event.data }) } />

This gives me an error 'undefined is not a function'.

Any fix? I am new React Native so I may be missing my basics, any help is appreciated!

Displays the date incorrect when changing the time

how do i change color it items and set background to timepicker

In Timepicker the AM and PM is not Displaying Correctly...it display only when remote debugging is on..

please help me regards

When I try to use DatePicker, I get the following error:
Invariant Violation: View config not found for name WheelPicker

When I try to use WheelPicker, I get the following error:
Invariant Violation: Native component for "WheelPicker" does not exist

I have already linked react-native-wheel-picker-android (shouldn't this be in the docs?)

Hello,
Is there any way to disable the wheel for past time selection? For my case I want to allow user to select current or future time for the current day or next day but to avoid him to select previous time by disabling the time picker for previous time like we are doing for the day which is started from today only. Can we do this type of functionality or is there any workaround?

Thanks

When I access the component that contains WheelPicker I get this error message: Invariant violation: requireNativeComponent: "WheelPicker" was not found in the UIManager

Thanks for this module. When I try the TimePicker or the DatePicker, on my RN 0.47.2 Android app it shows up as three red boxes with no wheels, though.

When I tried to build an Apk. ReactNativeWheelPicker Lib gives this error message.

error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.

I try to resolve it. But I couldn't find out a solution.
Thank you.

Wheel Picker not being rendered on CRNA using Expo
I tried the example, It keeps giving the warning
Native component for "WheelPicker" does not exist
and nothing renders.

The link command does not work when being used with react native navigation package.

I get the following error:

C:\Users\X\app\android\app\src\main\java\com\eapp\MainApplication.java:6: error: package com.wheelpicker does not exist
import com.wheelpicker.WheelPickerPackage;

My MainApplication looks like this:

import com.facebook.react.ReactApplication;
import com.wheelpicker.WheelPickerPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.BV.LinearGradient.LinearGradientPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

import com.reactnativenavigation.NavigationApplication;

public class MainApplication extends NavigationApplication {

  @Override
  public boolean isDebug() {
    // Make sure you are using BuildConfig from your own application
    return BuildConfig.DEBUG;
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {

    // Add additional packages you require here
    return Arrays.<ReactPackage>asList(
            // eg. new VectorIconsPackage()
            new VectorIconsPackage(),
            new WheelPickerPackage(),
            new LinearGradientPackage()
    );

    // No need to add RnnPackage and MainReactPackage
    // Simply return null if you do not have additional packages:
    // return null;
  }
}

The only changes the link command did were in the settings.gradle, but nothing in build.gradle.

include ':react-native-wheel-picker-android'
project(':react-native-wheel-picker-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel-picker-android/android')

What are the additional manual steps needed to link the package?

Is there a possibility to change a value of wheel dinamically? For example, there are two wheelpickers and they are depended one from another. I want to change a value of the first one when the value of second one changes. Changing of selectedItemPosition value doesnt calls rerender of the wheelpicker. Thank you.

I get this blank square with a red border around the component instead of the picker. I did the npm install and linked it multiple times and still no dice. Am I supposed to install the component from the link you have provided first?

wheel item not show

The start date prop should take both time and date into consideration and act as a minDate. Also, it would be awesome if we could add a max date.

Thanks!

is there any way to disable time in datepicker? i want to show only date like month-day-year, without year. is it possible? is there any workaround?

Is this strictly android? can this work with iOS as well? Trying to find an all in one solution

on RTL layout the TimePicker is reversed.

there is an issue with using wrong proptypes http://prntscr.com/idqf4t

facebook/react-native#16542
it will crash app in prod if use RN >= 0.49.5

android/app/build.gradle里面需加入下面一行
dependencies {
compile project(':react-native-wheel-picker-android')
}

After integrating this, lead to crashing app while opening . Why?

There is now Year option in the DatePicker please can you add this option because, some time we need to use it as birthday date picker. thanks

I used above property , But i didn't get the 24 hr Format in picker in android. And when i was change the time in physical device not set the 24 hr format.

 <DatePicker
                  initDate={new Date().toISOString()}
                  is24Hour = {true}
                  onDateSelected={(date)=> this.onHandleDatePicked(date)}/>

in Picker inside not show 24 hrs Format

When the Time Picker is rendered I see 3 white squares

I need to pick a date and display the picked date in Text Component ...how can i do this?

When picker scrolls through the options at the top edge of the component each option that was scrollem over leaves a residue. A part of itself as if some small part of the picker was not cleared and was rendered cumulative

How do I test the calendar with Appium? I tried passing the accessibilityId to the component but it does not recognise it.

Will it be possible in the next release?
Thanks

Assigning minutes (for example 60 [0-59]), when setting the time using initDate={now.toISOString()}, will set time to the wrong position. If time is 8:40, it will set the minutes to the 8th position (Because 40/5 = 8, default minutes are in increments of 5).
8:50 will set minutes to the 10th position and so on.

Not sure if this is a bug or if I am setting up minutes incorrectly.

Doing something like this:

//in my constructor I am setting minutesArray up using a loop, 0-59. Tried both nums and strings
this.minutesArray = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
for(let i = 10 ; i < 60; i++){
this.minutesArray.push(String(i))
}

render() {

let now = new Date();
return (
  	<TimePicker
       minutes={this.minutesArray}
     onTimeSelected={(date)=>this.onTimeSelected(date))}
       initDate={now.toISOString()}/>
);

}

If there is a way to set time to be 0-59 without increments of 5, that will also fix my problem.

Thanks

May we please get an option for when user presses unslected item, it scrolls into selected?

There is initDate to initialize time but there is no property to handle edit. So, the issue is when change only in minutes, it resets the hour.

Gradle 3 has been out for some time, can we update the library to support api 27?

The DatePicker wheel still increments by 5 even if you pass a minutes array that goes from '00' - '59'. I am using version 1.0.3. The issue reported in #19 still occurs on the DatePicker wheel. The example provided in issue #19 only gave the TimePicker example so therefore the issue was only fixed for TimePicker. Would it be possible to get the same 3 line code fix that was introduced to fix TimePicker introduced in DatePicker?

How to change format from 0 to 00, 1 to 01 etc. basing on this example:

import { WheelPicker, DatePicker, TimePicker } from 'react-native-wheel-picker-android'
...

  render() {
    let arr = [1,2,3];
    return (
      <WheelPicker
          onItemSelected={(event)=>{/* do something */}}
          isCurved
          isCyclic
          data={arr}
          style={{width:300, height: 300}}/>
    );
  }

I tried this:

data={(arr < 10 ? "0" + arr : arr)}

which works when I want to display picked time, but unfortunately doesn't in WheelPicker itself.

Changing

  render() {
    let arr = [1,2,3];
  }

to

const arr = ['01' ,'02', '03'];

class Timepicker() {
  render() {
    return(
      //stuff to render
    )
  }
}

works, but sadly is not an option.

Thank you in advance for your answer ;)

Is it possible to make the wheel scroll horizontal instead of vertical?

linking the package crashes the app. unlinking wont

Is it possible to select only the date from the date picker? I don't need the rest of the fields.

'moment' is used in TimePicker and DatePicker but not included as a dependency in package.json

I am trying to update the position of the wheel by passing a new selectedItemPosition through the state but it is apparently not working.

I tried to add this component to my app, but when I do so I get:

Invariant Violation: Native component for "WheelPicker" does not exist

This error is located at:
  in WheelPicker (at WheelPicker.js:61)
  ...(more stacktrace output)

What I've done:

1. yarn add react-native-wheel-picker-android
2. added it to my app like so:

import { WheelPicker } from "react-native-wheel-picker-android";

...
return (
<View>
  <WheelPicker
    data={[1,2,3,4,5]}
    style={{width: 100, height: 100}}
  />
</View>
);

3. Run react-native run-android

Hi,

Firstly, thank you for your hard work.

I am currently using in my app to simulate a custom Timepicker. Obviously, I am currently passing arrays with available hours and minutes for my components.

I am interested in a way to provide disabled items to . and keep them non-selectable. In other words, I would like to have hours that can be seen in the Wheelpicker, but trying to scroll to their position would scroll one item above/below instead. Also, a visual feedback would be useful (e.g. custom textColor).

Is there by chance any plan to extend the current wheelpicker with this feature?
Cheers!

Is it possible to pass custom style rules to picker items & indicator? If it is possible how to do it.

Thank you.

https://github.com/jondot/awesome-react-native

Reproduce:

1. Create a app with WheelPicker component and set the isCyclic prop to true (or create a large list of values)
2. Run the app
3. Swipe fast up or down on the wheel picker so the wheel starts spinning
4. Stop the wheel by touching it once
5. The value that was selected is not sent back in the callback onItemSelected

If you let the wheel stop by itself or you scroll slowly the value is sent in the callback onItemSelected as expected.