talut / react-native-picker-module Goto Github PK

Hi @ all,

In Android, I can't click outward to deselect. In the list I can't see which value is currently selected.
So my workaround for confirmButtonAlwaysEnabled is:

value={Platform.OS === 'ios' ? formik.values[keyName]?.toString() : null}

Now i click the choiced value again. Maybe anybody has a better solution?

Yellowbox warning:

Warning: Picker has been extracted from react-native core and will be removed in a future release.

It can now be installed and imported from

https://www.npmjs.com/package/@react-native-community/picker

Warning: Failed prop type: Invalid prop valueof typestringsupplied toReactNativePickerModule, expected number.

ReactNativePickerModule.propTypes = {
  value        : PropTypes.number,  <<----------
  items        : PropTypes.array.isRequired,
  title        : PropTypes.string,
  ios          : PropTypes.object,
  pickerRef    : PropTypes.func.isRequired,
  onValueChange: PropTypes.func.isRequired,
  onCancel     : PropTypes.func,
  cancelButton : PropTypes.string,
  confirmButton: PropTypes.string,
};

This warning states that the prop validation for the value is number instead of a string.

      <ReactNativePickerModule
        pickerRef={e => (pickerRef = e)}
        selectedValue={selectedIndex}
        title={"Select a language"}
        items={dataAndImageSet.data}
        images={dataAndImageSet.images}
        onDismiss={() => {
          console.log("onDismiss")
        }}
        onCancel={() => {
          console.log("Cancelled")
        }}
        onValueChange={(valueText, index) => {
          console.log("value: ", valueText)
          console.log("index: ", index)
          setValueText(valueText)
          setSelectedIndex(index)
        }}
      />

selectedValue should be changed with value

Currently, passes selected index which deviates from the general standard. Adding selected value to can improve the API a little.

Regardless, great library!

Hello everyone,
When pickerRef.current.show() is called on android, app closes and go into background mode without showing any error:
I am using the react native picker module like this in my app:

<View style={styles.pickerContainer}>
      {/* iOS and android Picker */}
      <ReactNativePickerModule
        ref={pickerRef}
        value={currentCampaignId}
        title={'Select Campaign(s)'}
        items={campaignList}
        titleStyle={{ color: 'black' }}
        itemStyle={{ color: 'black' }}
        selectedColor={'#001'}
        onValueChange={value => {
          pickerId = value
          const data = _getLabelFromId(value)
          if (pickerId !== 0) {
            setShowLoader(true)
            setCurrentCampaignId(pickerId)
            setCurrentCampaignLabel(data.label)
          }
        }}
      />
      <TouchableOpacity
        style={{
          backgroundColor: 'white',
          flexDirection: 'row',
          justifyContent: 'space-between',
          paddingRight: 10,
        }}
        onPress={() => {
          campaignList.length > 0 && pickerRef.current.show()
        }}
      >
        <Subheading numberOfLines={1}>
          {' '}
          {currentCampaignLabel ?? ''}{' '}
        </Subheading>
        <Icon name="chevron-down-outline" size={15} color="gray" />
      </TouchableOpacity>
    </View>

Versions I am using:

• react-native: 0.72.4
• react-native-picker-module: 2.0.7
• @react-native-picker/picker: 2.4.10
• react-native-modal: ^13.0.1

Picker is showing fine on IOS.

Picker always seems to default to the first index.

I have tried setting value to a matching string expecting the Picker to select the matching index in the list but it always defaults to the first entry?

It would be good to have this implemented like this ;

https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/next-major/README.md#is-the-ios-dark-mode-supported

Hello there, the @react-native-community/picker, the library that your package use is no longer available, so when I try to build, this dependency is missed. I've tried to force the installation, but I get "Invariant Violation: Tried to register two views with the same name RNCPicker #403"
the issue is described here lawnstarter/react-native-picker-select#403

thank you!

New Feature Request

Add confirmButtonAlwaysEnabled boolean prop and disable the confirm button disabled mode when set true. (value are eq. with selectedValue)

for ex.:

confirmButtonAlwaysEnabled?: boolean

...
let isConfirmDisabled = (confirmButtonAlwaysEnabled) ? false : (value === selectedValue);
...

