@janblazej/react-native-materials

React Native component for native Material effects — using SwiftUI Material on iOS and RenderEffect on Android for consistent blur and translucency.

Features

• ✨ Native SwiftUI Material on iOS
• 🌀 Android RenderEffect support (API 31+)
• 📱 Consistent blur and translucency across platforms
• ⚡️ High-performance, platform-optimized rendering

Screenshots

| iOS Light | iOS Dark | Android Light | Android Dark | |----------------------------------------------|------------------------------------|------------------------------------------------------|--------------| | | | | |

Screenshots above to show the effect on each platform and theme.

Installation

yarn add @janblazej/react-native-materials

Note: After installing, you need to prebuild your app to generate the native code. Run:

npx expo prebuild

This step is required for the native modules to be linked in your project.

Usage

import { MaterialView } from '@janblazej/react-native-materials'

<VStack>
    <MaterialView material="thin" style={StyleSheet.absoluteFill} />
    <Text>Material</Text>
</VStack>

Props

| Prop | Type | Default | Required | Description | |:-----------|:------------------------------------------------------------|:-----------:|:------------:|:-------------------------------------------------------------------------------| | material | 'ultra-thin' | 'thin' | 'regular' | 'thick' | 'ultra-thick' | 'regular' | No | Material | | variant | 'light' | 'dark' | auto | No | Forces light/dark appearance. If not set, uses system color scheme. | | ViewProps | ViewProps | — | No | All standard React Native View props. |

Native Implementations

• iOS SwiftUI MaterialView.swift
• Android MaterialView.kt

License

MIT