Responsive Design Guide

import {useResponsive} from '@/hooks';

function MyScreen() {
  const {padding, fontSize, spacing, isSmall, isMedium, isLarge} = useResponsive();
  
  return (
    <View style={{padding: padding.md}}>
      <Text style={{fontSize: fontSize.xl}}>Responsive Text</Text>
    </View>
  );
}

const {
  // Screen info
  screenSize,    // 'small' | 'medium' | 'large'
  width,          // Current screen width
  height,         // Current screen height
  isSmall,        // boolean
  isMedium,       // boolean
  isLarge,        // boolean
  
  // Scaling functions
  scaleFont,      // (size: number) => number
  scaleSize,      // (size: number) => number
  
  // Responsive values
  padding,        // { xs, sm, md, lg, xl, '2xl' }
  fontSize,       // { xs, sm, md, lg, xl, '2xl', '3xl', '4xl' }
  spacing,        // { xs, sm, md, lg, xl, '2xl', '3xl' }
  
  // Utility function
  getValue,       // Get responsive value based on screen size
} = useResponsive();

const {padding} = useResponsive();

// Usage
<View style={{padding: padding.md}}>
<View style={{paddingHorizontal: padding.lg}}>
<View style={{paddingTop: padding.xl}}>

const {fontSize} = useResponsive();

// Usage
<Text style={{fontSize: fontSize.xl}}>
<Text style={{fontSize: fontSize['3xl']}}>

const {spacing} = useResponsive();

// Usage
<View style={{marginTop: spacing.lg}}>
<View style={{gap: spacing.md}}>

import {useResponsive} from '@/hooks';

function MyScreen() {
  const {padding, fontSize, isSmall} = useResponsive();
  
  return (
    <View style={{padding: padding.md}}>
      <Text style={{fontSize: fontSize['3xl']}}>Title</Text>
      <Text style={{fontSize: fontSize.md}}>Subtitle</Text>
      
      {!isSmall && (
        <Text>This only shows on medium/large screens</Text>
      )}
    </View>
  );
}

const {isSmall, getValue} = useResponsive();

// Get different values based on screen size
const columns = getValue({
  small: 1,
  medium: 2,
  large: 3,
  default: 2,
});

// Or use boolean checks
const showSidebar = !isSmall;

const {scaleFont, scaleSize} = useResponsive();

// Scale a specific font size
const customFontSize = scaleFont(18);

// Scale a specific dimension
const customPadding = scaleSize(30);

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  title: {
    fontSize: 28,
  },
});

function MyComponent() {
  const {padding, fontSize} = useResponsive();
  
  return (
    <View style={{padding: padding.lg}}>
      <Text style={{fontSize: fontSize['3xl']}}>Title</Text>
    </View>
  );
}

function MyComponent() {
  const {padding, fontSize} = useResponsive();
  
  const styles = StyleSheet.create({
    container: {
      padding: padding.lg,
    },
    title: {
      fontSize: fontSize['3xl'],
    },
  });
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Title</Text>
    </View>
  );
}

const {padding, fontSize} = useResponsive();

<View style={{paddingHorizontal: padding.lg, paddingTop: padding.md}}>
  <Text style={{fontSize: fontSize['3xl']}}>Title</Text>
</View>

const {padding, spacing} = useResponsive();

<FlatList
  contentContainerStyle={{
    padding: padding.md,
    paddingBottom: padding.xl,
  }}
  ItemSeparatorComponent={() => <View style={{height: spacing.md}} />}
/>

const {padding, fontSize, spacing} = useResponsive();

<View style={{padding: padding.md, marginBottom: spacing.md}}>
  <Text style={{fontSize: fontSize.lg}}>Card Title</Text>
  <Text style={{fontSize: fontSize.sm, marginTop: spacing.sm}}>Card Content</Text>
</View>