search

richardvclam / react-native-resegmented-control

iOS 13+ styled segmented control for React Native
58 stars 6 forks source link

It would be nice to have sliderStyle props #6

Open firede opened 4 years ago

firede commented 4 years ago

image (react-native-resegmented-control vs react-native-community/segmented-control)

Slider backgroundColor is hardcoded to white, it's difficult to customize the theme in dark mode. It would be nice to have sliderStyle(or sliderBackgroundColor) props to override it.

richardvclam commented 4 years ago

Published v2.3.0 which includes sliderStyle.

Let me know if this works for you!

firede commented 4 years ago

Thanks, it works!

But the last Segment looks missing some padding:

richardvclam commented 4 years ago

Can you share a screenshot or the code to replicate?

firede commented 4 years ago

Sorry, the screenshot I uploaded earlier is broken...

SegmentedControl

Code:

const styles = StyleSheet.create({
  segmentedControl: {
    width: 140,
    backgroundColor: "rgba(255,255,255,.1)",
  },
  segmentedSlider: {
    backgroundColor: "rgba(255,255,255,.25)",
  },
})

// ...

<SegmentedControl
  activeTintColor="#fff"
  inactiveTintColor="#fff"
  initialSelectedName="HEX"
  style={styles.segmentedControl}
  sliderStyle={styles.segmentedSlider}>
  <Segment name="HEX" content="HEX" />
  <Segment name="HSLuv" content="HSLuv" />
</SegmentedControl>
richardvclam commented 4 years ago

Ah, thanks for reporting this!

I'll take a look and see if some tweaking can fix this 😄