A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

Related tags

React Native Awesome Components react-native-modal-selector
Overview

react-native-modal-selector npm version

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

This project is the official continuation of the abandoned react-native-modal-picker repo. Contributors are welcome to request a promotion to collaborator status.

Demo

Install

npm i react-native-modal-selector --save

Live support

Get help

If you have an urgent problem, hire a mentor for a 1:1 live session on Git-Start: Get 1:1 live support for your issue.

Provide help

Help others in paid 1:1 live sessions to get started. Give paid 1:1 live support.

Usage

You can either use this component in its default mode, as a wrapper around your existing component or provide a custom component (where you need to control opening of the modal yourself). In default mode a customizable button is rendered.

See SampleApp for an example how to use this component.

import ModalSelector from 'react-native-modal-selector'

class SampleApp extends Component {

    constructor(props) {
        super(props);

        this.state = {
            textInputValue: ''
        }
    }

    render() {
        let index = 0;
        const data = [
            { key: index++, section: true, label: 'Fruits' },
            { key: index++, label: 'Red Apples' },
            { key: index++, label: 'Cherries' },
            { key: index++, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' },
            // etc...
            // Can also add additional custom keys which are passed to the onChange callback
            { key: index++, label: 'Vegetable', customKey: 'Not a fruit' }
        ];

        return (
            <View style={{flex:1, justifyContent:'space-around', padding:50}}>

                // Default mode
                <ModalSelector
                    data={data}
                    initValue="Select something yummy!"
                    onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }} />

                // Wrapper
                <ModalSelector
                    data={data}
                    initValue="Select something yummy!"
                    supportedOrientations={['landscape']}
                    accessible={true}
                    scrollViewAccessibilityLabel={'Scrollable options'}
                    cancelButtonAccessibilityLabel={'Cancel Button'}
                    onChange={(option)=>{ this.setState({textInputValue:option.label})}}>

                    <TextInput
                        style={{borderWidth:1, borderColor:'#ccc', padding:10, height:30}}
                        editable={false}
                        placeholder="Select something yummy!"
                        value={this.state.textInputValue} />

                </ModalSelector>

                // Custom component
                <ModalSelector
                    data={data}
                    ref={selector => { this.selector = selector; }}
                    customSelector={<Switch onValueChange={() => this.selector.open()} />}
                />
            </View>
        );
    }
}

Data Format

The selector accepts a specific format of data:

[{ key: 5, label: 'Red Apples' }]

Optionally provide a component key which overrides the default label text. Optionally provide a unique testID for each item:

[{
  key: 5,
  label: 'Red Apples',
  // The next keys are optional --
  component: <View style={{backgroundColor: 'red'}}><Text style={{color: 'white'}}>Red Apples custom component ☺</Text></View>,
  testID: '5-red-apples'
}]

If your data has a specific format, you can define extractors of data, example:

this.setState({data: [{ id: 5, name: 'Red Apples' }]});

return (
  <ModalSelector
    data={this.state.data}
    keyExtractor= {item => item.id}
    labelExtractor= {item => item.name}
  />
);

API

Props

