React Native StyleSheet Generator

StyleSheet.create() is a React Native API that creates an optimized style object. It validates your styles at development time and optimizes them for performance by converting the style object to a native representation. Styles defined this way are referenced by ID rather than serialized as objects, reducing bridge communication overhead compared to inline styles.

React Native styles are JavaScript objects, not CSS strings. Property names use camelCase (backgroundColor instead of background-color). Numeric values don't have units — they're device-independent pixels (dp) by default. Not all CSS properties are supported, and some work differently. For example, flexbox works slightly differently: flexDirection defaults to 'column' instead of 'row'.

In React Native, flex behaves like CSS's flex-grow when positive — it makes the component fill available space proportionally. flexGrow explicitly controls how a component grows to fill space. flexShrink controls shrinking. flexBasis sets the initial size before grow/shrink. A flex: 1 on a component inside a flex container will make it take all remaining space.

On iOS, use shadowColor, shadowOffset (with width and height), shadowOpacity, and shadowRadius. On Android, use elevation (a single number that controls depth and shadow). For cross-platform shadows, set both: iOS uses the shadow* properties and Android uses elevation. The react-native community library @react-native-community/shadow provides unified shadow support.

React Native uses density-independent pixels (dp/pt) by default — numeric values without unit strings. On iOS, 1 dp = 1 point (which may be 2 or 3 physical pixels on Retina displays). On Android, 1 dp = 1 density-independent pixel. You can use the Dimensions API or useWindowDimensions hook to get the screen size in dp and calculate percentages manually.

Yes, React Native supports percentage strings for width, height, margin, and padding: '50%', '100%', etc. However, they are relative to the parent container (or screen for top-level views), not the viewport. For responsive layouts, consider using the Dimensions API or Flexbox instead of fixed percentages.