react-native-glassmorphic 🔮

A high-performance, responsive, hybrid native & CSS Glassmorphism layout library for React Native and Expo (iOS, Android, and Web).

This package delivers beautiful frosted glass UI components (Cards, Inputs, Buttons) that automatically tap into high-fidelity native system blur on iOS (expo-blur / @react-native-community/blur) while utilizing optimized, zero-overhead CSS gradients and highlights as fallbacks on Android and Web to prevent UI stutter.

Features

• Hybrid Engine: Uses ultra-smooth native blur effects on iOS and CSS translucent layered masks as fallbacks on Android & Web.
• Liquid 60FPS: Designed specifically for high-performance layout rendering without screen redraw lag.
• Fully Responsive: Adapts fluidly to all mobile device viewports and standard styles.
• Expo Ready: Installs with zero native modules or linking required for managed Expo environments.
• Pre-Built Elements: Ready-to-use frosted elements: GlassmorphicCard, GlassmorphicInput, and GlassmorphicButton.

Installation

npm install react-native-glassmorphic

(Optional) For native hardware blur on iOS, you can also install expo-blur:

npx expo install expo-blur

Usage

1. Glassmorphic Card Container

Create beautiful backdrop layouts, custom menus, or profile grids:

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

export default function ProfileCard() {
  return (
    <GlassmorphicCard 
      intensity={30} 
      tint="light" 
      borderRadius={20}
      style={styles.card}
    >
      <Text style={styles.title}>Welcome Back</Text>
      <Text style={styles.subtitle}>Premium Membership Active</Text>
    </GlassmorphicCard>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 24,
    width: 320,
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#0F172A',
  },
  subtitle: {
    fontSize: 14,
    color: 'rgba(15, 23, 42, 0.7)',
    marginTop: 6,
  },
});

2. Glassmorphic Text Input

Create gorgeous, modern search fields and form items:

import React, { useState } from 'react';
import { GlassmorphicInput } from 'react-native-glassmorphic';

export default function SearchField() {
  const [query, setQuery] = useState('');

  return (
    <GlassmorphicInput
      value={query}
      onChangeText={setQuery}
      placeholder="Search transaction history..."
      tint="light"
      intensity={20}
    />
  );
}

3. Glassmorphic Button

Interactive, frosted buttons with dynamic loading indicators:

import React from 'react';
import { GlassmorphicButton } from 'react-native-glassmorphic';

export default function ActionButton() {
  return (
    <GlassmorphicButton
      title="Unlock Premium Pack"
      tint="dark"
      intensity={40}
      onPress={() => console.log('Unlocked!')}
    />
  );
}

Component API Reference

GlassmorphicCard Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | children | React.ReactNode | undefined | The child elements inside the card. | | intensity | number | 20 | Blur amount (0 to 100) mapped to iOS Blur and Android opacity. | | tint | 'light' \| 'dark' \| 'none' | 'light' | Theme color styling. | | borderRadius | number | 16 | Border radius of the card. | | borderWidth | number | 1 | Border width of the card. | | borderColor | string | Computed | Semi-translucent custom border color. | | shadowOpacity | number | 0.1 | Shadow strength baseline. | | elevation | number | 4 (or 0 if tint="none") | Android-specific elevation shadow. | | style | StyleProp<ViewStyle> | undefined | Style overrides for the outer container. |

GlassmorphicInput Props

Extends standard React Native TextInputProps.

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | intensity | number | 15 | Blur amount (0 to 100) mapped to iOS Blur and Android opacity. | | tint | 'light' \| 'dark' \| 'none' | 'light' | Theme color styling. | | borderRadius | number | 12 | Border radius of the input container. | | containerStyle | StyleProp<ViewStyle> | undefined | Style overrides for the wrapping card/container. | | inputStyle | StyleProp<TextStyle> | undefined | Style overrides for the inner TextInput component. |

GlassmorphicButton Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | title | string | Required | Button display text. | | onPress | () => void | undefined | Callback fired when the button is pressed. | | intensity | number | 30 | Blur amount (0 to 100) mapped to iOS Blur and Android opacity. | | tint | 'light' \| 'dark' \| 'none' | 'light' | Theme color styling. | | borderRadius | number | 12 | Border radius of the button. | | loading | boolean | false | When true, renders an ActivityIndicator in place of the text. | | disabled | boolean | false | When true, disables interactions and reduces opacity. | | containerStyle | StyleProp<ViewStyle> | undefined | Style overrides for the button card/container. | | textStyle | StyleProp<TextStyle> | undefined | Style overrides for the button text label. |

Strategic Styling Advice

For optimal visual glass effects:

1. Bright Backgrounds: Place Glassmorphic elements on top of rich gradient, colorful, or busy photo backgrounds. Frosted effects are more pronounced when there are strong color transitions underneath.
2. Double Highlights: Combine bright background layers with custom shadowColor properties to increase visual depth.

License

This package is licensed under the MIT License.