Prop Type Optional Default Description
data array No [] array of objects with a unique key and label to select in the modal. Optional component overrides label text. Optional unique testID for each item.
onChange function Yes () => {} callback function, when the users has selected an option
onModalOpen function Yes () => {} callback function, when modal is opening
onModalClose function Yes (item) => {} callback function, when modal is closing. Returns the selected item.
keyExtractor      function Yes     (data) => data.key   extract the key from the data item
labelExtractor    function Yes     (data) => data.label extract the label from the data item
componentExtractor function Yes     (data) => data.component extract the component from the data item
visible bool Yes false control open/close state of modal
closeOnChange bool Yes true control if modal closes on select
initValue string Yes Select me! text that is initially shown on the button
cancelText string Yes cancel text of the cancel button
disabled bool Yes false true disables opening of the modal
supportedOrientations ['portrait', 'landscape'] Yes both orientations the modal supports
keyboardShouldPersistTaps string / bool Yes always passed to underlying ScrollView
animationType string Yes slide type of animation to be used to show the modal. Must be one of none, slide or fade.
style object Yes style definitions for the root element
childrenContainerStyle object Yes {} style definitions for the children container view
touchableStyle object Yes {} style definitions for the touchable element
touchableActiveOpacity number Yes 0.2 opacity for the touchable element on touch
selectStyle       object   Yes     {}         style definitions for the select element (available in default mode only!). NOTE: Due to breaking changes in React Native, RN < 0.39.0 should pass flex:1 explicitly to selectStyle as a prop.
selectTextStyle object Yes {} style definitions for the select element (available in default mode only!)
overlayStyle object Yes { flex: 1, padding: '5%', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)' } style definitions for the overlay background element. RN <= 0.41 should override this with pixel value for padding.
sectionStyle object Yes {} style definitions for the section element
sectionTextStyle object Yes {} style definitions for the select text element
selectedItemTextStyle object Yes {} style definitions for the currently selected text element
optionStyle object Yes {} style definitions for the option element
optionTextStyle object Yes {} style definitions for the option text element
optionContainerStyle object Yes {} style definitions for the option container element
cancelStyle object Yes {} style definitions for the cancel element
cancelTextStyle object Yes {} style definitions for the cancel text element
initValueTextStyle object Yes {} style definitions for the initValue text element
cancelContainerStyle object Yes {} style definitions for the cancel container
backdropPressToClose bool Yes false true makes the modal close when the overlay is pressed
passThruProps object Yes {} props to pass through to the container View and each option TouchableOpacity (e.g. testID for testing)
selectTextPassThruProps object Yes {} props to pass through to the select text component
optionTextPassThruProps object Yes {} props to pass through to the options text components in the modal
cancelTextPassThruProps object Yes {} props to pass through to the cancel text components in the modal
scrollViewPassThruProps object Yes {} props to pass through to the internal ScrollView
openButtonContainerAccessible bool Yes false true enables accessibility for the open button container. Note: if false be sure to define accessibility props directly in the wrapped component.
listItemAccessible bool Yes false true enables accessibility for data items. Note: data items should have an accessibilityLabel property if this is enabled
cancelButtonAccessible bool Yes false true enables accessibility for cancel button.
scrollViewAccessible bool Yes false true enables accessibility for the scroll view. Only enable this if you don't want to interact with individual data items.
scrollViewAccessibilityLabel string Yes undefined Accessibility label for the modal ScrollView
cancelButtonAccessibilityLabel string Yes undefined Accessibility label for the cancel button
modalOpenerHitSlop object Yes {} How far touch can stray away from touchable that opens modal (RN docs)
customSelector node Yes undefined Render a custom node instead of the built-in select box.
selectedKey any Yes '' Key of the item to be initially selected
enableShortPress bool Yes true enables short press. This is regular touch behavior.
enableLongPress bool Yes false enables long press. When true, onModalOpen returns {longPress: true}
optionsTestIDPrefix string Yes 'default' This prefixes each selectable option's testID prop if no testID keys are provided in props.data array objects. Default for each option's testID: 'default-<optionLabel>'

Methods

getSelectedItem(): get current selected item, updated by onChange event.

Comments
  • onChange not called on ios

    onChange not called on ios

    hi,

    the onchange callback is never called on my system (ios). it works perfectly on android.

    using version 1.0.0

    thanks, dan

    return (<ModalSelector style={{ height: 1, width: 1, position: 'absolute', borderWidth: 1, borderColor: 'red' }}
                             visible={this.state.showModal}
                             data={this.state.photoOrigins}
                             onChange={() => {
                                         alert('asdasd'); // THIS ONE IS NOT CALLED
                                       }}
                             onModalClose={() => {
                                             this.setState({
                                               showModal: false
                                             })
                                           }} />)
    opened by danielzzz 23
  • Add selectedKey prop

    Add selectedKey prop

    The value provided must be a key present in one item of the array items provided as data. If the key provided is not present in the array, displayed value will be initValue.

    E.g: If I have this array as data

    let data = [
  {label: 'First option', key: 0},
  {label: 'Second option', key: 1},
  {label: 'Third option', key: 2},
]

    and I want the second one to be displayed (Second option), I have to pass 1 on selectedKey:

    <ModalSelector
  data={data}
  selectedKey={1}
