Platform Specific

We can provide platform specific styles in the sx prop of the component. The sx prop takes an object with _ios, _android and _web specific styles.

<Box justifyContent="center" alignItems="center" h="100%">
  <Box alignItems="center">
    <Button
      sx={{
        _ios: { bg: "$red500" },
        _web: { bg: "$green500" },
        _android: { bg: "$yellow500" },
      }}
    >
      <ButtonText>Button</ButtonText>
    </Button>
  </Box>
</Box>

Expo snack link for above example is provided here.

Edit this page on GitHub