search

peacechen / react-native-modal-selector

A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
MIT License
369 stars 129 forks source link

Display items inline #146

Closed lateefbeats closed 4 years ago

lateefbeats commented 4 years ago

Is it possible to display all options inline instead of vertically? I tried passing 'flex-direction:'row'' etc to all the various style props but nothing worked. I'm trying to target the TouchableOpacity element but none of the style props seem to effect that.

peacechen commented 4 years ago

The contents are in a ScrollView and there's not yet a prop to pass options to it. https://github.com/peacechen/react-native-modal-selector/blob/master/index.js#L272

A new prop such as scrollViewProps could be added to pass any props to it. In your case it would be the horizontal prop. https://reactnative.dev/docs/scrollview#horizontal

This is a community supported library and your contributions are welcome. Please submit a PR and I'll review promptly.

lateefbeats commented 4 years ago

Ok thanks, I'll see what I can do when I have a moment would be happy to help

peacechen commented 4 years ago

scrollViewPassThruProps has been published in 2.0.2.

Example:

    <ModalSelector
        ...
        scrollViewPassThruProps={{horizontal: true, showsHorizontalScrollIndicator: false}}
    />

Note that RNMS sets the the options container to flexDirection: row if if detects the horizontal prop. That would be the sensible use case, but let me know if you need it set differently.