React Native Styled System

const Sample = () => {
  const theme = useTheme();
  const { width } = useWindowDimensions();

  const padding = width >= 768 ? 24
    : width >= 480 ? 16 : 8;
  const direction = width >= 480
    ? 'row' : 'column';

  return (
    <View style={{
      backgroundColor: theme.colors.red500,
      borderRadius: theme.radii.lg,
      padding,
      flexDirection: direction,
    }}>
      <Text style={[
        theme.typography.h1,
        { marginTop: theme.spaces[4] },
      ]}>
        React Native
      </Text>
    </View>
  );
};

const Sample = () => {
  return (
    <Box
      bg={'red.500'}
      radius={'lg'}
      p={[2, 4, 6]}
      flexDirection={['column', 'row']}
    >
      <Txt t={'h1'} mt={4}>
        React Native
      </Txt>
    </Box>
  );
};