Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

[feature] Custom platform selectors to target OS versions (e.g. iOS 18 v.s. iOS 26) #563

Tehnix started this conversation in Ideas
Discussion options

TL;DR: It would be awesome to be able to define custom platform selectors e.g. ios18:p-2 or tablet:p-8 and such.

Apologies if this has already been discussed, I didn't manage to find any issues or PRs around it at least.

Uniwind currently supports some nice platform selectors (https://docs.uniwind.dev/api/platform-select) which are handy for platform differences.

It would be very nice to be able to define your own custom platform selectors somehow, based on information available in Platform from react-native or Device form something like expo-device.

This would allow more granular targeting of specific versions or device types.

Context

I'm right now trying to make our App work across iOS 18 and iOS 26 which feature significant differences because of the introduction of Liquid Glass which behaves different in many cases, and requires quite a few workarounds to arrive to something similar looking on iOS 18 where it's not supported.

Right now I'm sprinkling a bunch of specific version checks around in my classNames to handle set different sizes or padding based on the iOS version.

I have a bit of a similar thing going on as well to detect tablet sizing.

Some of the helpers I've defined so far:

import * as Device from 'expo-device';
import { Platform } from 'react-native';
/**
 * Minimum window width (dp) to treat layout as tablet-sized when device type is unknown.
 */
const TABLET_MIN_LAYOUT_WIDTH = 600;
/**
 * Whether the app should use tablet-style layout (e.g. side-anchored sheets on iPad).
 */
export function isTabletLayout(windowWidth: number): boolean {
 if (Platform.OS === 'ios' && Platform.isPad) {
 return true;
 }
 if (Device.deviceType === Device.DeviceType.TABLET) {
 return true;
 }
 return windowWidth >= TABLET_MIN_LAYOUT_WIDTH;
}
/**
 * Get the iOS version.
 */
export function getIOSVersion(): number {
 if (Platform.OS !== 'ios') {
 return 0;
 }
 return parseInt(Platform.Version as string, 10);
}
/**
 * Check if the iOS version is 26 or higher.
 */
export function isIOS26OrLater(): boolean {
 return getIOSVersion() >= 26;
}
You must be logged in to vote

Replies: 1 comment

Comment options

Thanks for the detailed write-up and the examples.

We definitely don't want to add built-in platform + version selectors like ios18: or ios26:. I think that could get out of hand pretty quickly and would be hard to maintain in the long run.

That said, being able to define your own selectors sounds like a fun idea. I can see how something like custom runtime selectors for device type, OS version, tablet layout, or app-specific checks could be useful.

No promises for now, but maybe it's something we can explore in the future.

For now, I think the best approach is to keep using your own helpers together with a cn utility and conditionally apply the classes there.

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Ideas
Labels
None yet
2 participants

AltStyle によって変換されたページ (->オリジナル) /