Open modal selector onLongPress

[jadeirving9]

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.

[peacechen]

A new prop would need to be added to support onLongPress. It should be relatively straight-forward to add it in the same way as onPress. I will try to work on that soon. https://github.com/peacechen/react-native-modal-selector/blob/master/index.js#L322

If you can't wait, a more complicated option would be to use customSelector and set the visible prop accordingly. https://github.com/peacechen/react-native-modal-selector#props

[jadeirving9]

Hi, thanks for you quick reply :) How long do you think it would take to roll out onLongPress? I will try using customSelector but if you can roll it out soon I'd rather wait

[peacechen]

I have long-press working locally. Do you plan to use long-press exclusively, and not trigger on a normal press? The way it's written, enabling long-press will still allow it to respond to normal presses.

[jadeirving9]

No I plan to use both.

I am building an app for people with Parkinson's disease, so I'm trying to make it as user-friendly/accessible for users with a tremor as possble.

I have a toggle to turn on long presses for compatible components, I'll have an if statement that checks if the toggle is on, if it is the onPress function will be ignored and only onLongPress will work. If it is off, both onPress and onLongPress will work.

Hope this helps, and thanks again for your help :) really appreicate it!

[peacechen]

I made some adjustments to independently control short & long presses. Please refer to the documentation for the new props.

Would you mind validating this before I publish a new version? Use this in your package.json to pull directly from the repo:

dependencies: {
  "react-native-modal-selector": "https://github.com/peacechen/react-native-modal-selector.git",
}

[jadeirving9]

Hi there, I've changed my package.json and added the enableShortPress and enableLongPress props, if I set enabledShortPress to false and enableLongPress to true, the modal selector still shows on a short press.

Also just to let you know, the docs show two enableShortPress props - think you forgot to change the bottom one to enableLongPress.

[jadeirving9]

Just for more information, this is how I'm using the component:

<ModalSelector
  accessible={true}
  cancelButtonAccessibilityLabel={'Cancel Button'}
  enableShortPress={false}
  enableLongPress={true}
  data={[
    {
      key: index++,
      section: true,
      label: 'Sorting Function',
      accessibilityLabel: 'Choose a sorting function',
    },
    {
      key: index++,
      label: reverseChronological,
      accessibilityLabel: 'Tap here for creation date',
    },
    {
      key: index++,
      label: alphabetical,
      accessibilityLabel: 'Tap here for alphabetical by title',
    },
    {
      key: index++,
      label: categorial,
      accessibilityLabel: 'Tap here for category',
    },
  ]}
  initValue="Select a sorting function"
  onChange={value => {
    this.setState({ sortingFunction: value.label });
  }}
>
  <TouchableOpacity style={styles.sortButton}>
    <FontAwesomeIcon icon={SORT_ICON} color={ICON_COLOUR} size={30} />
  </TouchableOpacity>
</ModalSelector>

[peacechen]

Thanks for testing this out and noting the typo in the Readme. I tested this in the SampleApp by modifying the second ModalSelector:

                { /*
                    Wrapper mode: just wrap your existing component with ModalSelector.
                    When the user clicks on your element, the modal selector is shown.
                 */ }
                <ModalSelector
                    data={data}
                    initValue="Select something yummy!"
                    onChange={option => { this.setState({textInputValue:option.label}) }}
                    enableShortPress={false}
                    enableLongPress={true}
                >

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

                </ModalSelector>

... and it's working as expected. Did you run npm install after updating your package.json?

[jadeirving9]

Hi, I run npm install and re-run my project to test.

The only real difference I could see was I'm using a TouchableOpacity component instead of TextInput. So I copied the TextInput component and it still doesn't work.

I changed the dependency in my package.json to: "react-native-modal-selector": "https://github.com/peacechen/react-native-modal-selector.git", ran npm install and react-native run-android. Then added the enableShortPress and enableLongPress props to the ModalSelector component as I've shown previously. Have I done anything wrong?

[jadeirving9]

Hi, just an update. I produced an .apk to test some of the features of my app and it seems to work on my device but not on the emulator (which is strange)

[peacechen]

It sounds like the metro bundler has cached the old version of the library. Instructions for clearing the cache: https://medium.com/@abhisheknalwaya/how-to-clear-react-native-cache-c435c258834e

This may be more recent. See the resetCache option: https://facebook.github.io/metro/docs/en/configuration

[jadeirving9]

I think that was the issue. Seems to be working fine thanks. Should I leave the package.json as it is?

[peacechen]

You can continue to pull directly from this repo in your package.json. There's a small risk of a breaking change in the future. I'll publish a new version shortly, after which you can point your package.json back to npm.