How can I reset the picker?

As data I almost use the default, except the key is not a number, but a sting.
Any idea?

Cheers,

not working on Android 5.0 with react native > 29

I want a Land scape mode can you anyone tell me plz

Seems like modal does not open anymore with react-native 0.42

change View.propTypes to ViewPropTypes in your npm and import it
it has problem in release mode

I am trying to use with new react-native version but got error " portal is undefined "

please say what can i do ??

Just trying to configure it locally, but the app fails to start because of

"Requiring unknown module rebound"

And actually it's really missing in the sources

The "second mode" of ModalPicker, the one with a child TextInput, is much more flexible, since we can modify the fontSize, for example, something that the "standalone" version doesn't allow.
But the list of options isn't showing up for me. The click do nothing.
And the first option works well, but I'm not able to change the style of the borders of the button, or the text inside. I wanted only the text aligned to the left.

Hi,

At the moment, there is no way to adjust the height of the optionContainer. Could you please add another property so we can change it? On some mobile phones this height (const OPTION_CONTAINER_HEIGHT = 400;) is too large and the cancel button shows outside the screen.
Thank you

Greetings,

A. Narwade

I used modal picker like below,

<ModalPicker
data={data}
initValue="1"
onChange={(option)=>{ alert(${option.label} (${option.key}) nom nom nom) }} />
<Image source={require('./images/dropdownArrow.png')} style={{height:10,width:15,marginLeft:5}}/>

Modal is not opening but initial value getting displayed.
Please Advise.

I'm using initValue passing an element but the warning is diplayed in development. Maybe remove this validation will be nice instead of require a string. ;)

Example.:

initValue={
              <Text>
                Filtre por
                <Text style={{ fontWeight: 'bold' }}>
                  {' ' + filter.description.toLowerCase()}
                </Text>
              </Text>
            }

The picker does not seem to stick to the bottom of the screen and doesn't adjust its size to the number of items that are in there.

Also the background slides in (instead of fading in), but that seems to be an issue of the Modal component.

Tried to run the app with RN 0.27.0 and it says can't find Portal module.

After upgrading to RN 0.34, the sample app crashes on Android.

Is there a way there already, or a simple addition I could make, that would let me rerender the option list? I need to populate it with data that I'm grabbing from a server-side API I have (which is async).

Any other workarounds are fine too.

{(this.state.modeOfPermission == 'SPECIFIC') && 
                         (<ModalPicker
                            data={this.state.mailList}
                            initValue="Select mail id"
                            onChange={(option) => { this.setState({selectedMail: option.label }) }}>
                            <TextInput
                                style={{ borderWidth: 1, borderColor: '#ccc', padding: 10, height: 50, marginLeft: 10, marginRight: 10, backgroundColor: '#FFF' }}
                                editable={false}
                                placeholder="Select E-mail id .."
                                value={this.state.selectedMail} />
                        </ModalPicker>
                         )} 

without this.state.modeOfPermission == 'SPECIFIC' condition it is working properly

Hi!
Does this picker only accepts label as option? Can't I use option.name?
Im fetching the names from an API, and I can't change that.
When I try with something that isn't label, the options are invisible, but they are there, because if I click on one of them, it works..

I'd like to reset the chosen values from outside the picker. When a value is chosen in the modal picker a state is set. When the user then presses a button the values are submitted to my API. When the API then returns an OK status I want to reset the values chosen in the modal picker. This doesn't seem to happen when I pop the route.

Any ideas?

Does not render on RN 0.36

Hi,
I can help in fixing issues and closing pending PRs. If you are seeking who can actively maintain this.
Please add me contributor.

Thanks

There have been numerous attempts to contact @d-a-n and merge the dozens of outstanding PR's. Since there has been no response, I am reluctantly opening up a fork to continue on this project as the "official unofficial" repo.
https://github.com/peacechen/react-native-modal-selector

This has been published on npm as
https://www.npmjs.com/package/react-native-modal-selector

If you are interested in participating as a collaborator, please post a reply at
peacechen#1

Issue #63 also discusses this move.

