react-native-segmented-control / segmented-control

React Native SegmentedControl library

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Segmented Control requires width

jbrodriguez opened this issue · comments

Bug

segmented-control doesn't show up with the following code

    <View style={{ flex: 1 }}>
      <SegmentedControl
        values={['One', Two 'Three', 'Four']}
      />
      <ScrollView
        style={{
          marginTop: 30,
        }}
      ></ScrollView>
    </View>

I need to set a width on the parent for it to show up

const { width } = Dimensions.get('window')
    <View style={{ width: width * 0.90 }}>
      <SegmentedControl
        values={['One', Two 'Three', 'Four']}
      />
      <ScrollView
        style={{
          marginTop: 30,
        }}
      ></ScrollView>
    </View>

Environment info

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-3570K CPU @ 3.40GHz
    Memory: 45.08 MB / 16.00 GB
    Shell: 3.1.0 - /usr/local/bin/fish
  Binaries:
    Node: 13.13.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /Users/user/.rvm/gems/ruby-2.7.0/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.6 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Library version: 1.5.0

Steps To Reproduce

Please check code above

Describe what you expected to happen:

Segmented Control should appear without needing to set width on the parent view

Reproducible sample code

Please check above

it was an issue with alignItems: 'center' in a parent view 🤦‍♂️

it was an issue with alignItems: 'center' in a parent view 🤦‍♂️

Or justifyContent: 'center' depending on the flexDirection.