React Native styling uses JavaScript objects with camelCase properties instead of CSS syntax. There's no inheritance of styles like CSS, no cascading, and no selectors. Units are unitless numbers (no px, em, etc.), and not all CSS properties are supported.
Orientation changes require responsive layouts using flex, Dimensions API updates handling, and potentially different layouts for portrait/landscape. useWindowDimensions hook helps track dimensions, and specific orientation styles may be needed.
Screen density handling involves using density-independent pixels, proper image asset management (including @2x, @3x), and responsive design practices. Consider platform-specific density differences and testing on various devices.
Style performance considerations include using StyleSheet.create, avoiding inline styles, minimizing style calculations in render, proper use of flex for layouts, and implementing efficient dynamic styling strategies.
Custom graphics require SVG implementation, canvas-like solutions, or native modules. Consider performance implications, platform differences, and proper integration with React Native's layout system.
Micro-interactions require fine-tuned animations, proper gesture handling, and efficient state management. Consider performance, user feedback, and proper integration with the overall UX.
SafeAreaView is used to handle safe area insets (notches, status bars) on iOS devices. It automatically adds padding to avoid overlay with system UI elements. It's essential for proper layout on modern iOS devices with notches or home indicators.
Text styling in React Native is not inherited by default. Each Text component needs its own style. Text-specific properties like fontSize, fontWeight, lineHeight are available. Custom fonts require platform-specific setup.
Dynamic styling can be implemented using style arrays, conditional styles in objects, or dynamic style generation functions. StyleSheet.create should be used outside component render for performance. Consider memoization for complex style calculations.
KeyboardAvoidingView component with appropriate behavior prop ('height', 'position', 'padding') handles keyboard overlap. Platform-specific adjustments may be needed. Consider scroll view integration and input accessibility.
Design systems implementation involves creating reusable components, centralized theme management, consistent spacing/typography systems, and proper component composition. Consider maintenance, scalability, and team collaboration.
Advanced responsive layouts involve dynamic layout switching, complex grid systems, proper breakpoint management, and orientation handling. Consider performance, maintainability, and testing across different devices.
Custom transitions require understanding of the Animated API, proper timing functions, layout measurement, and platform-specific considerations. Consider performance, gesture integration, and proper cleanup.
React Native uses Flexbox for layout but with some differences from web. The default flexDirection is 'column' instead of 'row'. Flexbox properties like flex, flexDirection, justifyContent, and alignItems are used to create flexible layouts that work across different screen sizes.
Dimensions can be handled using fixed numbers (density-independent pixels), percentages, or the Dimensions API. The useWindowDimensions hook provides responsive dimensions. flex properties are commonly used for dynamic sizing.
Responsive layouts are created using flexbox, percentage values, the Dimensions API, and useWindowDimensions hook. Platform.select can be used for platform-specific layouts, and dynamic styling based on screen size helps ensure proper display across devices.
Style arrays allow multiple styles to be applied to a component: [styles.container, styles.modified]. Later styles override earlier ones. This is useful for conditional styling and style composition. Arrays can include both StyleSheet styles and inline style objects.
Images can be sized using width/height properties or resizeMode prop ('contain', 'cover', 'stretch', 'center'). For network images, dimensions must be specified explicitly. Image sizing should consider aspect ratio and responsive layout needs.
Custom fonts require platform-specific setup: iOS needs font files added to the Xcode project and Info.plist, Android needs fonts in android/app/src/main/assets/fonts. React Native config needs updating, and linking may be required. Font names might differ between platforms.
Grid layouts can be implemented using FlatList with numColumns, flexbox with flex-wrap, or custom grid components. Consider performance for large grids, responsive behavior, and proper item sizing calculations.
Animated layouts use LayoutAnimation or Animated API. LayoutAnimation provides simple animations for layout changes. Complex animations might require Animated API with proper measurement and layout calculation.
Custom layout engines require understanding of native modules, layout calculation systems, and proper integration with React Native. Consider performance implications, maintenance complexity, and cross-platform support.
StyleSheet is a React Native API for creating and managing styles. It provides performance optimizations by validating styles at compile time, converting them to atomic IDs, and preventing new object creation on rerenders. It also provides better error checking and auto-completion support.
Width and height set fixed dimensions, while flex determines how components grow/shrink within available space. Flex is preferred for responsive layouts as it adapts to different screen sizes. Fixed dimensions should be used sparingly.
Shadows require different implementations: iOS uses shadow* properties, Android uses elevation. Platform-specific shadow styles are needed for consistent appearance. Consider using libraries for cross-platform shadow implementation.
RTL support requires proper use of start/end instead of left/right, handling text alignment, and considering layout direction. Use I18nManager for RTL control, and test layouts in both directions.
Complex layouts require combination of flexbox, absolute positioning, proper nesting, and possibly custom native components. Consider performance implications, maintainability, and cross-platform consistency.
Complex interactions require combination of Animated API, PanResponder, proper layout measurement, and performance optimization. Consider native driver usage, gesture handling, and proper cleanup of animations.
