sohobloo / react-native-modal-dropdown Goto Github PK

Reproduce:
(1) Launch new view controller as form sheet.
(2) Tap drop down.

Expected:

• dropdown drops down at x,y (or just below) 'please select'.

Actual:

• drop down drops down at x,y of screen.

If my option text is a little more and I want to set the option text multi-line.How can I set this?

I have a "Reset" option in the dropdown, which should reset the dropdown when selected. I'm trying this way but it's not working. Is there a solution for this?

<ModalDropdown style={ styles.leftFilter }
                                ref={ (ref) => this.lookaheadFilter = ref }
                                textStyle={ styles.leftFilterText }
                                dropdownStyle={ styles.leftFilterDropdown }
                                options={ ['Today', 'Tomorrow', '1 Week', '2 Weeks', 'Reset'] }
                                defaultValue='Dates'
                                renderRow={ this.filterRenderRow.bind(this) }
                                onSelect={ (idx, value) => this.loadLookAheadData(idx) }
/>

loadLookAheadData(option) {
        if (option == 4) {
            this.lookaheadFilter.select(-1);
        }

        // load data
}

hi, we have a use case where a user chooses an option from the dropdown. then user decides they dont want that option and instead just want the dropdown to "reset" to its original initial state.

We're trying to avoid having a row in the dropdown say "None" for this scenario. Do you have any suggestions on a better way to address that required behaviour ?

is there any way to store the selected value on state ?? something like an onSelect method which returns the selected option when it changes ?

Hi, plugin works well and I have tried providing array of objects to options using renderRow method it shows dropdown but when I see console it throws error of Invalid prop options[0] of type object supplied to ModalDropdown, expected string..

Can it be possible in current version or only string options are supported?

Hello,
I have 2 dropdown boxes. Based on selection on 1 i would like to set the default or rather displayed value of the second dropdown. user then can change the displayed value in second using the dropdown if needed. For this i need to be able to set the displayed value in dropdown programmatically? can you please tell me how i can do that?

Hey @sohobloo - is there a way to disable the fade in animation and instantly open the dropdown menu?

我的需求

• dropdown有个遮罩层，撑满屏幕，一直到屏幕底部
• dropdown有个高度，这个高度不会到屏幕底部

我发现目前dropdown只能设置一个高度，无法实现我所说的需求，

thanks for this component!

is it possible to change the background color of a cell when a user taps ? i wasnt sure which property / style to tweak to change that.

Hi @sohobloo,

I have state variable {countryListDropDown: []} to hold dropdown data, initially it will be empty,in componentWillMount i make api call and update the state variable with data {countryListDropDown: ['canada','united states']},

<ModalDropdown
                    defaultValue = {this.state.countryListDropDown.length > 0 ? this.state.countryListDropDown[0] : 'select country..'}
                    defaultIndex = {this.state.countryListDropDown.length > 0 ? 0 : -1}
                    textStyle = {{color:'#a0adb3',fontSize:20}}
                    dropdownStyle = {{width:windowSize.width-40,borderWidth:2}}
                    style={{height:40,paddingTop:10}}
                    options={this.state.countryListDropDown}
                    onSelect={(idx, value) => this.onCountrySelection(idx, value)}
                    />

how to make the 0th object as default selection? i tried with default index it selects in dropdown container but i need to update the button title from 'select country..' to 'canada'.

when I used navigator push to detail, I click the button ,it show that the was not on the right place ,but the after second click,it was right. I debug it ,it show that the first click I got this._buttonFrame was wrong.

Works fine when you set a renderRow function.
But when you select a option, the selected data is set to [Object object].. it should use the renderRow function to extract the data to show.
Or a seperate function that is

When I open alert in a modal ,alert is automatically dismissed and causing crash in IOS where as it is working fine in ANDROID.

I have a probem when i use options data is a list of objects, and when i selected an option then button text show an object. How can I get a property of object and show on Button
Example: I want to show name of list people on Button when I selected

下拉框内文字样式 属性设定 并没有生效 ，如何解决呢？

Hello,
Is it possible to disable the options selection ?
I want when I press the button, two options to show and if you click anywhere in that field, instead of picking the option, the ModalDropdown just goes back to the default.

Thank you !

Is there option to make one or more of options disabled for touch? In other words, if I click on specific option, I don't want it to be selected.

Thanks!

这个该怎么解决啊？谢谢

why the dropdown height is (33 + StyleSheet.hairlineWidth) * 5 in your source code line378 :

