flex, flexGrow 및 반응형 크기 조정

The flex Property Explained

import { View } from 'react-native';

export default function FlexDemo() {
  return (
    <View style={{ flex: 1, flexDirection: 'column' }}>
      {/* Takes 1/3 of height */}
      <View style={{ flex: 1, backgroundColor: '#ff6b6b' }} />
      {/* Takes 2/3 of height */}
      <View style={{ flex: 2, backgroundColor: '#4f86f7' }} />
    </View>
  );
}

flex: 1 on the Root Container

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

// WRONG: root View has no flex, collapses to text height
function WrongLayout() {
  return (
    <View style={{ backgroundColor: '#f5f5f5' }}>
      <Text>This View only wraps its content.</Text>
    </View>
  );
}

// CORRECT: flex: 1 fills the screen
function CorrectLayout() {
  return (
    <View style={{ flex: 1, backgroundColor: '#f5f5f5' }}>
      <Text>This View fills the entire screen.</Text>
    </View>
  );
}

flexGrow, flexShrink, and flexBasis

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

export default function FlexShrinkExample() {
  return (
    <View style={styles.row}>
      <View style={styles.icon} />
      {/* flexShrink: 1 allows text to shrink if the row is too small */}
      <Text style={styles.label} numberOfLines={1}>
        A very long label that could overflow without flexShrink
      </Text>
      <Text style={styles.badge}>NEW</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', padding: 12, gap: 8 },
  icon: { width: 40, height: 40, borderRadius: 8, backgroundColor: '#4f86f7', flexShrink: 0 },
  label: { flex: 1, flexShrink: 1, fontSize: 16, color: '#333' },
  badge: { paddingHorizontal: 8, paddingVertical: 2, backgroundColor: '#ff6b6b', color: '#fff', borderRadius: 10, fontSize: 11, fontWeight: 'bold' },
});

Dimensions API for Screen Size

import { View, Text, Dimensions, useWindowDimensions } from 'react-native';

// Static (doesn't update on rotation)
const { width, height } = Dimensions.get('window');

// Reactive (updates on rotation — preferred)
export default function ResponsiveScreen() {
  const { width, height } = useWindowDimensions();
  const isLandscape = width > height;

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Width: {Math.round(width)}</Text>
      <Text>Height: {Math.round(height)}</Text>
      <Text>Mode: {isLandscape ? 'Landscape' : 'Portrait'}</Text>
    </View>
  );
}

Percentage Widths for Responsive Columns

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

export default function TwoColumnGrid() {
  return (
    <View style={styles.grid}>
      {[1, 2, 3, 4, 5, 6].map(n => (
        <View key={n} style={styles.card} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,
    padding: 16,
  },
  card: {
    width: '47%',     // ~2 per row with gap
    height: 120,
    backgroundColor: '#4f86f7',
    borderRadius: 12,
  },
});

Combining flex with Fixed Dimensions

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

export default function MasterDetail() {
  return (
    <View style={styles.container}>
      {/* Fixed-width sidebar */}
      <View style={styles.sidebar}>
        <Text style={{ color: '#fff' }}>Sidebar</Text>
      </View>
      {/* flex: 1 content fills remaining space */}
      <View style={styles.content}>
        <Text>Main content area</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, flexDirection: 'row' },
  sidebar: { width: 200, backgroundColor: '#333', padding: 16 },
  content: { flex: 1, backgroundColor: '#f5f5f5', padding: 16 },
});

useWindowDimensions for Adaptive Layouts

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

export default function AdaptiveGrid({ items }) {
  const { width } = useWindowDimensions();
  const numColumns = width >= 768 ? 3 : width >= 480 ? 2 : 1;
  const cardWidth = (width - 32 - (numColumns - 1) * 12) / numColumns;

  return (
    <View style={styles.grid}>
      {items.map(item => (
        <View key={item.id} style={[styles.card, { width: cardWidth }]} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  grid: { flexDirection: 'row', flexWrap: 'wrap', gap: 12, padding: 16 },
  card: { height: 120, backgroundColor: '#4f86f7', borderRadius: 10 },
});

minWidth, maxWidth, minHeight, maxHeight

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

export default function BoundedContent() {
  return (
    <View style={styles.screen}>
      {/* Content is at most 480px wide, centered */}
      <View style={styles.content}>
        <Text style={styles.text}>This content is bounded to look good on all screen sizes.</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, alignItems: 'center', backgroundColor: '#f5f5f5', padding: 16 },
  content: {
    width: '100%',
    maxWidth: 480, // doesn't stretch on tablets/web
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 20,
  },
  text: { fontSize: 16, lineHeight: 24, color: '#333' },
});

Aspect Ratio for Consistent Proportions

import { View, Image, StyleSheet } from 'react-native';

export default function VideoThumbnail() {
  return (
    <View style={styles.thumbnailContainer}>
      <Image
        source={{ uri: 'https://picsum.photos/640/360' }}
        style={styles.thumbnail}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  thumbnailContainer: {
    width: '100%',
  },
  thumbnail: {
    width: '100%',
    aspectRatio: 16 / 9,  // height auto-computed = width * 9/16
    borderRadius: 10,
  },
});

Three-Panel Responsive Layout

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

export default function ThreePanel() {
  const { width } = useWindowDimensions();
  const isTablet = width >= 768;

  if (!isTablet) {
    // Phone: single panel
    return <View style={{ flex: 1, backgroundColor: '#f5f5f5' }} />;
  }

  // Tablet: three panels
  return (
    <View style={styles.row}>
      <View style={[styles.panel, { flex: 1 }]} />
      <View style={[styles.panel, { flex: 2, backgroundColor: '#e8f0fe' }]} />
      <View style={[styles.panel, { flex: 2 }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flex: 1, flexDirection: 'row' },
  panel: { backgroundColor: '#f5f5f5', borderRightWidth: 1, borderRightColor: '#ddd' },
});

Avoiding Layout Pitfalls

// Debugging checklist when a component is invisible:
// 1. Does its parent have flex: 1 or an explicit height?
// 2. Does the component itself have flex or height/width?
// 3. Are percentage dimensions resolving against a zero-width parent?
// 4. Is backgroundColor set (to verify the View is rendered but transparent)?

// Quick visibility check:
<View style={{ flex: 1, backgroundColor: 'rgba(255,0,0,0.1)' }}>
  {/* If this shows red tint, the container is sized correctly */}
  <YourComponent />
</View>

Quick Check

Lesson Recap