Concept 02: Components and Basic Styling

import { 
  View,          // Container (like div)
  Text,          // Text display
  TouchableOpacity, // Pressable buttons
  Image,         // Image display
  ScrollView,    // Scrollable content
  SafeAreaView   // Respects device safe areas
} from 'react-native';

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

function ActionButton({ title, onPress, style, disabled = false }) {
  return (
    <TouchableOpacity 
      style={[
        styles.button, 
        style, 
        disabled && styles.disabled
      ]} 
      onPress={onPress}
      disabled={disabled}
    >
      <Text style={[styles.text, disabled && styles.disabledText]}>
        {title}
      </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#6366f1',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  disabled: {
    backgroundColor: '#d1d5db',
  },
  text: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  disabledText: {
    color: '#6b7280',
  },
});

export default ActionButton;

const styles = StyleSheet.create({
  // Minimum 44px touch targets
  touchableArea: {
    minHeight: 44,
    minWidth: 44,
  },
  // Comfortable spacing
  spacing: {
    padding: 16,
    marginVertical: 8,
  },
});

import { Dimensions } from 'react-native';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    width: screenWidth * 0.9, // 90% of screen width
    maxWidth: 400, // Maximum width for tablets
  },
  imageContainer: {
    aspectRatio: 1, // Square images for creative apps
    width: screenWidth * 0.8,
  },
});

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

import React from 'react';
import { View, Text, SafeAreaView, StyleSheet } from 'react-native';
import ActionButton from './ActionButton'; // Your component

function CreativeStudioHome() {
  const handleCameraPress = () => {
    console.log('Opening camera...');
  };

  const handleGalleryPress = () => {
    console.log('Opening gallery...');
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>Creative Studio</Text>
        <Text style={styles.subtitle}>Start creating something amazing</Text>
      </View>
      
      <View style={styles.actions}>
        <ActionButton 
          title="Take Photo"
          onPress={handleCameraPress}
          style={styles.primaryButton}
        />
        <ActionButton 
          title="Browse Gallery"
          onPress={handleGalleryPress}
          style={styles.secondaryButton}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  header: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    color: 'white',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    color: '#9ca3af',
    textAlign: 'center',
  },
  actions: {
    paddingHorizontal: 20,
    paddingBottom: 40,
    gap: 16,
  },
  primaryButton: {
    backgroundColor: '#8b5cf6',
  },
  secondaryButton: {
    backgroundColor: '#374151',
  },
});