dropdown: {
    position: 'absolute',
    height: (33 + StyleSheet.hairlineWidth) * 5,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: 'lightgray',
    borderRadius: 2,
    backgroundColor: 'white',
    justifyContent: 'center'
  },

如题，
程序卡死，dropdown列表也不没隐藏
代码：
<ModalDropdown
options={['option1', 'option2']}
onSelect={(idx, value) => { alert('index=' + idx) }}>
...

Hey,
This error was occur, What's wrong?

undefined is not an object (evaluating 'row.type')

道友，懂中文的是吧？不能为dropdownStyle指定高度，指定后报错，dropdownStyle
dropdownStyle={StyleSheet.flatten([styles.dropdownStyle, {height:64}])}
(197行)这一行代码写错了：

let dropdownHeight = (this.props.dropdownStyle && StyleSheet.flatten(this.props.dropdownStyle.height)) || StyleSheet.flatten(styles.dropdown).height; // 应该是: .height) => ).height let dropdownHeight = (this.props.dropdownStyle && StyleSheet.flatten(this.props.dropdownStyle).height) || StyleSheet.flatten(styles.dropdown).height;

Plan to make it as a wrapper component in v0.2.0, so that anything can be the trigger.

Side effects to current version:

- style prop will effect on the real top hierarchy <Touchable> tag instead of the container <View> tag.

• textStyle prop will not take effect in wrapper mode.

hi, we've found in the app that when the dropdown is displayed - the user then needs to tap twice (minimally) for the tap gesture to be recognised. Are there any suggestions on how we can fix this?

dropdown已经选择了其中一个option，如何能够重置这个选择，让它显示defalutValue？？

Make row wrapper customizable.
Using any touchable component such as TouchableHighlight with custom underlayColor property or TouchableOpacity as you like in renderRow() function.
You can still just use as any other untouchable component as before and I will render a default TouchableHighlight wrapper for you.

When I use it in landscape orientation, it rotated to portrait orientation.
Please add support for landscape by adding props supportedOrientations of Modal.

Hi! Thanks for making this component! I have a suggestion: it would be nice to have an option to allow the dropdown menu to take the entire width of the button (or wrapper in my case). This looks a lot nicer on wrappers that use the full width of the screen.

Hi,
thanks for this helpful component :) But on first click, the list don't appear. I see the touch effect and on second touch, list appears correctly.
I use it for android, so i have no idea if this issue can be reproduced on IOS.

Have you an idea to fix it ?

thanks.

I found that I can pass options an array of objects and then custom render my items as needed. I was passing simple option object with URI for image and label. Would be good to update options to allow PropTypes of object or string. For now, I can just ignore the warning.

This serves very nicely as a drop down list control.

我在iOS上下拉无效，圆角样式也无效，安卓没有问题

IN DEVICE AND SIMULATOR it crashes when tapping the modal drop down.

: *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: ''parentNode' is a required parameter'
*** First throw call stack:
(
0 CoreFoundation 0x0000000105526d4b __exceptionPreprocess + 171
1 libobjc.A.dylib 0x0000000103db321e objc_exception_throw + 48
2 CoreFoundation 0x000000010552ae42 +[NSException raise:format:arguments:] + 98
3 Foundation 0x000000010397e599 -[NSAssertionHandler handleFailureInFunction:file:lineNumber:description:] + 166
4 Hang 0x000000010352d1b3 -[RCTNativeAnimatedNodesManager disconnectAnimatedNodes:childTag:] + 1075
5 Hang 0x00000001035317fa __60-[RCTNativeAnimatedModule disconnectAnimatedNodes:childTag:]_block_invoke + 90
6 Hang 0x00000001035344a4 __43-[RCTNativeAnimatedModule batchDidComplete]_block_invoke_2 + 116
7 CoreFoundation 0x00000001054b60b2 __53-[__NSArrayM enumerateObjectsWithOptions:usingBlock:]_block_invoke + 114
8 CoreFoundation 0x00000001054b5f6f -[__NSArrayM enumerateObjectsWithOptions:usingBlock:] + 239
9 Hang 0x00000001035343f4 __43-[RCTNativeAnimatedModule batchDidComplete]_block_invoke + 132
10 libdispatch.dylib 0x000000010941b808 _dispatch_call_block_and_release + 12
11 libdispatch.dylib 0x000000010943d12e _dispatch_client_callout + 8
12 libdispatch.dylib 0x00000001094244fb _dispatch_main_queue_callback_4CF + 1054
13 CoreFoundation 0x00000001054eae49 CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE + 9
14 CoreFoundation 0x00000001054b037d __CFRunLoopRun + 2205
15 CoreFoundation 0x00000001054af884 CFRunLoopRunSpecific + 420
16 GraphicsServices 0x000000010ae2ca6f GSEventRunModal + 161
17 UIKit 0x0000000107abbc68 UIApplicationMain + 159
18 Hang 0x0000000103418f2f main + 111
19 libdyld.dylib 0x000000010948668d start + 1
)

