Skip to content

[ui][ios] - Add label support in Slider and match API with SwiftUI#41616

Merged
intergalacticspacehighway merged 12 commits intomainfrom
slider-api
Dec 15, 2025
Merged

[ui][ios] - Add label support in Slider and match API with SwiftUI#41616
intergalacticspacehighway merged 12 commits intomainfrom
slider-api

Conversation

@intergalacticspacehighway
Copy link
Copy Markdown
Contributor

@intergalacticspacehighway intergalacticspacehighway commented Dec 13, 2025

Why

Matches API with SwiftUI and adds label, minimumValueLabel, maximumValueLabel support.

How

  • Uses separate constructors for Slider, this removes need for default values in step/min/max and some custom handling code for steps.
  • Removes color prop, tint modifier can be used to color the slider.
  • Kept the min/max prop as there is no better Range alternative in JS. Array might not make much sense since Range only has upper and lower bounds.
  • Updated docs for Slider

Test Plan

Improved example UI screen, tested all scenarios.
https://github.com/user-attachments/assets/f3502758-3242-468b-b764-920b40c43914

Checklist

@github-actions
Copy link
Copy Markdown
Contributor

Subscribed to pull request

File Patterns Mentions
docs/** @amandeepmittal
packages/expo-ui/** @aleqsio, @behenate, @douglowder

Generated by CodeMention

@expo-bot expo-bot added the bot: suggestions ExpoBot has some suggestions label Dec 13, 2025
@expo-bot
Copy link
Copy Markdown
Collaborator

expo-bot commented Dec 14, 2025

The Pull Request introduced fingerprint changes against the base commit: 3afa835

Fingerprint diff
[
  {
    "op": "changed",
    "beforeSource": {
      "type": "dir",
      "filePath": "../../packages/expo-ui/ios",
      "reasons": [
        "expoAutolinkingIos"
      ],
      "hash": "7c9a5e136025514a785622ba170fa627c594eb27"
    },
    "afterSource": {
      "type": "dir",
      "filePath": "../../packages/expo-ui/ios",
      "reasons": [
        "expoAutolinkingIos"
      ],
      "hash": "cd35c3281d0996f9152955f937c9295467960df5"
    }
  }
]

Generated by PR labeler 🤖

@expo-bot expo-bot removed the bot: suggestions ExpoBot has some suggestions label Dec 15, 2025
@expo-bot expo-bot added the bot: passed checks ExpoBot has nothing to complain about label Dec 15, 2025
Copy link
Copy Markdown
Contributor

@Kudo Kudo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please fix NCL ci error before merge

import { Host, Slider } from '@expo/ui/swift-ui';

<Host style={{ minHeight: 60 }}>
## Basic slider
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## Basic slider
## Usage
### Basic slider

Similar suggestion here: #41628 (files).


```tsx LabeledSliderExample.tsx
import { useState } from 'react';
import { Host, Slider, Text } from '@expo/ui/swift-ui';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { Host, Slider, Text } from '@expo/ui/swift-ui';
import { Host, Slider } from '@expo/ui/swift-ui';
import { Text } from 'react-native';

I suppose the Text component is imported from react-native here?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as popover's. we need it from swift-ui. will add docs for this next!

@intergalacticspacehighway intergalacticspacehighway merged commit 9204ae7 into main Dec 15, 2025
14 checks passed
@intergalacticspacehighway intergalacticspacehighway deleted the slider-api branch December 15, 2025 16:44
aleqsio pushed a commit that referenced this pull request Dec 22, 2025
…41616)

# Why

Matches API with SwiftUI and adds `label`, `minimumValueLabel`,
`maximumValueLabel` support.
<!--
Please describe the motivation for this PR, and link to relevant GitHub
issues, forums posts, or feature requests.
-->

# How
- Uses separate constructors for Slider, this removes need for default
values in step/min/max and some custom handling code for steps.
- Removes color prop, `tint` modifier can be used to color the slider.
- Kept the min/max prop as there is no better Range alternative in JS.
Array might not make much sense since `Range` only has upper and lower
bounds.
- Updated docs for Slider

<!--
How did you build this feature or fix this bug and why?
-->

# Test Plan

Improved example UI screen, tested all scenarios.

https://github.com/user-attachments/assets/f3502758-3242-468b-b764-920b40c43914

<!--
Please describe how you tested this change and how a reviewer could
reproduce your test, especially if this PR does not include automated
tests! If possible, please also provide terminal output and/or
screenshots demonstrating your test/reproduction.
-->

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
-->

- [x] I added a `changelog.md` entry and rebuilt the package sources
according to [this short
guide](https://github.com/expo/expo/blob/main/CONTRIBUTING.md#-before-submitting)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)

---------

Co-authored-by: Aman Mittal <amandeepmittal@live.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bot: fingerprint changed bot: passed checks ExpoBot has nothing to complain about

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants