react-native-web-core

# React Native Web - Core Concepts

React Native Web enables React Native components and APIs to run on the web, providing a unified codebase for web and native platforms.

## Key Concepts

### Platform Abstraction

React Native Web provides a consistent API across web and native platforms:

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

export function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Works on web and native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
    color: '#333',
  },
});
```

### Core Components

Use React Native primitives instead of HTML elements:

- `<View>` instead of `<div>`
- `<Text>` instead of `<span>` or `<p>`
- `<Image>` instead of `<img>`
- `<TextInput>` instead of `<input>`
- `<ScrollView>` instead of scrollable `<div>`
- `<Pressable>` instead of `<button>`

### Platform-Specific Code

Use `Platform` module for platform-specific behavior:

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

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.select({
      web: 20,
      ios: 30,
      android: 25,
      default: 20,
    }),
  },
});

// Or use Platform.OS
if (Platform.OS === 'web') {
  // Web-specific code
}
```

## Best Practices

### Component Structure

✅ Use React Native primitives consistently:

```typescript
import { View, Text, Pressable } from 'react-native';

function Button({ onPress, title }: { onPress: () => void; title: string }) {
  return (
    <Pressable onPress={onPress}>
      <View style={styles.button}>
        <Text style={styles.buttonText}>{title}</Text>
      </View>
    </Pressable>
  );
}
```

### Type Safety

✅ Use TypeScript for prop types:

```typescript
import { ViewStyle, TextStyle, ImageStyle } from 'react-native';

interface Props {
  title: string;
  onPress: () => voi