A React Native Dropdown/picker/selector Component for Android & iOS & Web
react-native-modal-dropdown
react-native dropdown/picker/selector component, support Android, IOS, Web.
A react-native dropdown/picker/selector component for Android & iOS & Web.
react-native-modal-dropdown hereinafter referred to as RNMD
I think that in most front-end development processes, developers often need to use basic components to encapsulate components that conform to UI style and business logic. RNMD is such a very basic component, which is only used for positioning and popping up DropDown, so you may need to use it before Encapsulate first.
I think most Frontend Development process developers often need to use base component encapsulate component that conform to UI style and business logic. RNMD is a very basic component that is only used to locate and popup dorpdown, so before using it that you may need to encapsulate it.
If you are looking for an out-of-the-box component, I have encapsulated some cases, you can directly copy the source code into your project and preview it online:
If you are looking for an out of the box component, I have encapsulated a few cases, you can copy the source code into your project directly, online preview.
https://expo.io/@912305043/monchilin-react-native-dropdown-example
(Source Code)( https://github.com/MonchiLin/react-native-dropdown/blob/master/example/src/App.tsx )
Features
- 100% Typescript writing provides type safety (compile to JS)
- 100% Typescript writting provider type safety ( compile to JS )
- Interactive animation support
- Interactive animation support
- Compatible with Android & IOS & Web (Welcome to contribute Windows and macOS code)
- compatible Android & IOS & Web (welcome to contribute Windows & macOS code)
- Automatically adjust the position without worrying about the dropdown at the edge of the screen
- Automatically position, without fear of Dorpdown at the edge of the screen
- Semantic API at a glance
- A clear semantic API
- Customize 99% styles and attributes
- Customize 99% of styles and attributes
- Imperative Api support (Show/Hide/Select)
- Imperative Api support (Show/Hide/Select)
Demo
You can here find more examples.
You can be here Find more instances.
Installation
npm i @monchilin/react-native-dropdown -save
// yarn add @monchilin/react-native-dropdown
use
Import module
import ModalDropdown from '@monchilin/react-native-dropdown';
Basic usage
<ModalDropdown options={['option 1', 'option 2']}/>
Custom label
<ModalDropdown options={['option 1', 'option 2']}>
I'm Label
</ModalDropdown>
API
Props
| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
disabled |
bool | Yes | false | disable / enable the component. |
defaultIndex |
number | Yes | -1 | 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. |
index |
number | Yes | -1 | Init selected index. -1: None is selected. |
defaultLabel |
string | Yes | Please select… | Init label text. Invalid in custom label. |
dataSource |
array | No | dataSource for renderItem. | |
animated |
bool | Yes | true | Disable / enable animation. |
transitionShow |
string | Yee | flipUp | Expand animation [‘flipUp’, ‘scaleIn’, ‘fadeIn’, ‘slideUp’] |
transitionHide |
string | Yee | flipDown | Expand animation [‘flipDown’, ‘scaleOut’, ‘fadeOut’, ‘slideDown’] |
loading |
bool | Yes | false | Enable loading Indicator |
scrollEnabled |
bool | Yes | true | When false, the content does not scroll. The default value is true |
keyExtractor |
func | Yes | (_, index) => index.toString() | Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does. |
adjustFrame |
func | Yes | 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. |
|
renderItem |
func | Yes | Customize render dataSource item: function(option,index,isActive) Will render a default row if null/undefined. |
|
renderSeparator |
func | Yes | Customize render dropdown list separators. Will render a default thin gray line if null/undefined. |
|
showSeparator |
bool | yes | true | Show split line or not |
renderLabel |
func | Yes | Use this to extract and return text from dataSource object. This text will show on label after dataSource selected. Invalid in wrapper mode. | |
onDropdownWillShow |
func | Yes | Trigger when dropdown will show by touching the button. Return false can cancel the event. |
|
onDropdownWillHide |
func | Yes | Trigger when dropdown will hide by touching the button. Return false can cancel the event. |
|
onSelect |
func | Yes | Trigger when item touched with selected index and value. Return false can cancel the event. |
Customizable properties and styles
见 自定义任何样式与属性 章节
| Prop | Type | Optional |
|---|---|---|
rootContainerStyle |
StyleProp<ViewStyle> |
Yes |
rootContainerProps |
Omit<ViewProps, 'style'> |
Yes |
labelContainerDisabledStyle |
StyleProp<ViewStyle> |
Yes |
labelContainerStyle |
StyleProp<ViewStyle> |
Yes |
labelContainerProps |
Omit<TouchableOpacityProps, 'ref'> |
Yes |
labelStyle |
StyleProp<TextStyle> |
Yes |
labelDisabledStyle |
StyleProp<TextStyle> |
Yes |
labelProps |
Omit<TextProps, 'style'> |
Yes |
modalProps |
Omit<ModalProps, 'visible'> |
Yes |
dropdownStyle |
StyleProp<ViewStyle> |
Yes |
dropdownProps |
Omit<FlatListProps<ItemT>, 'data'> |
Yes |
itemTouchableProps |
Omit<TouchableOpacityProps,'onPress'> |
Yes |
itemLabelStyle |
StyleProp<TextStyle> |
Yes |
itemLabelProps |
Omit<TextProps, 'style'> |
Yes |
itemHighlightStyle |
StyleProp<ViewStyle> |
Yes |
itemLabelHighlightStyle |
StyleProp<TextStyle> |
Yes |
Methods
| Method | Description |
|---|---|
show() |
Show the dropdown. Won’t trigger onDropdownWillShow. |
hide() |
Hide the dropdown. Won’t trigger onDropdownWillHide. |
select(index) |
Select the specified dataSource of the index. Select -1 will reset it to display defaultValue. Won’t trigger onSelect. |
Customize any styles and attributes
As mentioned at the beginning, RNMD is a very basic component, which provides the ability to customize any styles and attributes, but in RN we cannot see the DOM structure as intuitively as in the browser, so someStyle, somePropwhen we see the api Feeling very confused, for this, I made two pictures to show the structure.
Boundary problem
slideUp and slideDown dropped frames?
RN’s Animated modules provide useNativeDriveroptions to improve the animation performance , but it can only be with opacityand transformused in conjunction, slideUp with slideDown is using heightto achieve, more obvious in development mode, so if there are requirements for fluency recommend the use of other animation effects .
Download Details:
Author: MonchiLin
Source Code: https://github.com/MonchiLin/react-native-dropdown
#react-native #react #mobile-apps
