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

Last update: Apr 11, 2022

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.

GitHub

https://github.com/peacechen/react-native-modal-selector
Comments
  • 1. 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
                                                 })
                                               }} />)
    
    Reviewed by danielzzz at 2018-12-21 17:03
  • 2. 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

    Reviewed by JoseVf at 2019-02-25 19:09
  • 3. 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.

    Reviewed by ChangedLater at 2017-08-29 02:48
  • 4. 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

    Reviewed by scousino at 2021-08-05 16:49
  • 5. 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.

    Reviewed by jadeirving9 at 2020-02-28 18:30
  • 6. 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 :)

    Reviewed by laurentmichel at 2018-07-12 12:55
  • 7. 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.

    Reviewed by jessamp at 2018-09-17 18:37
  • 8. 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
    Reviewed by fabriziomoscon at 2017-08-18 00:04
  • 9. 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

    Reviewed by mehimanshupatil at 2020-11-28 08:46
  • 10. 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.

    Reviewed by mienaikoe at 2017-09-17 18:32
  • 11. 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

    Reviewed by kadir-akbulut at 2020-04-02 20:01
  • 12. 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 ?

    Reviewed by rpattcorner at 2022-02-04 19:21
  • 13. 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}

    Reviewed by mrtwebdesign at 2021-11-13 03:19
  • 14. 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', }, ...

    Reviewed by chrimoe at 2021-07-29 18:01
  • 15. Alert used inside of react-native-modal-selector is being hidden while Modal Closes

    After updating my react-native expo app to SDK 42 I am noticing that the alert used inside of react-native-modal-selector is being hidden immediately, before the user has time to act. This only occurs in iOS - not on Android. I am using version 2.0.7 of react-native-modal-selector.

    Specifically, I need the alert to remain open until the user has pushed one of the two buttons to make a selection. Right now if I navigate to a different tab I see that the alert is still open and visible, but within the tab where I first open the alert it disappears before the user has a chance to make a selection.

        <ModalSelector
          data={showSessionTypes(props.types)}
          onChange={async (option) => {
            if(
              RESTRICTED_SESSION_TYPES.includes(option.customKey) &&
              props.restrictedSessions.length > 0
            ) {
              Alert.alert(
                'Session already conducted',
                'Please ensure you are accessing the correct client.',
                [
                  {
                    text: 'OK',
                    onPress: () => {},
                    style: 'cancel',
                  },
                ],
                {cancelable: false},
              );
              return;
            }
        />
    

    NOTE: If I wrap the alert in a setTimeout the alert remains open/visible:

        setTimeout(() => {
           Alert.alert(
            'Session already conducted',
            'Please ensure you are accessing the correct client.',
             [
               {
                 text: 'Cancel',
                 onPress: () => {},
                 style: 'cancel',
               },
               {
                 text: 'Create Session',
                 onPress: async () => {
                   await createSession(option.customKey, props);
                 },
               },
             ],
             {cancelable: false},
           );
         }, 510);
    

    If this bug is unresolvable, is there an event I can wait for before loading the alert?

    Reviewed by Muirik at 2021-07-23 13:21
  • 16. Modal not displaying

    Hi

    Seem to have run into an issue when attempting to open modal selector (v2.0.3) as part of onPress function within react-native-elements List Item & Button (v2.0.0)

    Use case is as follows

    We have a List Item configured with a title that calls a function to open the modal

    title={this.renderWindDirectionSelect()}

    and also a button as part of rightIcon as per below

                    rightIcon: <Button
                        flex={.5}
                        title={value}
                        onPress={() => this.renderWindDirectionSelect()}
                        type="clear"
                        width='50%'
                    />
    

    When clicking on the list item the modal is displayed perfectly and updating the selected value updates the title of the button (value) perfectly as part of the function called renderWindDirectionSelect

    However clicking on the button doesn't display any modal at all, although I can see the function logging stuff out to console so I know its being called

    I considered updating elements but that just blew up the app with what looked to be some breaking changes.

    any ideas??

    Reviewed by markl-vesper at 2021-06-28 00:04
  • 17. Add prop for onCancel

    Add a prop that accepts a callback that will execute when the user presses the cancel button.

    Right now, I'm manually controlling the visibility of the ModalSelector, but I have no way to when the user has selected cancel other than onModalClose, but I can't use that because I'm manually controlling the visibility.

    Reviewed by scousino at 2020-10-30 18:59
A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.
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

Apr 5, 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.

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

Mar 23, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android
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

Apr 7, 2022
A react-native dropdown/picker/selector component for both Android & iOS.
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

May 8, 2022
react-native-wheel-picker ★190 - React native cross platform picker.
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

May 7, 2022
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.
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

May 5, 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.
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

May 17, 2022
A cross-platform (iOS / Android) single and multiple-choice React Native component.
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

Dec 4, 2021
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.
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

May 8, 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

May 13, 2022
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web
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

Apr 4, 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.

Dec 21, 2021
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

Apr 4, 2022
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.
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

May 10, 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

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

May 6, 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

May 11, 2022
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.
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

Apr 18, 2022
A Listview with a sidebar to jump to sections directly
A Listview with a sidebar to jump to sections directly

Based on johanneslumpe's react-native-selectablesectionlistview, thanks to him for the awesome component! 99% of this component was done by @johannesl

Apr 5, 2022