-
Notifications
You must be signed in to change notification settings - Fork 41
-
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; }
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
🚀 1