react-native-web-styling

# React Native Web - Styling

Comprehensive styling patterns for React Native Web, including responsive design, theming, and platform-specific styles.

## Key Concepts

### StyleSheet API

Use `StyleSheet.create()` for optimized styles:

```typescript
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  text: {
    fontSize: 16,
    color: '#333',
    lineHeight: 24,
  },
});
```

### Flexbox Layout

React Native uses Flexbox for layout (defaults differ from web):

```typescript
const styles = StyleSheet.create({
  // Default flexDirection is 'column' (not 'row' like web)
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
});
```

### Platform-Specific Styles

Use `Platform.select()` for different styles per platform:

```typescript
import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      web: {
        maxWidth: 1200,
        marginHorizontal: 'auto',
      },
      native: {
        paddingHorizontal: 16,
      },
    }),
  },
});
```

## Best Practices

### Responsive Design

✅ Use percentage-based widths and flexbox:

```typescript
const styles = StyleSheet.create({
  container: {
    width: '100%',
    maxWidth: 1200,
  },
  column: {
    flex: 1,
    minWidth: 300,
  },
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});
```

### Media Queries (Web)

✅ Use `useWindowDimensions` for responsive behavior:

```typescript
import { useWindowDimensions, StyleSheet } from 'react-native';

function ResponsiveComponent() {
  const { width } = useWindowDimensions();
  const isDesktop = width >= 768;

  return (
    <View style={[styles.container, isDesktop && styles.containerDesktop]}>
      {/* Content */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  contai