Is there any way to change the text style when the dropdown is being used as a wrapper, while using an image as the trigger?

请问，我需要何动态改下拉框变选中的值，
比如有下拉框的选项：[1,2,3,4,5]，另外我还有5个按钮，分别是1-5.
我在1-5按钮的事件中，把对应的数字写入state,
然后把这个state赋予下拉框的defaultValue。
发现：如果app启动后，没有通过下拉框选择前，按钮的值可以设置到下拉框上；
如果一旦下拉框手工改变了选择值，那么之后再按钮的值就设置不上去了。
测试代码如下：
class test extends Component {
constructor(props) {
super(props);
this.state = {seleted : '2',
};
}
render() {
return (

    <View style={{height:40,flexDirection: 'row',justifyContent: 'space-between' }}>
		<Button title={'1'} onPress={() => this.setState({seleted: '1'})} />
		<Button title={'2'} onPress={() => this.setState({seleted: '2'})} />
		<Button title={'3'} onPress={() => this.setState({seleted: '3'})} />
		<Button title={'4'} onPress={() => this.setState({seleted: '4'})} />
		<Button title={'5'} onPress={() => this.setState({seleted: '5'})} />

		<ModalDropdown options={['1','2','3','4','5']}
				defaultValue={this.state.seleted}
				onSelect={(idx, value) => this.setState({seleted: value})} />
    </View>
  );
}

}

Hi,

How Can I make DropDown width match the parent width.
FlexDirection: 'row'

Best

把您的例子中修改如下，其他不动，可以再现。
const DEMO_OPTIONS_1 = ['option 1', 'option 2', 'option 3', 'option 4', 'option 5', 'option 6', 'option 7', 'option 8', 'option 9','option10','aaaaaa'];

错误信息如下
View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flx: to FlexGrow:)
View:<RCTShadowWiew: 0x6080001bbc80; viewName:RCTView; reactTag:72;frame:{{0,0},{146,40}}>

react-native:0.39.2
虚拟机上跑的

Hi, after clicking on dropdown, status bar is changed, like backdrop is there and it's covering whole screen on Android, including status bar. I dont' want status bar to be affected at all while clicking on dropdown, how can this be achieved?
Thanks in advance!

找不到updateposition这个方法,
0.3.1已经移出了这个方法 可是我的0.3.1还是提示这个方法没有
谢谢

Open renderSeparator() interface for the drop down list view.

Can this text be chenged?

Will this be added to the roadmap? textStyle doesn't seem to take effect when the component is wrapped.

hi there, thanks again for this component it's been a real time saver for us, love it !

how can we load up an array of objects without getting a runtime warning ?

here is an example:

data = [
    {"name": "fred", "age", 10},
    {"name": "owen", "age", 30},
]

    <ModalDropdown>
         renderRow={this.dropdownRenderRow.bind(this)}
         etc...
         options={data}
     </ModalDropdown>

firstly, the rows do render ok in the dropdown list.

however it also throws a runtime warning - see screenshot below.

what is the best way to work around this so we can get rid of the warning ?

    dropdownRenderRow(rowData, rowID, highlighted) {
          return (
              <View>
                  etc...
                      <Text> {rowData.name} </Text>
              </View>
         )
    }

Warning: Failed prop type: Invalid prop `options[0]` of type `object` supplied to `ModalDropdown`, expected `string`.
    in ModalDropdown (created by ReadingLevelCard)
    in ReadingLevelCard (created by AddStudent)
    in RCTView (created by View)
    in View (created by AddStudent)
    in RCTView (created by View)
    in View (created by AddStudent)
    in AddStudent (created by WithNavigation(AddStudent))
    in WithNavigation(AddStudent) (created by FocusableComponent)
    in FocusableComponent (created by WithNavigation(FocusableComponent))
    in WithNavigation(FocusableComponent) (created by SceneView)
    in RCTView (created by View)

I know this is already an open issue, but I need help and nobody answered.

I have the same issue as #39, but I don't know how to render my own button and use it as a wrapper.
If someone could help me, would be great!

thank you!

how to change option borderBottomWidth style?
i want clear option border.