/>

    closes: https://github.com/peacechen/react-native-modal-selector/issues/52, https://github.com/peacechen/react-native-modal-selector/issues/63, https://github.com/peacechen/react-native-modal-selector/issues/80

    opened by JoseVf 17
  • reverted style changes introduced in orientation fixes

    reverted style changes introduced in orientation fixes

    The fixes to support both orientations made the modal look quite different. These changes keep the modal styled the same as before the orientation changes but also allows the modal to size correctly in both orientations.

    opened by ChangedLater 15
  • ModalSelector renderItem typing error

    ModalSelector renderItem typing error

    Somewhere between versions 2.0.2 and 2.0.7 the typings for the props on ModalSelector were changed to include FlatListProps. Since that change, TypeScript now throws an error unless you provide the renderItem property that is required for a FlatList. However, I know that is wrong, because this package already takes care of providing a renderItem implementation in its code.

    I believe the solution is to utilize Pick, Omit, Exclude from TypeScript in some way, but I'm not familiar with exactly how

    opened by scousino 14
  • Open modal selector onLongPress

    Open modal selector onLongPress

    Is there a way to open the selector onLongPress in wrapper mode? I am wrapping the selector around a touchable opacity component which supports onLongPress.

    opened by jadeirving9 13
  • Modal don't close on android

    Modal don't close on android

    Hello,

    The modal don't want to close on android when i try to update the state of my parent component. Here is my code :

    Children component :

    <ModalSelector
            data={data}
            initValue="Référence dalle"
            cancelText={"Annuler"}
            animationType="none"
            onChange={item => {
              this.setState({ selected_item: item.key });
              this.props.setState("test", "test");
            }}
          />

    Parent component :

      _setState(name, value) {
    console.log(name + " " + value);
    this.setState({ [name]: value });
  }

    <InputSlabReference
              slab_ref={this.state.slab_ref}
              setState={this._setState}