...
        <TouchableOpacity
          activeOpacity={0.9}
          disabled={isConfirmDisabled}
          onPress={() => {
            onValueChange(selectedValue)
            setIsVisible(false)
          }}
          style={[styles.confirmButtonView, confirmButtonStyle]}>
          <Text
            style={[
              styles.confirmButtonText,
              isConfirmDisabled ? confirmButtonDisabledTextStyle : confirmButtonEnabledTextStyle,
            ]}>
            {confirmButton}
          </Text>
        </TouchableOpacity>
...

{this.pickerRef.show()} <ReactNativePickerModule pickerRef={e => (this.pickerRef = e)} selectedValue={this.state.selectedItem} title={'How many drinks did customer order?'} items={this.state.data} onDismiss={() => { console.log('onDismiss'); this.props.navigation.goBack(); }} onCancel={() => { console.log('Cancelled'); }} onValueChange={(valueText, index) => { console.log('value: ', valueText); console.log('index: ', index); this.setState({ valueText: valueText, selectedItem: index }); }} />

I am trying so that it doesn't execute in a TouchableOpacity but not sure if i am doing this right. I am following an example I found but it doesn't seem like its working.

How to customize the style of this dialog?
Thank you

Hello Developer,

First of all thanks for this beautiful module. I would like to ask you that is it possible to use custom image next to the text ??

Please let me know if it is possible. Thanks

React Native Picker Module version 1.1.1 is crashing android app with the following error.

java.lang.Double cannot be cast to java.lang.String

Just running example like shared in README.md

Steps to produce the error

1. Click Show Language Picker
2. Pick a Language
3. Again click Show Language Picker
4. Crash

• What went wrong:
  A problem occurred configuring project ':react-native-picker-module'.

Could not resolve all files for configuration ':react-native-picker-module:classpath'.
Could not download kotlin-stdlib-jdk7.jar (org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.11)
> Could not get resource 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.3.11/kotlin-stdlib-jdk7-1.3.11.jar'.
> Could not GET 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib-jdk7/1.3.11/kotlin-stdlib-jdk7-1.3.11.jar'. Received status code 502 from server: Bad Gateway
Could not download kotlin-stdlib.jar (org.jetbrains.kotlin:kotlin-stdlib:1.3.11)
> Could not get resource 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib/1.3.11/kotlin-stdlib-1.3.11.jar'.
> Could not GET 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib/1.3.11/kotlin-stdlib-1.3.11.jar'. Received status code 502 from server: Bad Gateway
Could not download kotlin-stdlib-common.jar (org.jetbrains.kotlin:kotlin-stdlib-common:1.3.11)
> Could not get resource 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib-common/1.3.11/kotlin-stdlib-common-1.3.11.jar'.
> Could not GET 'https://jcenter.bintray.com/org/jetbrains/kotlin/kotlin-stdlib-common/1.3.11/kotlin-stdlib-common-1.3.11.jar'. Received status code 502 from server: Bad Gateway
Could not download checker-qual.jar (org.checkerframework:checker-qual:2.5.2)
> Could not get resource 'https://jcenter.bintray.com/org/checkerframework/checker-qual/2.5.2/checker-qual-2.5.2.jar'.
> Could not GET 'https://jcenter.bintray.com/org/checkerframework/checker-qual/2.5.2/checker-qual-2.5.2.jar'. Received status code 502 from server: Bad Gateway

Anyone know how to fix this issue? Thank

error: bundling failed: Error: Unable to resolve module react-native-picker-module from screens\DetailsStepsOneScreen.js: react-native-picker-module could not be found within the project.

In android, options are shown always in uppercase. Can you fix it? I need to show items in lowercase.
for example my list is ["Car", "plane", "sHiP"]
but they are always shown as CAR,PLANE,SHIP.

Seems this error happens on expo android.
I am on expo sdk-41.0.0 ("react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz")
react: 16.13.1

TypeError: null is not an object (evaluating '_reactNative.NativeModules.ReactNativePickerModule.show')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

It's working if I ejected from expo.

When i use your sample code, everything works on Ios but on android there is an error:
null is not an object(evaluating'_reactNative.NativeModules.ReactNativePickerModule.show')

var defaultCS= this.state.cs;

