🔄 Web to Native Quick Reference

📦 Container Elements

📝 Text Elements

// Heading styles example
const styles = StyleSheet.create({
  h1: { fontSize: 32, fontWeight: 'bold', marginBottom: 16 },
  h2: { fontSize: 24, fontWeight: 'bold', marginBottom: 12 },
  h3: { fontSize: 20, fontWeight: '600', marginBottom: 8 },
  divider: { height: 1, backgroundColor: '#ccc', marginVertical: 16 },
});

🖼️ Media Elements

📋 List Elements

// Bullet list example
const BulletList = ({ items }) => (
  <View>
    {items.map((item, index) => (
      <View key={index} style={styles.listItem}>
        <Text style={styles.bullet}>•</Text>
        <Text style={styles.itemText}>{item}</Text>
      </View>
    ))}
  </View>
);

// Numbered list example
const NumberedList = ({ items }) => (
  <View>
    {items.map((item, index) => (
      <View key={index} style={styles.listItem}>
        <Text style={styles.number}>{index + 1}.</Text>
        <Text style={styles.itemText}>{item}</Text>
      </View>
    ))}
  </View>
);

📝 Form Elements

👆 Interactive Elements

📐 Box Model

🎨 Colors & Background

✏️ Typography

🚫 Not Supported in React Native

• float, clear - Use Flexbox instead
• display: inline, display: block - Only flex, none
• position: fixed - Use absolute with Dimensions
• background-image - Use ImageBackground component
• calc() - Calculate in JavaScript
• var(), CSS variables - Use JS constants
• :hover, :focus - Use Pressable state
• @media queries - Use Dimensions API or useWindowDimensions
• transition, animation - Use Animated API or Reanimated
• box-shadow (Android) - Use elevation or react-native-shadow
• cursor - Not applicable to touch
• Pseudo-elements (::before, ::after) - Create actual components

📏 Flexbox Defaults

// Web-like row layout
<View style={{ flexDirection: 'row' }}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
</View>

// RN default column layout
<View>
  <View />  {/* Stacks vertically */}
  <View />
</View>

📱 Responsive Design

// CSS media query equivalent
import { useWindowDimensions } from 'react-native';

function ResponsiveComponent() {
  const { width, height } = useWindowDimensions();
  
  const isTablet = width >= 768;
  const isLandscape = width > height;
  
  return (
    <View style={[
      styles.container,
      isTablet && styles.tabletContainer,
      isLandscape && styles.landscapeContainer,
    ]}>
      {/* Content */}
    </View>
  );
}

// Or use Platform
import { Platform } from 'react-native';

const styles = StyleSheet.create({
  container: {
    padding: Platform.select({
      ios: 20,
      android: 16,
    }),
  },
});

🖱️ Mouse/Touch Events

⌨️ Input Events

🌐 Browser APIs

📍 Device APIs

🔗 Link to External URL

// Web
<a href="https://google.com" target="_blank">Open Google</a>

// React Native
import { Linking, Pressable, Text } from 'react-native';

<Pressable onPress={() => Linking.openURL('https://google.com')}>
  <Text style={{ color: 'blue' }}>Open Google</Text>
</Pressable>

🖼️ Background Image

// Web CSS
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
}

// React Native
import { ImageBackground } from 'react-native';

<ImageBackground
  source={require('./hero.jpg')}
  style={styles.hero}
  resizeMode="cover"
>
  <Text>Content over image</Text>
</ImageBackground>

📜 Scrollable Page

// Web - automatic scrolling
<div className="page">
  {/* Long content scrolls automatically */}
</div>

// React Native - explicit ScrollView
import { ScrollView } from 'react-native';

<ScrollView contentContainerStyle={styles.page}>
  {/* Content */}
</ScrollView>

// Or SafeAreaView + ScrollView
<SafeAreaView style={{ flex: 1 }}>
  <ScrollView>
    {/* Content */}
  </ScrollView>
</SafeAreaView>

⏳ Loading State

// Web
{isLoading ? <div className="spinner"></div> : <Content />}

// React Native
import { ActivityIndicator } from 'react-native';

{isLoading ? (
  <ActivityIndicator size="large" color="#0000ff" />
) : (
  <Content />
)}

⚡ Quick Reference Card