Customize the style of the container

[hanayashiki]

Hi, I finally found this work to allow me select multiple columns at one time. Is it possible for us to decide the style of the container (position, width, etc), instead of always staying at the bottom of screen? Thank you

[adammcarth]

Hey there.

The only positional customisation at this time is the size prop, which is a floating point between 0-1 representing how tall the picker modal is on the user's screen. It defaults to 0.45 (45%).

There are many other props for customising the visual style of the picker itself however (background, border and text colours).

Could you give me a more specific example of what you're trying to do with the position?

[hanayashiki]

Thank you for your kind response.
I have seen that prop. I mean a modal multiple segment picker is very useful, but users may like to customize the container (thus the width and the height of the picker area) for design purpose. So I'd suggest if you could introduce two exported components: the bare multi-column picker as the core and the picker with a modal container as currently provided.

[adammcarth]

That's a really good idea! Perhaps that second export could look something like:

import SegmentedPicker from 'react-native-segmented-picker';

<View style={{ width: '100%', height: 300 }}>
  <SegmentedPicker.Naked
    options={...}
  />
</View>

There'd be a little bit of refactoring required to achieve this though, so I'll add it to the roadmap and keep you posted on progress in this thread 👍

[adammcarth]

By the way - if we went with replacing the default export to the "naked" version of the picker as you suggested, I'd have to bump the package to v3.0.0. That's also an option though.

I guess that could look something like:

import SegmentedPicker from 'react-native-segmented-picker';

<SegmentedPicker.Modal
  visible
  options={...}
/>

[hanayashiki]

Looking forward to that!

[adammcarth]

I might re-open this actually! Otherwise I'll forget it needs doing 😄

[ninjz]

That's a really good idea! Perhaps that second export could look something like:

import SegmentedPicker from 'react-native-segmented-picker';

<View style={{ width: '100%', height: 300 }}>
  <SegmentedPicker.Naked
    options={...}
  />
</View>

There'd be a little bit of refactoring required to achieve this though, so I'll add it to the roadmap and keep you posted on progress in this thread 👍

This would be a great addition since I already have a component that I use to open up bottom sheets. Any thoughts on when this will be released?