@hzblj/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 @hzblj/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 '@hzblj/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