Platform Based Styles

Platform-based styles allow you to easily create styles that are specific to a particular platform for specific platforms, such as Web, iOS, or Android

function App() {
  const StyledButton = styled(Pressable, {
    bg: "$primary600",
    px: "$6",
    py: "$4",
    _web: {
      bg: "$amber500",
    },
    _ios: {
      bg: "$blue500",
    },
    _android: {
      bg: "$red500",
    },
  })
  return (
    <Provider config={config}>
      <StyledButton />
    </Provider>
  )
}

const StyledButton = styled(Pressable, {
  bg: "$primary600",
  px: "$6",
  py: "$4",
  _web: {
    bg: "$amber500",
  },
  _ios: {
    bg: "$blue500",
  },
  _android: {
    bg: "$red500",
  },
})

Although this feature is provided, it is not recommended to use it extensively.

Keep in mind that, while this approach allows for a more customized experience on each platform, this approach can make the codebase more complex and harder to maintain due to the need for additional logic to handle platform-specific props.

Thus, striking a balance between providing a customized experience and maintaining a manageable codebase is crucial.