When the modal is opened, a warning is show...

Warning: 'keyboardShouldPersistTaps={true}' is deprecated. Use 'keyboardShouldPersistTaps="always"' instead.

Please correct. Thanks

The application crash and close when it's in debug mode without throwing any exception but it works fine without debugging. Does anybody know what's happening?

By default data need to be formatted in this way:

            { key: index++,  label: 'Fruits' },
            { key: index++, label: 'Red Apples' },
            { key: index++, label: 'Cherries' },
            { key: index++, label: 'Cranberries' },

I really need a value property like React Native Picker. For example input data will be:

            { key: index++,  label: 'Fruits', value: 'fruit1' },
            { key: index++, label: 'Red Apples', value: 'fruit5' },
            { key: index++, label: 'Cherries',value: 'fruit3'},
            { key: index++, label: 'Cranberries',value: 'fruit11' },

How I can do this?

For some reason initValue doesn't work. No label appear even when I've selected a value.

Screenshot

Code:

<ModalPicker
  data={GLOBALS.FRANVARO_VALUE_LISTS.REASONS}
  initValue="Välj en anledning"
  onChange={(option) => {
    GLOBALS.FRANVARO.REASON = option.label;
    GLOBALS.FRANVARO.REASON_SELECTED = true;
  }}
/>
<ModalPicker
  data={GLOBALS.FRANVARO_VALUE_LISTS.LENGTHS}
  initValue="Välj antal timmar"
  onChange={(option) => {
    GLOBALS.FRANVARO.LENGTH = option.label;
    GLOBALS.FRANVARO.LENGTH_SELECTED = true;
  }}
/>
<ModalPicker
  data={GLOBALS.FRANVARO_VALUE_LISTS.DAYS}
  initValue="Välj en dag"
  onChange={(option) => {
    GLOBALS.FRANVARO.DAY = option.label;
    GLOBALS.FRANVARO.DAY_SELECTED = true;
  }}
/>

I had this code working before updating to RN 0.40.

The modal and picker itself is working fine. The lists are rendered as intended and the value itself is being stored correctly and is recieved by my API like intended. The only issue is the label.

Any ideas?

Could you just delete this line.

Reproduce:
(1) set viewcontroller modal presentation style to form sheet and present view controller.
(2) show native modal picker
(3) select any item (or cancel); does not close.

Expected:
modal picker closes on selection/cancel

Actual:
modal picker selection becomes unresponsive (though scrolling still works).

When rotate a device, layout is broken, all platforms

It use to work fine but after upgrade to RN 0.42.3 scrolling in android stops.

Any help please?

i m running your sample app and getting "Super Expression must either be null or a function , not undefined." error on red screen, I m using react native version": "0.26.0

Getting the warning: "keyboardShouldPersisTaps={true} is deprecated, use keyboardShouldPersisTaps="always" instead"

react-native: "0.44.0"
react-native-modal-picker: "0.0.16"

Thanks a lot for this awesome plugin 👍

Change keyboardShouldPersistTaps to keyboardShouldPersistTaps="always" on index.js 134 line for hide warning

Is it possible to set initValue to a specific string that does not change upon picking a value?

Hello can u please change the code in index.js so the component uses

animationType

Prop instead of

animated

Prop

Thanks

Android shows error Each child in an array or iterator should have a unique key prop when the modal is opened. The Portal library seems to require a key prop for the root tag of the component shown in modal.

I consider it a little weird that the Portal doesn't handle the keys by itself, but I have to fix this for my current project anyways, so maybe I'll submit a pull request.

I am checking it on android platform now.
But unfortunately, this one doesn't seems to work well.
So Is it possible for me to use on android platform?

Thank you for your time.

Issue Description

Steps to Reproduce / Code Snippets

Load a basic app with react-native-modal-picker and react-native 0.42

Expected Results

no warning

Additional Information

React Native version: ^0.42.0
react-native-modal-picker version: ^0.0.16
Platform(s) (iOS, Android, or both?): iOS

