sohobloo / react-native-modal-dropdown Goto Github PK
View Code? Open in Web Editor NEWA react-native dropdown/picker/selector component for both Android & iOS.
License: MIT License
A react-native dropdown/picker/selector component for both Android & iOS.
License: MIT License
When I use it in landscape orientation, it rotated to portrait orientation.
Please add support for landscape by adding props supportedOrientations of Modal.
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.
道友,懂中文的是吧?不能为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;
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!
把您的例子中修改如下,其他不动,可以再现。
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}}>
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
}
找不到updateposition这个方法,
0.3.1已经移出了这个方法 可是我的0.3.1还是提示这个方法没有
谢谢
Can this text be chenged?
If my option text is a little more and I want to set the option text multi-line.How can I set this?
下拉框内文字样式 属性设定 并没有生效 ,如何解决呢?
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.
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 !
Reproduce:
(1) Launch new view controller as form sheet.
(2) Tap drop down.
Expected:
Actual:
我的需求
我发现目前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.
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
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?
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?
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 ?
Will this be added to the roadmap? textStyle
doesn't seem to take effect when the component is wrapped.
Hey @sohobloo - is there a way to disable the fade in animation and instantly open the dropdown menu?
Plan to make it as a wrapper component in v0.2.0, so that anything can be the trigger.
- 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.如题,
程序卡死,dropdown列表也不没隐藏
代码:
<ModalDropdown
options={['option1', 'option2']}
onSelect={(idx, value) => { alert('index=' + idx) }}>
...
Open renderSeparator() interface for the drop down list view.
dropdown已经选择了其中一个option,如何能够重置这个选择,让它显示defalutValue??
Hey,
This error was occur, What's wrong?
undefined is not an object (evaluating 'row.type')
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
)
我在iOS上下拉无效,圆角样式也无效,安卓没有问题
is there any way to store the selected value on state ?? something like an onSelect method which returns the selected option when it changes ?
请问,我需要何动态改下拉框变选中的值,
比如有下拉框的选项:[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>
);
}
}
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.
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 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.
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?
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'
},
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.
When I open alert in a modal ,alert is automatically dismissed and causing crash in IOS where as it is working fine in ANDROID.
Hi,
How Can I make DropDown width match the parent width.
FlexDirection: 'row'
Best
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?
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'.
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!
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.