<ReactNativePickerModule
pickerRef={this.pickerRef}
value={this.state.cs}
title={"Select CS"}
cancelButtonStyle={{
backgroundColor: "white",
}}
cancelButtonTextStyle={{
color: "black",
fontSize: 14,
}}
confirmButtonEnabledTextStyle={{
color: "black",
fontSize: 14,
}}
confirmButtonDisabledTextStyle={{
color: "#ccc",
fontSize: 14,
}}
selectedColor="blue"
backdropColor="gray"
titleStyle={{
color: "black",
fontSize: 14,
}}
items={this.state.csList.map(
(item) => item.label
)}
contentContainerStyle={{
backgroundColor: "white",
}}
itemStyle={{
color: "#34495e",
backgroundColor: "#ecf0f1",
fontSize: 14,
}}
onValueChange={(itemValue) => {
this.setState(() => ({
cs: itemValue,
}));
}}
onCancel={() => {
this.setState(() => ({
cs: defaultCS,
}));
}}
/>

csList = ["neutral","good", "bad"]
Lets say defaultCS is "good" => value={"good"}
now, change selection to "bad" and click Cancel button
open the picker again
selectedValue= "good" ==> which is good
roller is still pointing to "bad" ==> Need a solution to reset it to point to "good"

But Roller is not resetting back to selected value after cancel

Hi, check, please android version.

There is an issue when calling an alert when an option is selected before the modal is hidden. It would be great to add an onDismiss prop for handling when the modal is gone.

