n4kz / react-native-material-dropdown Goto Github PK

I'm not a fan of using refs in RN unless as a last resort as somewhat evidenced by the complexity of the example for what should be easy to accomplish.

Wouldn't it just be easier to pass the label or anything really to the onChangeText function like so:

<Dropdown
  ...
  data={nameData}
  onChangeText={(value, i, data) => this._onChangeText(value, i, data, 'name')}
/>

_onChangeText(value, i, data, field) {
  this.setState({[field]: data[i]._value})
}

Any chance we could have this property added?

Friendly note for anyone who runs into the error above: you need to upgrade react-native.
For CRNA apps, that also means upgrading expo.

Error occurs here:

Thanks for your effort.
I am new in RN or JS. How can I get selected item/index from Dropdown?
any simple example?

Thanks

How to remove Border-bottom from dropdown Please help...

includeFontPadding does not work in older versions of react-native. I am running 0.36 and I think includeFontPadding is included in 0.40. I tried to upgrade react-native, but ran into a world of hurt. Would you be able to put a fix up for this?

This style is in the react-native-material-buttons package.

Is it in any way possible to disable the use of the dropdown?
I already tried with the Text Input prop "editable= {false}" with no affect.
Thanks in advance!

I am using the Dropdown with data such as:

const dropDownValues = [
    { value: "value1", label: "Label one" },
    { value: "value2", label: "Label two" },
];

The dropdown renders and functions fine, however I am getting a react-native warning:

Warning: Failed prop type: Invalid prop data[0].label of value Label one supplied to Dropdown, expected one of [null, null].

I suspect this is just a problem with the prop type definitions?

I just updated to v0.4.0 and every time I push the dropdown I get this error

ViewPropTypes on dropdown/index and item/index break older versions of react-native because ViewPropTypes is undefined.

I forked this repo, removed ViewPropTypes and the component now works. Running 0.36 version of react-native.

When I have the last option selected in the dropdown and then open the dropdown the options get cut off by the top of the app.

iOS Simulator

Android

Any way to make it so that the dropdown goes down if there is not enough room at the top of the app?

On right to left devices when a dropdown control doesn't span the whole screen width and the control is clicked the dropdown appears on the opposite side of the screen.

It would be nice to have a GIF for android as well.

