React Native 그림자 생성기 - iOS & Android 그림자 스타일 온라인

// React Native shadow style generator
function generateShadowStyle(depth, color = '#000000') {
  const shadowOpacity = 0.2 + (depth / 24) * 0.4;
  const shadowRadius = Math.max(1, Math.round(depth * 0.8));
  const shadowOffsetHeight = Math.max(1, Math.round(depth * 0.5));

  return {
    shadowColor: color,
    shadowOffset: {
      width: 0,
      height: shadowOffsetHeight,
    },
    shadowOpacity: Math.round(shadowOpacity * 100) / 100,
    shadowRadius: shadowRadius,
    elevation: depth,
  };
}

// Platform-specific shadow
import { Platform } from 'react-native';

function createPlatformShadow(depth, color = '#000000') {
  const shadow = generateShadowStyle(depth, color);
  return Platform.select({
    ios: {
      shadowColor: shadow.shadowColor,
      shadowOffset: shadow.shadowOffset,
      shadowOpacity: shadow.shadowOpacity,
      shadowRadius: shadow.shadowRadius,
    },
    android: {
      elevation: shadow.elevation,
      shadowColor: shadow.shadowColor,
    },
  });
}

// Usage
const cardShadow = generateShadowStyle(4);
console.log(cardShadow);
// { shadowColor: '#000000', shadowOffset: { width: 0, height: 2 },
//   shadowOpacity: 0.27, shadowRadius: 3, elevation: 4 }