Hey, as the title says, when I open the picker on a real Android device, (specifically Google Pixel 3 running Android 12, but the problem appears on every android phone I tried), the item labels are not shown (even though they're selectable). I've also created a new blank react native cli project with just this package and the result is the same. Any thoughts? It works just fine on an emulator. Code and screenshot below

import React, {useRef, useState} from 'react';
import {Button, SafeAreaView, Text} from 'react-native';
import ReactNativePickerModule from 'react-native-picker-module';

const App = () => {
  const pickerRef = useRef();
  const [value, setValue] = useState();
  const dataset_1 = [1, 2, 'Java', 'Kotlin', 'C++', 'C#', 'PHP'];
  const dataset_2 = [
    {
      value: 101,
      label: 'Javascript',
    },
    {
      value: 'golang_101',
      label: 'Go',
    },
    {
      value: 'kotlin_dsl',
      label: 'Kotlin',
    },
    {
      value: 'java_101',
      label: 'Java',
    },
    {
      value: 'cplusplus',
      label: 'C++',
    },
    {
      value: 'csharp_201',
      label: 'C#',
    },
    {
      value: 'php_201',
      label: 'PHP',
    },
  ];
  return (
    <>
      <SafeAreaView>
        <Button
          title="Select a language"
          onPress={() => pickerRef.current.show()}
        />
        <Text>Selected Item Text: {value}</Text>
      </SafeAreaView>
      <ReactNativePickerModule
        ref={pickerRef}
        value={value}
        title={'Select a language'}
        items={dataset_1}
        titleStyle={{color: 'white'}}
        itemStyle={{color: 'white'}}
        selectedColor="#FC0"
        confirmButtonEnabledTextStyle={{color: 'white'}}
        confirmButtonDisabledTextStyle={{color: 'grey'}}
        cancelButtonTextStyle={{color: 'white'}}
        confirmButtonStyle={{
          backgroundColor: 'rgba(0,0,0,1)',
        }}
        cancelButtonStyle={{
          backgroundColor: 'rgba(0,0,0,1)',
        }}
        contentContainerStyle={{
          backgroundColor: 'rgba(0,0,0,1)',
        }}
        onCancel={() => {
          console.log('Cancelled');
        }}
        onValueChange={value => {
          console.log('value: ', value);
          setValue(value);
        }}
      />
    </>
  );
};

export default App;

Other pickers on same page are working' one of them shows this error

node_modules\react-native-picker-module\android\src\main\java\com\taluttasgiran\pickermodule\RNSpinnerAdapter.java:76: error: cannot find symbol
ImageView imageView = holder.linearLayout.findViewById(R.id.item_image);
^
symbol: variable item_image
location: class id
1 error

FAILURE: Build failed with an exception.

I really like this library, but, not having a onCancel event handler is stopping me to use it. I saw that it can be easily implemented. I can open a PR if you want. Please look into this asap.
again, thanks for building this library.

Is there a way to use forwardRef with ReactNativePickerModule ?

My code

import React, { useState, forwardRef } from "react";
import ReactNativePickerModule from "react-native-picker-module";

interface PickerDTO {
  items: string[];
  title: string;
}

const Picker: React.ForwardRefRenderFunction<
  ReactNativePickerModule,
  PickerDTO
> = ({ items, title }, ref) => {

  const [value, setValue] = useState("");

  return (
    <>
      <ReactNativePickerModule
        pickerRef={ref}
        value={value}
        title={title}
        items={items}
        titleStyle={{ color: "white" }}
        itemStyle={{ color: "white" }}
        selectedColor="#FC0"
        confirmButtonEnabledTextStyle={{ color: "white" }}
        confirmButtonDisabledTextStyle={{ color: "grey" }}
        cancelButtonTextStyle={{ color: "white" }}
        confirmButtonStyle={{
          backgroundColor: "rgba(0,0,0,1)",
        }}
        cancelButtonStyle={{
          backgroundColor: "rgba(0,0,0,1)",
        }}
        contentContainerStyle={{
          backgroundColor: "rgba(0,0,0,1)",
        }}
        onCancel={() => {
          console.log("Cancelled");
        }}
        onValueChange={(value) => {
          console.log("value: ", value);
          setValue(value);
        }}
      />
    </>
  );
};

export default forwardRef(Picker);

I'm getting the following error with pickerRef:

Type 'ForwardedRef' is not assignable to type 'RefObject'.
Type 'null' is not assignable to type 'RefObject'.
Overload 2 of 2, '(props: ReactNativePickerModuleProps, context: any): ReactNativePickerModule', gave the following error.

Hi there,

I have upgraded to the latest version and I note that the example now uses hooks.

I am using the component within a class

render(): React.Node {
    return (
      <ReactNativePickerModule
        pickerRef={(e) => {
          this._picker = e;
        }}
        value={this.props.selectedIndex}
        title={this.props.title}
        items={this.props.options}
        onDismiss={() => {}}
        onCancel={() => {}}
        onValueChange={(valueText, index) => {
          this.props.onPress(index);
        }}
      />
    );
  }

Whereas as this used to work, I now do not get _picker getting initialised and hence elsewhere in my class where I go to display the picker, I get nothing.

What is the correct usage for this component within a class now?

The @react-native-community/picker package has been deprecated.

Author message:
this library has been renamed to @react-native-picker/picker. See the GitHub new repository: https://github.com/react-native-picker/picker

Hi i just jump on version 2.0.1 and ios is fine all works bud android have this error every time when I use pickerRef.current.show();

this is my code:

...
const pickerRef: any = useRef(undefined); 

//button onPress 
  const onShowLanguagePicker = () => {
    console.log('PICKER', pickerRef);
    if (pickerRef.current) {
       pickerRef.current.show();
    }
  };

        <ReactNativePickerModule
          items={availableLanguageList}
          pickerRef={pickerRef}
          title={I18n.t('screens.settings.selectLanguage')}
          value={selectedValueIndex}
          onValueChange={onLanguageSelect}
        />
...

ios works fine .... if I console log ref there are two functions hide and show and if i am trying to use it on android i get this:

and side question: How can I create a type for ref?

undefined is not an object (evaluating '_reactNative.NativeModules.ReactNativePickerModule.show))
Above is the error I receive on android simulator when clicking on the button to launch the picker. Code implementation is below.

Latest version of Android Studio using Pixel 2XL with Oreo

<Text style={textLabelStyles}>Categories</Text> <ReactNativePickerModule pickerRef={e => (this.categoryPicker = e)} value={pickerValues.indexOf(prodCategories)} title="Choose product category" items={pickerValues} onValueChange={index => this.setState({ prodCategories: pickerValues[index], }) } /> <TouchableOpacity onPress={() => { this.categoryPicker.show(); }} > <Text>Choose category</Text> </TouchableOpacity>

I have an array of objects like this

data: [
{name: 'option 1', value: 100},
{name: 'option 2', value: 101},
{name: 'option 3', value: 102},
{name: 'option 4', value: 103},
]

How to pass this kind of data in the Picker? And I can manage what to display?
Using an arrays of strings is a limitation
Thank you!

Please can you use the native driver for all animations. Not using the native drivers in React Native 0.62 and above gives a YellowBox warning.

            Animated.timing(this.state.animation, {
              toValue: 1,
              duration: ios.duration,
              useNativeDriver: true <---- add this
            }).start();

Is it possible to change the font of items or title ?

On Android if you provide an object as an item and set the value to null, attempting to show the picker causes the application to crash.

react-native-picker-module: v2.0.2
RN: 0.63