I'm trying to create a dropdown menu, which drops when you press icon on the toolbar. But i can't find a legal way to don't render text in TextField, or set it empty after selection. Is it possible without editing lib source files?
P.S. Sorry for my english :(

Love this design! For one of my options, I'd like the user to be able to input something they write. Is there that option currently possible with the dropdown?

Hi,

I was wondering if their a way to access the test value of the json array below from the onChangeText?

<Dropdown
  error={props.phoneTypeError}
  label='Type of number'
  value={props.phoneType}
  onChangeText={(data) => console.log(data.test)}
  data={[{
    value: 'Call',
    test: 'call',
   }, {
     value: 'SMS',
     test: 'sms',
   }]}
/>

Thank you and continue your great work!

I am using two dropdowns on the single screen and I have to reset the second dropdown when the value of first dropdown is changed. I tried to use the value prop and bound it to a state variable but the text of the dropdown does not change when state changes.
Am I missing out something here?

I want to just show dropdown not with label.
Any idea?

In index.js, line ~119, event is undefined when the dropdown is opened via the focus() function. This is because onPress() is never called. We fixed the issue by wrapping
event.nativeEvent.locationY -= 16; this.ripple.startRipple(event);

with if(event != undefined){

I'm getting this warning if not enter the label parameter, but the component works fine without it. I think it should be optional.

Btw, thanks for a great component it helps me a lot.

Taking too much time to show picker. There is any solution.

Wasn't working in ios, had to bring in the RCTAnimation library from react-native and libRCTAnimation.a. Not sure if this is the same for everyone else. If so, might be worth noting in the read me.

Hi ,

I want to remove the bottom border of the dropdown. Is there anyway to do it ?

Thanks in advanced.

Is there a way to keep the field label above the field?

What I mean by this is that when there is no value set on the drop down, the label is inside the dropdown field, but when you select a value, the label then shows up above the field.

I would like it to always be above the field, because my other fields which are not dropdowns have labels above the field.

@n4kz
Is there any way to increase the touchable area of the dropdown ?

(If this exist already and I missed how to do it, please close this)

Is there a way to change the fontFamily of the items in the component?

I don't know if this is wanted because the component supposed to follow the material guidelines. But I think that can be used the ability of change de arrow icon, and let the material looks by default.
If you decide going forward with this, I recommend specify any icon of https://github.com/oblador/react-native-vector-icons#android

I found two issues, one of which I was able to fix with reference to facebook/react-native#14935 (the location of a critical script has changed from the packager folder to the scripts folder).

The second issue is beyond me. I get a successful build,

** BUILD SUCCEEDED **

Installing build/Build/Products/Debug-iphonesimulator/example.app
Launching org.reactjs.native.example.example

and the packager is running OK, but I get this error in the simulator when launching the app,

Failed to load bundle... index.ios.bundle

because of an

Invalid or unexpected token (While processing preset: ".../example/node_modules/babel-preset-react-native/index.js")

Where i can set the Placeholder Text?
How i can change the Placeholder Color?

how to remove bottom border of picker, i am applying in pickerStyle but it won't reflacting
please help
thank you

This crash can be reproduced by rapidly clicking a dropdown menu. Using RN: 0.45.1, react-native-material-dropdown 0.5.0.

The issue can be fixed by adding an additional condition to the if statement on line: 241 of src/components/dropdown/index.js so the setTimeout so it looks like this:
if (this.mounted && this.scroll !== null) {

Items value and label are the same thing in this package? what to do when there are duplicated labels?

i tried add a border in container style, but it doesn't looks good. maybe u can help me

Is it possible add React Object / Component instead of labels?

On iOs the text of the item is set left to right and if the text is longer than component width it makes the text truncate (ellipsis), instead of android, on android the text is set right to left and don't truncate the text.

Android

iOs

I have the same code to both platforms

I have a need to control the color of the highlighting. Customize to be different from the floating label.

Also, customize different colors when it is active/inactive.

I want to show value in select box. After selecting, I want to pass id of selected field.

I want like,
Name

How can I do this ?

Thank you so much for making this library, the material design fits really well into android apps. However I feel like the dynamic positioning is rather irritating. I feel like a user would expect a dropdown to appear at the same position every time. An option to turn this off would be splendid. The dynamic positioning also sometimes causes the drop down list to go underneath the status bar.

Sorry if this option is already present but I couldn't find anything about it in the docs. Alternatively if you can find a way to just prevent the dropdown from going under the status bar that would great as well.

Hey there, Alexander! 👋

This is awesome! Thank you for all your work. 🙏

Would love to use this for the Action Overflow Menu as well. Having just the dropdown menu being rendered when an external component (like an Icon/Button) is tapped, would be great. 😎

Reference: https://material.io/guidelines/components/menus.html

Let me know what you think about this. Thanks! 💪

Here is my problem: The first time my component is loaded I want to make a default value of the dropdown. I.E 'date' 'campaign' 'user' is my data with a label: group by. When the component first loaded, the label is showing in dropdown but I want to show one of my datas. How can I do this ?

Thanks for such amazing modules! Is it possible to do error labels (with animation) as we see in react-native-material-textfield - https://github.com/n4kz/react-native-material-textfield ?

I am using this module. It's all working fine. I am running a sample react-native app. In this app i am displaying 1-100 years in drop down list. My question is how to get a selected value in drop down list.
Here is my code:

import { View, ScrollView, Text, TextInput, TouchableOpacity, Image, Keyboard, LayoutAnimation, Alert } from 'react-native';
import { Dropdown } from 'react-native-material-dropdown';
var data = [];
class AddPatients extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
          value: ''
             }
           }
componentWillMount() {
    for (var i = 1; i <= 100; i++) {
      data.push({ value: i.toString() });
    }
  }
  selectedYear(value, index, data) {
    this.setState({
      value: data[value]
    });
  }
render() {
    return (
  <View style={{ flex: 0.027, alignItems: 'flex-start', justifyContent: 'center' }}>
                        <Dropdown
                          label="Select Year"
                          data={data}
                          baseColor={'black'}
                          containerStyle={{ width: 130 }}
                          selectedItemColor={'black'}
                          value={this.state.value}
                          onChangeText={this.selectedYear.bind(this)}
                        />
                      </View>
)
}
        }

Here is my screenshot:

Picker view is shown from the position last selected.
For example, if the last item is selected, the picker view would be bottom to up, next time.
How can I adjust this view fixed as top to bottom all time?

Hi I am having trouble adding this lib to my project, could someone please assist

react-native-cli: 2.0.1
react-native: 0.49.3

import {Dropdown} from 'react-native-material-dropdown';

...
<Dropdown label={Strings.COMMISSION_HEADING} data={channelOptions}/>
...

when using react-orientation, app crashes when I lock to landscape mode.

Terminating app due to uncaught exception 'UIApplicationInvalidInterfaceOrientation', reason: 'Supported orientations has no common orientation with the application, and [RCTModalHostViewController shouldAutorotate] is returning YES'

similar issue:
xgfe/react-native-datepicker#28

Hey!
Thanks for this good work, very useful :)
Just wanted to tell you that there is an error on the README. You have labelFontSize but that property does not exist (or at least I was not able to find it) I think that you meant to write fontSize.
Is that right?

Thanks for the great library. It's really easy to use. However, I am having trouble styling the actual dropdown component. I want to change it's background colour and add a top border. The prop that came to mind that could achieve this is pickerStyle. However, it doesn't seem to have any effect on the styling. Any help on this would be greatly appreciated. Cheers!

<Dropdown textColor='#efe1db' baseColor="#efe1db" itemColor='#efe1db' selectedItemColor='#000' value={data[0].value} data={data} dropdownPosition={0} label="" labelHeight={10} // inputContainerStyle={ // {backgroundColor: "red"} // } pickerStyle={{ width: 300, borderTopWidth: 2, borderTopColor: '#78818a', backgroundColor: '#3c3d3e', }} />

Seems no way to make this color to be black and also keep the dropdown items in different colors