React Native StyleSheet Converter

React Native uses JavaScript objects instead of CSS strings. Property names are camelCase (backgroundColor, not background-color). Values are unitless numbers for dimensions (React Native uses density-independent pixels). Not all CSS properties are supported — gradients, box-shadow, and pseudo-classes require workarounds. Flexbox defaults differ: flexDirection is 'column' by default instead of 'row'.

Unsupported: box-shadow (use elevation on Android, shadow* props on iOS), linear-gradient (use LinearGradient component), text-shadow has limited support, float is not supported, display values other than flex/none are not supported, pseudo-classes (:hover, :focus) are not supported, media queries are not supported (use Dimensions API or useWindowDimensions instead).

In React Native, numeric values without units are treated as density-independent pixels (dp). A CSS value of '16px' becomes 16 (the number, no string). Percentage strings like '50%' are supported for width, height, margin, and padding. Never use 'px', 'em', 'rem' units — only plain numbers or percentage strings.

For iOS: use shadowColor, shadowOffset ({ width: 0, height: 2 }), shadowOpacity, shadowRadius. For Android: use elevation (a single number). The converter outputs both sets of properties. For a cross-platform solution, consider the react-native-shadow-2 library or use Platform.select() to conditionally apply iOS vs Android styles.

StyleSheet.create() wraps your style object and provides validation in development mode. It also enables performance optimizations by caching styles and reducing bridge communication. Always use StyleSheet.create() over plain JavaScript objects for component styles — it's best practice in React Native.