There are tons of forks & PRs that have been pending for this project. How do we migrate this to an active repo where more than one person can merge and publish? Something like react-community ?

Ideally if we could get hold of @d-a-n , he could add others as Collaborators so they can commit and merge.
Also add them as collaborators to npm to publish new versions.

When passing in a custom style like so:

<ModalPicker
        data={this.state.data}
        selectStyle={Styles.SearchPage.selectorButton}
        selectTextStyle={Styles.SearchPage.labelBlackText}
        initValue="Select Category"
        cancelTextStyle={Styles.SearchPage.cancelTextStyle}
        optionTextStyle={Styles.SearchPage.optionTextStyle}
        optionStyle={Styles.SearchPage.optionStyle}
        cancelText="Cancel"
      />

I'm getting these warnings:

index.ios.bundle:58540Warning: Failed propType: Invalid props.optionTextStyle key `color` supplied to `ModalPicker`.
Bad object: {
  "color": "black",
  "fontSize": 25
}
Valid keys: [
  "width",
  "height",
  "top",
  "left",
  "right",
  "bottom",
  "margin",
  "marginVertical",
  "marginHorizontal",
  "marginTop",
  "marginBottom",
  "marginLeft",
  "marginRight",
  "padding",
  "paddingVertical",
  "paddingHorizontal",
  "paddingTop",
  "paddingBottom",
  "paddingLeft",
  "paddingRight",
  "borderWidth",
  "borderTopWidth",
  "borderRightWidth",
  "borderBottomWidth",
  "borderLeftWidth",
  "position",
  "flexDirection",
  "flexWrap",
  "justifyContent",
  "alignItems",
  "alignSelf",
  "flex",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "transform",
  "transformMatrix",
  "scaleX",
  "scaleY",
  "rotation",
  "translateX",
  "translateY",
  "backfaceVisibility",
  "backgroundColor",
  "borderColor",
  "borderTopColor",
  "borderRightColor",
  "borderBottomColor",
  "borderLeftColor",
  "borderRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderStyle",
  "opacity",
  "overflow",
  "elevation"
] Check the render method of `CategoryList`.

Team,

KeyboardShouldPersistTaps={true} has been deprecated in ScrollView. Should be replaced by value always..

Ok, the title might not be clear, let me try to explain.

I have the modal picker with a key and label on a page.
I am storing the key somewhere and when go to that same page again (to edit), I want to show the item I had stored. I know there is a initialValue, but like I mentioned I have stored the key and not the label.

So have can I compare what I have stored and set the correct label as initialValue?

Cheers,

if data contains more then 50 items, modal take too much time to open(>1s), is there a way to fix that.

React v. 16.0.0 comes up with separate 'prop-types module. Having said that it is not included in React itself. That means when react-native-modal-picker is used with react v16.0.0, following error appears

"Cannot read property oneOfType" of undefined.

Any fix for this?

I think the solution will be importing PropType from 'prop-types' instead of 'react

Currently in react-native-modal-picker - import React, { Component, PropTypes } from 'react';
Should be - import PropTypes from 'prop-types'

I received an error about undefined is not an object (evaluating propTypes.array).

I fixed it by changing the following in the react-native-modal-picker/index.js:

import React,{
    PropTypes
} from 'react';

To:

import React from 'react';
import {PropTypes} from 'prop-types';

Which works perfectly.
It seems that prop-types is a separate module in react-native, so no longer being imported from react itself.

Warning: 'keyboardShouldPersistTaps={true}' is deprecated. Use 'keyboardShouldPersistTaps="always"' instead

@d-a-n ,
This plugin is good.
But I need some more events like: onOpen, onClose

Can you please add that features in the next release?
Thanks.

I ran react 0.14.8 and react-native 0.25.1. I also checked with the latest versions: react 15.0.2 and react-native 0.26.0.

I copied and pasted the code of the README.md file of the github repository. And also cloned the rep and build it locally. Got the same result: Red Screen of Death.

I also followed the steps in the Red Screen of Death but also no luck with it.

I would appreciate any suggestions.

Any suggestions on this issue?