jutsu-react-native:react-native-styling

StyleSheet.create() optimizes styles for React Native by creating immutable style objects. Define styles as a JavaScript object passed to StyleSheet.create(), then apply them to components via the style prop. This approach improves performance and catches style errors at compile time.

Use Flexbox properties (flex, flexDirection, justifyContent, alignItems) for layout structure, and the Dimensions API to detect screen size and device orientation. Combine with Platform.select() to apply iOS or Android-specific styles, and design tokens to scale typography and spacing across phone and tablet layouts.

Yes, Platform.select() lets you specify different styles for iOS and Android within a single stylesheet. Pass an object with ios and android keys to return platform-specific values. This enables you to handle UI differences between platforms without duplicating style definitions.

Use theme context with design tokens—centralized variables for colors, spacing, and typography. Pass the theme through React Context, reference tokens in StyleSheet definitions, and update styles when theme changes. This creates maintainable, reusable, and scalable styling across your app.

StyleSheet.create() creates immutable references that improve performance by avoiding style object recreation on every render. It enables style validation at runtime and optimizes how styles are sent to the native layer, resulting in faster rendering and smaller memory footprint.

Combine Flexbox properties with Dimensions.get() to detect screen dimensions and adapt flex values, padding, and layout direction. Use Platform.select() to apply tablet-optimized column layouts or phone-specific adjustments. Design tokens ensure consistent spacing and sizing across all screen configurations.