/>

    But if i do the following, it's working :

    <ModalSelector
            data={data}
            initValue="Référence dalle"
            cancelText={"Annuler"}
            animationType="none"
            onChange={item => {
              this.setState({ selected_item: item.key });
            }}
          />

    Can somebody explain to me what I’m doing wrong?

    Thanks :)

    opened by laurentmichel 12
  • Accessibility Flexibility

    Accessibility Flexibility

    added some flexibility for accessibility. Included two new props, one for scrollview modal and cancel button. There was also a small bug with android where the 2nd option was being focused instead of the 1st. That should be fixed as well.

    opened by jessamp 11
  • Eslint rules

    Eslint rules

    Fixes issue #13

    • The first commit simply applies rules that enforce the code style and formatting already used
    • the second commit could be discussed/amended/improved and it is based on my personal preference for readability
    opened by fabriziomoscon 11
  • Implemented FlatList with Example for Large data array

    Implemented FlatList with Example for Large data array

    WRT #94 Issue, have implemented flatList and also have added an example 20201128_141250

    Note

    Not tested on ios device For flat list key should be a string but that can be overcome by passing keyExtractor which will return string

    opened by mehimanshupatil 10
  • Cancel button cut-off on Android

    Cancel button cut-off on Android

    Hey again,

    Have been noticing that the cancel button is cut off on Android: cutoff

    I suspect it's due to the maxHeight: 30 set at style.js:29. I tried commenting this out, and it looks fine on Android and iOS. Looking at the git blame, though, it looks like the reason this was added in has to do with portrait and landscape mode.

    Would love for this to be changed, or the ability to override this in like a cancelContainerStyle property or something.

    opened by mienaikoe 10
  • accessibilityLabel error

    accessibilityLabel error

    Hi, importantForAccessibility error importantForAccessibility = {isFirstItem? 'yes': 'no'}.I solved it with But this time it gives accessibilityLabel error. Please can you help? This problem is happening at 0.62. Android error_android

    duplicate 
    opened by kadir-akbulut 9
  • ModalSelector reset when close modal

    ModalSelector reset when close modal

    I have a component in my react native app that use a ModalSelector to choose option of type I want. If option A, it shows a button which open a modal to select a date with library react-native-calendars. When I close the modal without validate the dates I picked, the option in modal selector stay. But if I validate, ModalSelector reset and show my text 'select a type' (initValue) of my ModalSelector. It keep in memory the choice, but didn't show it in ModalSelector.

    My ModalSelector at beginning :

                    <ModalSelector
                  style={{marginBottom: 15}}
                  optionContainerStyle={{backgroundColor: '#FFFFFF'}}
                  optionTextStyle={{color: '#89559e', fontWeight: 'bold'}}
                  selectTextStyle={{color: '#89559e', fontWeight: '500'}}
                  data={listAbs}
                  initValue={I18n.t(
                    'message.myapp.action.selectionnerType',
                  )}
                  cancelText={I18n.t('message.myapp.action.annuler')}
                  keyExtractor={(item) => item.code}
                  labelExtractor={(item) => item.params.libelle}
                  onChange={(option) => setCodeAbs(option)}
                />

    Capture d’écran 2022-09-22 à 10 45 54

    If validate the date, go back to this point and didn't keep the option. The result I want : Capture d’écran 2022-09-22 à 10 50 23 What I have : Capture d’écran 2022-09-22 à 10 56 31

    => I have the problem because the component was too long, so I dispatch it in different components, the component calendar picker was in another component, and the modal in the parent component. If I put my calendar picker component into the parent component, I dont have the problem I describe here. But its a problem I dont have with the children component selectFile, and same problem with children component select hours which use react-native-calendars too.

    The filepicker close itself, we can see the same problem with a react native Alert. When we close it, modal selector reset. Seems it reset when we close modals, but not all modals, i dont understand.

    opened by EloiseIncrociati 0
  • first item selected initially on first render

    first item selected initially on first render

    I want to make modal selector to select 1st item selected on first render. until user chooses any other option. It should also call onClose method at first selection. As listing is dynamic data is coming from api's.

    opened by SymntxHomendra51 0
  • Inconsistencies in selectedItemTextStyle

    Inconsistencies in selectedItemTextStyle

    The selectedItemTextStyle property kindly added by @mikaello in #82 is exactly what my app needs, to let users who revisit a modal selector know what the currently selected value is.

    However the property appears to show some odd behaviors. On a SampleApp modified only to add: selectedItemTextStyle = {{color: 'red', textDecorationLine: 'underline'}} at the beginning of the first three ModalSelector.

    Here's some samples of anomalies I've seen:

    Action: Open a modal, make a selection, reopen modal and see if it is highlighted by the passed TextStyle

    Root case: A selection (Cherries) in the first Modal behaves as expected, showing 'Cherries" highlighted in the displayed list

    Anomaly 1 Immediately repeat with the second Modal selecting 'Cranberries'. Selection is not highlighted in displayed list, suggesting either an error in that invocation or some shared state

    Anomaly 2 Immediately repeat action with Modal 1 . The 'Cherries' highlight is gone. Reselect 'Cherries'

    Reselect Modal 1 - 'Cherries' highlight is restored

    Anomaly 3 - Retest Modal 2 entering 'Cranberries'. Modal 2 is now functioning, showing a highlighted 'Cranberries'. Interestingly if you use a different style in Anomaly 3 you'll see that the correct local style is displayed, suggesting that if there's shared state between the Modals it isn't total in any way

    Anomaly 4 - Move on to Modal 3 (the switch) in the current state. Select 'Pink Grapefruit'. Reopen - 'Pink Grapefruit' is highlighted. Now revisit Modals 1 and 2. They are undisturbed, showing highlights on 'Cherries' and 'Cranberries' respectively. All appears to be working ...

    So ... to me it looks like there's some kind of interaction between components. But it's not across all attributes and it has an odd pattern. Can anyone give any insight into this, or duplicate it ?

    opened by rpattcorner 2
  • onModalClosed returns object instead of option when selecting cancel

    onModalClosed returns object instead of option when selecting cancel

    If I close the modal with the cancel button, onCloseModal returns unexpected output. For now I'm working around it by doing something like this:

    onModalClose={(option) => {
    if (option?.key) {
      this._handleOption(option);
    }
  }
}

    when cancel is selected, onCloseModal returns:

    {"_dispatchInstances": {"_debugHookTypes": null, "_debugID": 826637, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugID": 826633, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 11, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "debugSource": {"columnNumber": 7, "fileName": "-- content removed for privacy --", "lineNumber": 34}, "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": {"_debugHookTypes": null, "_debugID": 826639, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [Circular], "selfBaseDuration": 0, "sibling": [FiberNode], "stateNode": null, "tag": 11, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "childExpirationTime": 0, "dependencies": null, "effectTag": 128, "elementType": "RCTView", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": "", "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": undefined, "accessibilityValue": undefined, "accessibilityViewIsModal": undefined, "accessible": false, "children": [Array], "collapsable": undefined, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "style": [Object], "testID": undefined}, "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": "", "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": undefined, "accessibilityValue": undefined, "accessibilityViewIsModal": undefined, "accessible": false, "children": [Array], "collapsable": undefined, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "style": [Object], "testID": undefined}, "ref": [Function forwardRef], "return": {"_debugHookTypes": null, "_debugID": 826635, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [Circular], "childExpirationTime": 0, "dependencies": null, "effectTag": 0, "elementType": [Object], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 10, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "selfBaseDuration": 0, "sibling": null, "stateNode": {"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 5087, "getNode": [Function anonymous], "viewConfig": [Object]}, "tag": 5, "treeBaseDuration": 0, "type": "RCTView", "updateQueue": null}, "_dispatchListeners": [Function onResponderRelease], "_targetInst": {"_debugHookTypes": null, "_debugID": 826637, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugID": 826633, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 11, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "debugSource": {"columnNumber": 7, "fileName": "-- content removed for privacy --", "lineNumber": 34}, "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": {"_debugHookTypes": null, "_debugID": 826639, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [Circular], "selfBaseDuration": 0, "sibling": [FiberNode], "stateNode": null, "tag": 11, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "childExpirationTime": 0, "dependencies": null, "effectTag": 128, "elementType": "RCTView", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": "", "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": undefined, "accessibilityValue": undefined, "accessibilityViewIsModal": undefined, "accessible": false, "children": [Array], "collapsable": undefined, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "style": [Object], "testID": undefined}, "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": "", "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": undefined, "accessibilityValue": undefined, "accessibilityViewIsModal": undefined, "accessible": false, "children": [Array], "collapsable": undefined, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "style": [Object], "testID": undefined}, "ref": [Function forwardRef], "return": {"_debugHookTypes": null, "_debugID": 826635, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [Circular], "childExpirationTime": 0, "dependencies": null, "effectTag": 0, "elementType": [Object], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 10, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "selfBaseDuration": 0, "sibling": null, "stateNode": {"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 5087, "getNode": [Function anonymous], "viewConfig": [Object]}, "tag": 5, "treeBaseDuration": 0, "type": "RCTView", "updateQueue": null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": {"_children": [[ReactNativeFiberHostComponent]], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 826637, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 128, "elementType": "RCTView", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": [Circular], "tag": 5, "treeBaseDuration": 0, "type": "RCTView", "updateQueue": null}, "_nativeTag": 5087, "getNode": [Function anonymous], "viewConfig": {"Commands": [Object], "bubblingEventTypes": [Object], "directEventTypes": [Object], "uiViewClassName": "RCTView", "validAttributes": [Object]}}, "defaultPrevented": undefined, "dispatchConfig": {"dependencies": ["topTouchCancel", "topTouchEnd"], "registrationName": "onResponderRelease"}, "eventPhase": undefined, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": undefined, "nativeEvent": {"changedTouches": [[Circular]], "force": 0, "identifier": 1, "locationX": 156.5, "locationY": 13, "pageX": 183.5, "pageY": 475.5, "target": 5083, "timestamp": 1915278512.82747, "touches": []}, "target": {"_children": [5079], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 826654, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 0, "elementType": "RCTText", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": [Circular], "tag": 5, "treeBaseDuration": 0, "type": "RCTText", "updateQueue": null}, "_nativeTag": 5083, "viewConfig": {"directEventTypes": [Object], "uiViewClassName": "RCTText", "validAttributes": [Object]}}, "timeStamp": 1636772200923, "touchHistory": {"indexOfSingleActiveTouch": 1, "mostRecentTimeStamp": 1915278512.82747, "numberActiveTouches": 0, "touchBank": [undefined, [Object]]}, "type": undefined}

    opened by mrtwebdesign 1
  • Selected element (item) is not displayed

    Selected element (item) is not displayed

    The selected element (data: label & key) is adopted, but not displayed in the selector field. The style properties are also not adopted!!!

    The code for the selector: <ModalSelector data={data} ref={selector => {this.selector = selector;}} overlayStyle={styles.dropdownselector} caseSensitiveSearch={true} initValue="Bitte Artikeltyp auswählen!" supportedOrientations={['landscape']} accessible={true} cancelText="zurück" scrollViewAccessible={true} scrollViewAccessibilityLabel={'Scrollable options'} searchText="Suche" searchTextStyle={{ fontFamily: 'sans-serif', fontSize: 18, textAlign: 'center'}} onChange={(item)=> this.handleChange(item.label, 'itemcat') }>

                    </ModalSelector>

    Style properties: const styles = StyleSheet.create({ ... dropdownselector: { borderColor: 'deepskyblue', borderRadius: 8, borderWidth: 1, height: 40, padding: 10, marginBottom: 15, backgroundColor: '#fafafa', }, ...

    opened by chrimoe 6
Releases(v2.1.2)

  • v2.1.2(Oct 24, 2022)

  • v2.1.1(Jun 21, 2022)

    • improved TypeScript types: added typings for method close() (issue https://github.com/peacechen/react-native-modal-selector/issues/176 / commit https://github.com/peacechen/react-native-modal-selector/commit/7d113b5a1df299b3648ae9502726aa252c72eca8)
    Source code(tar.gz)
    Source code(zip)

  • v2.1.0(Sep 10, 2021)

  • v2.0.9(Sep 2, 2021)

    Enhancements of TypeScript types:

    • export of prop types: https://github.com/peacechen/react-native-modal-selector/pull/173
    • add missing props https://github.com/peacechen/react-native-modal-selector/pull/161 (also upgrades SampleApp and converts it to TypeScript)
    • fix for renderItem bug (required prop by FlatList): https://github.com/peacechen/react-native-modal-selector/commit/539673ac7ebfd1360fc3abaf0c0fda9be5fb6c5e
    Source code(tar.gz)
    Source code(zip)

  • 2.0.8(Aug 5, 2021)

  • 2.0.7(Jul 12, 2021)

  • 2.0.6(Jul 7, 2021)

  • 2.0.5(Jul 7, 2021)

  • 2.0.4(Jul 5, 2021)

    • Fix prop types for web view in react native (#158) (#162)
    • Fix renderFlatlistOption() bug (should return renderOption result)
    • Readme: add listType prop
    • Add listType prop to support FlatList or ScrollView (#157)
    • Add eslint dev dependencies
    Source code(tar.gz)
    Source code(zip)

  • v2.0.3(Aug 20, 2020)

    • Add ability to pass extra props to Cancel button text in modal (#149)
    • Add prop optionsTestIDPrefix for test automation. Support testID key in data options (#148)
    Source code(tar.gz)
    Source code(zip)

  • v2.0.2(Jun 11, 2020)

  • v2.0.1(Apr 16, 2020)

  • v2.0.0(Mar 10, 2020)

    • Call onChange unconditionally to fix callback for iOS (#97) This may have a side effect of firing onChange twice on iOS.
    • Bump major version as a precaution for onChange changes for iOS (#139)
    Source code(tar.gz)
    Source code(zip)

  • v1.1.5(Mar 2, 2020)

  • v1.1.4(Feb 7, 2020)

  • v1.1.3(Feb 5, 2020)

  • v1.1.2(Oct 23, 2019)

  • v1.1.0(Aug 2, 2019)

  • v1.0.3(Mar 14, 2019)

  • v1.0.2(Feb 5, 2019)

  • v1.0.1(Jan 18, 2019)

    Add support for custom components in options list (#98). Update SampleApp to RN 0.57.8 . Add pass through props for Text components (#92).

    Source code(tar.gz)
    Source code(zip)

  • v1.0.0(Nov 7, 2018)

    Enhancement: Improved accessibility (9cdf7c326d3c93b041d80ba39721f6b3b09fa017):

    • Add more accessibility props: cancelButtonAccessible, scrollViewAccessible, listItemAccessible, openButtonContainerAccessible.
    • Updated docs for accessibility. Also fixed a problem with android when open the list, the first item should be focused now.

    BREAKING:

    • Removing accessibility-prop in favor of more granular control.
    Source code(tar.gz)
    Source code(zip)

  • v0.0.29(Sep 8, 2018)

  • v0.0.28(Aug 16, 2018)

    Enhancements

    • New prop (modalOpenerHitSlop) to adjust hit slop (the area that user can click) of touchable that opens modal (#64)
    • New prop (customSelector) to render a custom selector node (i.e. a replacement for the touchable that opens the modal) (#72)
    • New prop (closeOnChange) to determine if modal should close when user make a selection (#74)
    • New prop (selectedItemTextStyle) to style currently selected element (#75)

    Bugfixes

    • Accessibility fix (#73)
    Source code(tar.gz)
    Source code(zip)

  • v0.0.27(Apr 10, 2018)

    Add visible prop to control open/close state of modal (#46) Replace componentWillReceiveProps with componentDidUpdate (#60) Add modal opening/closing event callbacks (#59) Readme: Fix formatting of props and code example

    Source code(tar.gz)
    Source code(zip)

  • v0.0.26(Mar 29, 2018)

    • Added TouchableOpacity activeOpacity option via props (#53)
    • Key/Label extractors of data (#56)
    • New prop passThruProps, that enables support for custom props (e.g. testID) (#48)
    Source code(tar.gz)
    Source code(zip)

  • v0.0.25(Feb 21, 2018)

    childrenContainerStyle and touchableStyle props added (#51) Added accessibility labels (#49) Use arrow instead of bind (#40) Add cancelContainerStyle prop to Readme

    Source code(tar.gz)
    Source code(zip)

  • v0.0.24(Nov 30, 2017)

  • 0.0.23(Nov 25, 2017)

    Bugfix

    In v0.0.22 onDismiss-prop was used for both Android and iOS running RN >= 0.50, but only iOS supports this (76bf77c2278fbeeb35d262631098ede6fc9afbf1)

    Source code(tar.gz)
    Source code(zip)

  • 0.0.22(Nov 23, 2017)

    Enhancements

    • Fix onChange when modal closes (only for RN >= 0.50) (ccb43233c552821afa8ad16cc7d4f28143fdfc65)

    • Removed border on last element in list (bc5bec3ab0dbbba91cb4bc8fc2d3340930b80884)

    Source code(tar.gz)
    Source code(zip)
Owner
Peace
Peace
GitHub
A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.

react-native-webbrowser A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly customizable. Cur

Dan 196 Nov 23, 2022
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

Vivek Verma 82 Dec 20, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 96 Jan 2, 2023
A react-native dropdown/picker/selector component for both Android & iOS.

react-native-modal-dropdown A react-native dropdown/picker/selector component for both Android & iOS. Features Pure JS. Compatible with both iOS and A

Rex Rao 1.2k Jan 1, 2023
React Native Date Picker is an inline datepicker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's written with native code to achieve the best possible look, feel and performance.

React Native Date Picker This is a React Native Date Picker with following main features: ?? Supporting iOS and Android ?? 3 different modes: Time, Da

Henning Hall 1.6k Jan 3, 2023
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Yu Zheng (Sam) 308 Jan 1, 2023
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

Saurav Gupta 180 Jan 2, 2023
A cross-platform (iOS / Android) single and multiple-choice React Native component.

react-native-multiple-choice A cross-platform (iOS / Android) single and multiple-choice React Native component. Install npm i react-native-multiple-c

Dan 67 Sep 24, 2022
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 1000 Jan 9, 2023
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Kalon.Tech 336 Dec 15, 2022
React Native template for a quick start with React Navigation5 and TypeScript. It's cross-platform runs on Android, iOS, and the web.

对此项目的规划 出于兴趣把自己做 android、ios 开发过程中经验积累沉淀一下，此工程架构会定期更新升级依赖到最新版本，并不断的积累 App 中常用组件和基础页面功能，也会不断优化代码组织架构 此项目对以下情形会有帮助 想用前端技术做 app 开发却无从下手 想在项目中运用 typescrip

Benson 6 Dec 4, 2022
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Arafat Zahan 13 Nov 21, 2022
react-native-select is a highly customizable dropdownlist for android and ios.

rect-native-select react-native-select is a highly customizable dropdownlist for android and ios.

null 3 Dec 21, 2021
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

React Native Modals React Native Modals Library for iOS & Android. How to thank me ? Just click on ⭐️ button ?? Try it with Exponent BREAKING CHANGE A

Jack Lam 2.1k Dec 25, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 345 Nov 11, 2022
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 432 Dec 27, 2022
react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for andriod and iOS platforms.

react-native-select-dropdown react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for and

Adel Reda 177 Jan 4, 2023
Picker is a cross-platform UI component for selecting an item from a list of options.

@react-native-picker/picker Android iOS PickerIOS Windows MacOS Supported Versions @react-native-picker/picker react-native react-native-windows >= 2.

null 1.1k Jan 9, 2023
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

react-native-gesture-password A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure Ja

null 543 Dec 22, 2022