expo-blur
Version:
A component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.
43 lines • 1.87 kB
JavaScript
export default function getBackgroundColor(intensity, tint) {
const opacity = intensity / 100;
switch (tint) {
// From Apple iOS 14 Sketch Kit - https://developer.apple.com/design/resources/
// From Apple iOS 14 Sketch Kit - https://developer.apple.com/design/resources/
case 'dark':
case 'systemMaterialDark':
return `rgba(25,25,25,${opacity * 0.78})`;
case 'light':
case 'extraLight':
case 'systemMaterialLight':
case 'systemUltraThinMaterialLight':
case 'systemThickMaterialLight':
return `rgba(249,249,249,${opacity * 0.78})`;
case 'default':
case 'prominent':
case 'systemMaterial':
return `rgba(255,255,255,${opacity * 0.3})`;
case 'regular':
return `rgba(179,179,179,${opacity * 0.82})`;
case 'systemThinMaterial':
return `rgba(199,199,199,${opacity * 0.97})`;
case 'systemChromeMaterial':
return `rgba(255,255,255,${opacity * 0.75})`;
case 'systemChromeMaterialLight':
return `rgba(255,255,255,${opacity * 0.97})`;
case 'systemUltraThinMaterial':
return `rgba(191,191,191,${opacity * 0.44})`;
case 'systemThickMaterial':
return `rgba(191,191,191,${opacity * 0.44})`;
case 'systemThickMaterialDark':
return `rgba(37,37,37,${opacity * 0.9})`;
case 'systemThinMaterialDark':
return `rgba(37,37,37,${opacity * 0.7})`;
case 'systemUltraThinMaterialDark':
return `rgba(37,37,37,${opacity * 0.55})`;
case 'systemChromeMaterialDark':
return `rgba(0,0,0,${opacity * 0.75})`;
case 'systemThinMaterialLight':
return `rgba(199,199,199,${opacity * 0.78})`;
}
}
//# sourceMappingURL=getBackgroundColor.js.map