# ty-react-native-modal-dropdown
**Repository Path**: rn-mi/ty-react-native-modal-dropdown
## Basic Information
- **Project Name**: ty-react-native-modal-dropdown
- **Description**: TY项目react-native-modal-dropdown仓库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-08
- **Last Updated**: 2025-08-12
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
> 模板版本：v0.2.2
react-native-modal-dropdown
This project is based on [react-native-modal-dropdown](https://github.com/siemiatj/react-native-modal-dropdown)
> [!TIP] [Gitee 地址](https://gitee.com/rn-mi/ty-react-native-modal-dropdown)
## 安装与使用
进入到工程目录并输入以下命令：
#### **npm**
```bash
npm install @tuya-oh/react-native-modal-dropdown
```
#### **yarn**
```bash
yarn add @tuya-oh/react-native-modal-dropdown
```
下面的代码展示了这个库的基本使用场景：
```js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
TouchableHighlight,
ScrollView,
} from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
const DEMO_OPTIONS_1 = ['option 1', 'option 2', 'option 3', 'option 4', 'option 5', 'option 6', 'option 7', 'option 8', 'option 9'];
const DEMO_OPTIONS_2 = [
{ "name": "Rex", "age": 30 },
{ "name": "Mary", "age": 25 },
{ "name": "John", "age": 41 },
{ "name": "Jim", "age": 22 },
{ "name": "Susan", "age": 52 },
{ "name": "Brent", "age": 33 },
{ "name": "Alex", "age": 16 },
{ "name": "Ian", "age": 20 },
{ "name": "Phil", "age": 24 },
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dropdown_4_options: [],
dropdown_4_defaultValue: 'loading...',
dropdown_6_icon_heart: true,
};
}
render() {
return (
this._dropdown_2_renderButtonText(rowData)}
renderRow={this._dropdown_2_renderRow.bind(this)}
renderRowComponent={TouchableHighlight}
renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this._dropdown_2_renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
/>
{
this.refs.dropdown_2.select(0);
}}>
select Rex
this._scrollView = el}
style={styles.scrollView}
contentContainerStyle={styles.contentContainer}
showsVerticalScrollIndicator={true}
scrollEventThrottle={1}>
{'Scroll view example.'}
this._dropdown_3 = el}
style={styles.dropdown_3}
options={DEMO_OPTIONS_1}
adjustFrame={style => this._dropdown_3_adjustFrame(style)}
dropdownTextStyle={styles.dropdown_3_dropdownTextStyle}
dropdownTextHighlightStyle={styles.dropdown_3_dropdownTextHighlightStyle}
/>
this._dropdown_4_onSelect(idx, value)}
/>
{'Show dropdown'}
this._dropdown_5_select(2)}>
{'Select the 3rd option'}
this._dropdown_5_select(-1)}>
{'Clear selection'}
this._dropdown_5 = el}
style={styles.dropdown_5}
options={['Select me to hide', `I can't be selected`, 'I can only be selected outside']}
defaultValue='Try the Show button above'
onDropdownWillShow={this._dropdown_5_willShow.bind(this)}
onDropdownWillHide={this._dropdown_5_willHide.bind(this)}
onSelect={this._dropdown_5_onSelect.bind(this)}
/>
);
}
_dropdown_2_renderButtonText(rowData) {
const { name, age } = rowData;
return `${name} - ${age}`;
}
_dropdown_2_renderRow(rowData, rowID, highlighted) {
let evenRow = rowID % 2;
return (
{`${rowData.name} (${rowData.age})`}
);
}
_dropdown_2_renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
if (rowID == DEMO_OPTIONS_1.length - 1) return;
let key = `spr_${rowID}`;
return ();
}
_dropdown_3_adjustFrame(style) {
console.log(`frameStyle={width:${style.width}, height:${style.height}, top:${style.top}, left:${style.left}, right:${style.right}}`);
style.top -= 15;
style.left += 150;
return style;
}
_dropdown_4_willShow() {
setTimeout(() => this.setState({
dropdown_4_options: DEMO_OPTIONS_1,
dropdown_4_defaultValue: 'loaded',
}), 2000);
}
_dropdown_4_willHide() {
this.setState({
dropdown_4_options: [],
dropdown_4_defaultValue: 'loading',
});
}
_dropdown_4_onSelect(idx, value) {
// BUG: alert in a modal will auto dismiss and causes crash after reload and touch. @sohobloo 2016-12-1
//alert(`idx=${idx}, value='${value}'`);
console.debug(`idx=${idx}, value='${value}'`);
}
_dropdown_5_show() {
this._dropdown_5 && this._dropdown_5.show();
}
_dropdown_5_select(idx) {
this._dropdown_5 && this._dropdown_5.select(idx);
}
_dropdown_5_willShow() {
return false;
}
_dropdown_5_willHide() {
let idx = this._dropdown_5_idx;
this._dropdown_5_idx = undefined;
return idx == 0;
}
_dropdown_5_onSelect(idx, value) {
this._dropdown_5_idx = idx;
if (this._dropdown_5_idx != 0) {
return false;
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
row: {
flex: 1,
flexDirection: 'row',
},
cell: {
flex: 1,
borderWidth: StyleSheet.hairlineWidth,
},
scrollView: {
flex: 1,
},
contentContainer: {
height: 500,
paddingVertical: 100,
paddingLeft: 20,
},
textButton: {
color: 'deepskyblue',
borderWidth: StyleSheet.hairlineWidth,
borderColor: 'deepskyblue',
margin: 2,
},
dropdown_2: {
alignSelf: 'flex-end',
width: 150,
marginTop: 32,
right: 8,
borderWidth: 0,
borderRadius: 3,
backgroundColor: 'cornflowerblue',
},
dropdown_2_text: {
marginVertical: 10,
marginHorizontal: 6,
fontSize: 18,
color: 'white',
textAlign: 'center',
textAlignVertical: 'center',
},
dropdown_2_dropdown: {
width: 150,
height: 300,
borderColor: 'cornflowerblue',
borderWidth: 2,
borderRadius: 3,
},
dropdown_2_row: {
flexDirection: 'row',
height: 40,
alignItems: 'center',
},
dropdown_2_row_text: {
marginHorizontal: 4,
fontSize: 16,
color: 'navy',
textAlignVertical: 'center',
},
dropdown_2_separator: {
height: 1,
backgroundColor: 'cornflowerblue',
},
dropdown_3: {
width: 150,
borderColor: 'lightgray',
borderWidth: 1,
borderRadius: 1,
},
dropdown_3_dropdownTextStyle: {
backgroundColor: '#000',
color: '#fff'
},
dropdown_3_dropdownTextHighlightStyle: {
backgroundColor: '#fff',
color: '#000'
},
dropdown_4: {
margin: 8,
borderColor: 'lightgray',
borderWidth: 1,
borderRadius: 1,
},
dropdown_4_dropdown: {
width: 100,
},
dropdown_5: {
margin: 8,
borderColor: 'lightgray',
borderWidth: 1,
borderRadius: 1,
}
});
export default App;
```
## 约束与限制
### 兼容性
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@tuya-oh/react-native-modal-dropdown Releases](https://gitee.com/rn-mi/ty-react-native-modal-dropdown/releases)
## 属性
> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- |
| `disabled` | disable / enable the component. | bool | no | all | yes |
| `defaultIndex` | Init selected index. `-1`: None is selected. **This only change the highlight of the dropdown row, you have to give a `defaultValue` to change the init text.** | number | no | all | yes |
| `defaultValue` | Init text of the button. **Invalid in wrapper mode.** | string | no | all | yes |
| `options` | Options. **The dropdown will show a loading indicator if `options` is `null`/`undefined`.** | array | no | all | yes |
| `animated` | Disable / enable fade animation. | bool | no | all | yes |
| `isFullWidth` | Disable / enable is dropdown render as full width. | bool | no | all | yes |
| `showsVerticalScrollIndicator` | Show / hide vertical scroll indicator. | bool | no | all | yes |
| `saveScrollPosition` | Sets the scroll position to selected index. | bool | no | all | yes |
| `style` | Style of the button. | object | no | all | yes |
| `textStyle` | Style of the button text. **Invalid in wrapper mode.** | object | no | all | yes |
| `defaultTextStyle` | Overried Style of the button text for default value. **Invalid in wrapper mode.** | object | no | all | yes |
| `dropdownStyle` | Style of the dropdown list. | object | no | all | yes |
| `dropdownTextStyle` | Style of the dropdown option text. | object | no | all | yes |
| `dropdownTextHighlightStyle` | Style of the dropdown selected option text. | object | no | all | yes |
| `dropdownTextProps` | Add custom props to the dropdown option text | object | no | all | yes |
| `adjustFrame` | This is a callback after the frame of the dropdown have been calculated and before showing. You will receive a style object as argument with some of the props like `width` `height` `top` `left` and `right`. Change them to appropriate values that accord with your requirement and **make the new style as the return value of this function**. | func | no | all | yes |
| `renderRow` | Customize render option rows: `function(option,index,isSelected)` **Will render a default row if `null`/`undefined`.** | func | no | all | yes |
| `renderRowComponent` | `TouchableOpacity` for iOS and `TouchableHighlight` for Android | Component | no | all | yes |
| `renderRowProps` | Add custom props to the touchable component of the rows | object | no | all | yes |
| `renderSeparator` | Customize render dropdown list separators. **Will render a default thin gray line if `null`/`undefined`.** | func | no | all | yes |
| `renderButtonText` | Use this to extract and return text from option object. This text will show on button after option selected. **Invalid in wrapper mode.** | func | no | all | yes |
| `renderRowText` | Use this to extract and return text from option object. This text will show on row **Invalid in wrapper mode.** | func | no | all | yes |
| `renderButtonComponent` | Customize the touchable component of the button | Component | no | all | yes |
| `renderRightComponent` | Custom component/Image to display on right side as dropdown icon | Component | no | all | yes |
| `renderButtonProps` | Add custom props to the touchable component of the button | object | no | all | yes |
| `onDropdownWillShow` | Trigger when dropdown will show by touching the button. **Return `false` can cancel the event.** | func | no | all | yes |
| `onDropdownWillHide` | Trigger when dropdown will hide by touching the button. **Return `false` can cancel the event.** | func | no | all | yes |
| `onSelect` | Trigger when option row touched with selected `index` and `value`. **Return `false` can cancel the event.** | func | no | all | yes |
| `accessible` | Set accessibility of dropdown modal and dropdown rows | bool | no | all | yes |
| `keyboardShouldPersistTaps` | See react-native `ScrollView` props | enum('always', 'never', 'handled') | no | all | yes |
| `multipleSelect` | Remove event closing modal when calling onSelect. | bool | no | all | yes |
| `dropdownListProps` | FlatList props | object | no | all | yes |
| `showSearch` | Setting showSearch to true will render the list header with a search | bool | no | all | yes |
| `renderSearch` | Allows to pass search component (required `showSearch` props ) | Component | no | all | yes |
| `keySearchObject` | If your option is an array containing objects, option will find element via `keySearchObject` | string | no | all | yes |
| `buttonAndRightComponentContainerStyle` | Prop to style the container View of the `` and the `` | object | no | all | yes |
### Method
> [!TIP] "Platform"列表示该组件在原三方库上支持的平台。
> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该组件；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---- | -------- | -------- | ----------------- |
| `show()` | Show the dropdown. **Won't trigger `onDropdownWillShow`.** | func | no | all | yes |
| `hide()` | Hide the dropdown. **Won't trigger `onDropdownWillHide`.** | func | no | all | yes |
| `select(idx)` | Select the specified option of the `idx`. Select `-1` will reset it to display `defaultValue`. **Won't trigger `onSelect`.** | func | no | all | yes |
## 遗留问题
## 其他
## 开源协议
本项目基于 [The MIT License (MIT)](https://github.com/siemiatj/react-native-modal-dropdown/blob/master/LICENSE) ，请自由地享受和参与开源。