Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UISegmentedControl support #534

Closed
clayallsopp opened this issue Mar 31, 2015 · 4 comments
Closed

UISegmentedControl support #534

clayallsopp opened this issue Mar 31, 2015 · 4 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@clayallsopp
Copy link
Contributor

Hey there, any thoughts on UISegmentedControl support?

I suppose it would look like this:

<SegmentedControlIOS
  values={["One", "Two"]}
  selectedValue={}
  momentary={false}
  onValueChange={() =>}
  tintColor={}
  // TODO: how to handle image items?
/>

or this better left to an add-on/plugin sort of thing?

@clayallsopp
Copy link
Contributor Author

I started working on a diff, seems pretty doable (if the project wants it).

is there precedent/example of how to handle default sizing of an element that usually sizes itself? The segmented control usually sizes its width to fit its items, plus whatever offsets you set (but it can be overriden), but it seems like some default styles (like a switch) hard code the width

Thanks!

@joshaber
Copy link

@vjeux
Copy link
Contributor

vjeux commented Mar 31, 2015

Internally, we reimplemented the segmented control in pure js. We found that it was easier than to wrap the native implementation.

@malkomalko
Copy link

I found this post http://qiita.com/laiso/items/5c5ef9158a37726d109d. It's not in english but you should be able to tell what's going on.

rozele referenced this issue in microsoft/react-native-windows May 25, 2016
Summary:
Fixes #534:

![screen shot 2015-03-31 at 7 52 10 pm](https://cloud.githubusercontent.com/assets/153704/6934038/742ddd34-d7e3-11e4-8f55-3eb7d9d3f1cd.png)

```jsx
<SegmentedControlIOS
  tintColor="#ff0000"
  values={['One', 'Two', 'Three', 'Four']}
  selectedtIndex={0}
  momentary={false}
  enabled={true}
  onValueChange={ (value) => console.log(value) } />
```

This only supports string-based segments, not images. Also doesn't support full customization (no separator images etc); I figure this is a good MVP to lock-down a basic API

I also included a snapshot test case, but the images keep coming out funky. When I look at the sim, I see that the text labels show up for the selected segment, but the snapshot keeps coming out with no text on those segments. I tried forcing a delay, but same result. Is that explainable?

Obviously happy to change anything about the API, code-style nitpicks, etc
Closes facebook/react-native#564
Github Author: Clay Allsopp <clay.allsopp@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants