What is the best way to have Platform specific design code in a StyleSheet?

[dccarmo]

By having Platform logic in the StyleSheet:

const styles = StyleSheet.create((theme) => ({
  container: {
    marginHorizontal: 20,
    padding: 20,
    ...Platform.select<UnistylesValues>({
      ios: {
        borderRadius: 25,
      },
      android: {
        borderRadius: 10,
      },
    }),
  },
}));

It returns me an error when assigning container to a component:

<View style={styles.container} />

No overload matches this call.
  Overload 1 of 2, '(props: ViewProps): View', gave the following error.
    Type '{ backfaceVisibility?: "visible" | "hidden" | { [x: symbol]: "visible" | "hidden" | undefined; landscape?: "visible" | "hidden" | undefined; portrait?: "visible" | "hidden" | undefined; ... 4 more ...; xl?: "visible" | ... 1 more ... | undefined; } | undefined; ... 204 more ...; filter?: string | ... 1 more ... | un...' is not assignable to type 'StyleProp<ViewStyle>'.
      Type '{ backfaceVisibility?: "visible" | "hidden" | { [x: symbol]: "visible" | "hidden" | undefined; landscape?: "visible" | "hidden" | undefined; portrait?: "visible" | "hidden" | undefined; ... 4 more ...; xl?: "visible" | ... 1 more ... | undefined; } | undefined; ... 204 more ...; filter?: string | ... 1 more ... | un...' is not assignable to type 'ViewStyle'.
        Types of property 'backfaceVisibility' are incompatible.
          Type '"visible" | "hidden" | { [x: symbol]: "visible" | "hidden" | undefined; landscape?: "visible" | "hidden" | undefined; portrait?: "visible" | "hidden" | undefined; xs?: "visible" | "hidden" | undefined; sm?: "visible" | ... 1 more ... | undefined; md?: "visible" | ... 1 more ... | undefined; lg?: "visible" | ... 1 mo...' is not assignable to type '"visible" | "hidden" | undefined'.
            Type '{ [x: symbol]: "visible" | "hidden" | undefined; landscape?: "visible" | "hidden" | undefined; portrait?: "visible" | "hidden" | undefined; xs?: "visible" | "hidden" | undefined; sm?: "visible" | ... 1 more ... | undefined; md?: "visible" | ... 1 more ... | undefined; lg?: "visible" | ... 1 more ... | undefined; xl?...' is not assignable to type '"visible" | "hidden" | undefined'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ backfaceVisibility?: "visible" | "hidden" | { [x: symbol]: "visible" | "hidden" | undefined; landscape?: "visible" | "hidden" | undefined; portrait?: "visible" | "hidden" | undefined; ... 4 more ...; xl?: "visible" | ... 1 more ... | undefined; } | undefined; ... 204 more ...; filter?: string | ... 1 more ... | un...' is not assignable to type 'StyleProp<ViewStyle>'.
      Type '{ backfaceVisibility?: "visible" | "hidden" | { [x: symbol]: "visible" | "hidden" | undefined; landscape?: "visible" | "hidden" | undefined; portrait?: "visible" | "hidden" | undefined; ... 4 more ...; xl?: "visible" | ... 1 more ... | undefined; } | undefined; ... 204 more ...; filter?: string | ... 1 more ... | un...' is not assignable to type 'ViewStyle'.
        Types of property 'backfaceVisibility' are incompatible.
          Type '"visible" | "hidden" | { [x: symbol]: "visible" | "hidden" | undefined; landscape?: "visible" | "hidden" | undefined; portrait?: "visible" | "hidden" | undefined; xs?: "visible" | "hidden" | undefined; sm?: "visible" | ... 1 more ... | undefined; md?: "visible" | ... 1 more ... | undefined; lg?: "visible" | ... 1 mo...' is not assignable to type '"visible" | "hidden" | undefined'.
            Type '{ [x: symbol]: "visible" | "hidden" | undefined; landscape?: "visible" | "hidden" | undefined; portrait?: "visible" | "hidden" | undefined; xs?: "visible" | "hidden" | undefined; sm?: "visible" | ... 1 more ... | undefined; md?: "visible" | ... 1 more ... | undefined; lg?: "visible" | ... 1 more ... | undefined; xl?...' is not assignable to type '"visible" | "hidden" | undefined'.ts(2769)
ViewPropTypes.d.ts(212, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'
ViewPropTypes.d.ts(212, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'

Why is that the case? How can I type Platform.select?

Is there a recommended approach for having platform specific logic when creating styles?

[jpudysz]

use it without type cast:

const styles = StyleSheet.create((theme) => ({
      box: {
        marginHorizontal: 20,
        padding: 20,
        width: '100%',
        height: 100,
        backgroundColor: 'green',
        ...Platform.select({
            ios: {
                borderRadius: 25,
            },
            android: {
                borderRadius: 10,
            },
        }),
    },
}));

[dccarmo]

But then you don't get type completion.

Outside of Platform.select:

Inside of Platform.select:

[jpudysz]

...Platform.select({
    ios: {
        paddingVertical: 10,
    },
    android: {
        marignBottom: 20,
    },
} satisfies Partial<Record<PlatformOSType, ViewStyle>>)

You can force the type as Unistyles infers eveyrthing. You can satisfy the type.

[dccarmo]

Nice, thanks for the suggestion. We could replace ViewStyle for UnistylesValues there to get support to all the goodness that Unistyles provides.