rn-android-blur 1.0.0

package/README.md

@@ -0,0 +1,333 @@
+# rn-android-blur
+
+React Native библиотека для создания эффекта размытия фона на Android устройствах.
+
+## Требования
+
+- React Native >= 0.60.0
+- Android API Level 31+ (Android 12+)
+- Kotlin
+
+## Установка
+
+```bash
+npm install rn-android-blur
+# или
+yarn add rn-android-blur
+```
+
+### Настройка Android
+
+1. Откройте файл `android/settings.gradle` и добавьте:
+
+```gradle
+include ':rn-android-blur'
+project(':rn-android-blur').projectDir = new File(rootProject.projectDir, '../node_modules/rn-android-blur/android')
+```
+
+2. Откройте файл `android/app/build.gradle` и добавьте в секцию `dependencies`:
+
+```gradle
+dependencies {
+    // ... другие зависимости
+    implementation project(':rn-android-blur')
+}
+```
+
+3. Откройте файл `android/app/src/main/java/.../MainApplication.java` (или `MainApplication.kt`) и добавьте импорт и регистрацию пакета:
+
+**Для Java:**
+```java
+import com.rnandroidblur.BlurPackage;
+
+public class MainApplication extends Application implements ReactApplication {
+    // ...
+    
+    @Override
+    protected List<ReactPackage> getPackages() {
+        return Arrays.<ReactPackage>asList(
+            new MainReactPackage(),
+            new BlurPackage() // Добавьте эту строку
+        );
+    }
+}
+```
+
+**Для Kotlin:**
+```kotlin
+import com.rnandroidblur.BlurPackage
+
+class MainApplication : Application(), ReactApplication {
+    // ...
+    
+    override fun getPackages(): List<ReactPackage> {
+        return listOf(
+            MainReactPackage(),
+            BlurPackage() // Добавьте эту строку
+        )
+    }
+}
+```
+
+4. Выполните синхронизацию Gradle и пересоберите проект:
+
+```bash
+cd android
+./gradlew clean
+cd ..
+npx react-native run-android
+```
+
+## Использование
+
+### Базовый пример
+
+```tsx
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { BlurView } from 'rn-android-blur';
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      {/* Контент, который будет размыт */}
+      <View style={styles.background}>
+        <Text style={styles.text}>Фоновый контент</Text>
+      </View>
+      
+      {/* BlurView поверх фона */}
+      <BlurView style={styles.blur} radius={20}>
+        <Text style={styles.blurText}>Размытый контент</Text>
+      </BlurView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  background: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#4A90E2',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 24,
+    color: 'white',
+  },
+  blur: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  blurText: {
+    fontSize: 18,
+    color: 'white',
+    fontWeight: 'bold',
+  },
+});
+```
+
+### Пример с модальным окном
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, Modal, TouchableOpacity } from 'react-native';
+import { BlurView } from 'rn-android-blur';
+
+export default function ModalExample() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity 
+        style={styles.button}
+        onPress={() => setVisible(true)}
+      >
+        <Text style={styles.buttonText}>Открыть модальное окно</Text>
+      </TouchableOpacity>
+
+      <Modal
+        visible={visible}
+        transparent={true}
+        animationType="fade"
+        onRequestClose={() => setVisible(false)}
+      >
+        <BlurView style={styles.modalOverlay} radius={25}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitle}>Модальное окно</Text>
+            <Text style={styles.modalText}>
+              Это содержимое отображается поверх размытого фона
+            </Text>
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => setVisible(false)}
+            >
+              <Text style={styles.closeButtonText}>Закрыть</Text>
+            </TouchableOpacity>
+          </View>
+        </BlurView>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f0f0f0',
+  },
+  button: {
+    backgroundColor: '#4A90E2',
+    padding: 15,
+    borderRadius: 8,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+  modalOverlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 24,
+    width: '80%',
+    alignItems: 'center',
+  },
+  modalTitle: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 12,
+  },
+  modalText: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 20,
+    color: '#666',
+  },
+  closeButton: {
+    backgroundColor: '#4A90E2',
+    padding: 12,
+    borderRadius: 8,
+    width: '100%',
+    alignItems: 'center',
+  },
+  closeButtonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+```
+
+### Пример с навигационной панелью
+
+```tsx
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { BlurView } from 'rn-android-blur';
+
+export default function NavigationExample() {
+  return (
+    <View style={styles.container}>
+      <ScrollView style={styles.scrollView}>
+        {Array.from({ length: 20 }).map((_, index) => (
+          <View key={index} style={styles.item}>
+            <Text style={styles.itemText}>Элемент {index + 1}</Text>
+          </View>
+        ))}
+      </ScrollView>
+      
+      {/* Размытая навигационная панель */}
+      <BlurView style={styles.navBar} radius={15}>
+        <View style={styles.navContent}>
+          <Text style={styles.navTitle}>Заголовок</Text>
+        </View>
+      </BlurView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f5f5f5',
+  },
+  scrollView: {
+    flex: 1,
+  },
+  item: {
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+    backgroundColor: 'white',
+  },
+  itemText: {
+    fontSize: 16,
+  },
+  navBar: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 100,
+    paddingTop: 40,
+    justifyContent: 'flex-end',
+  },
+  navContent: {
+    padding: 16,
+  },
+  navTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+});
+```
+
+## API
+
+### BlurView
+
+Компонент для создания эффекта размытия.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `radius` | `number` | `20` | Радиус размытия (0-25). Чем больше значение, тем сильнее размытие. |
+| `style` | `ViewStyle` | - | Стили для компонента (наследуется от `ViewProps`) |
+| `children` | `ReactNode` | - | Дочерние элементы |
+
+#### Примечания
+
+- Эффект размытия работает только на Android 12+ (API Level 31+)
+- На более старых версиях Android компонент будет отображаться без эффекта размытия
+- Компонент наследует все стандартные props от `View` из React Native
+
+## Ограничения
+
+- Работает только на Android 12+ (API Level 31+)
+- Использует нативный API `RenderEffect`, который доступен только на новых версиях Android
+- На iOS не работает (требуется отдельная реализация)
+
+## Лицензия
+
+MIT
+

package/android/build.gradle

@@ -0,0 +1,52 @@
+buildscript {
+    ext.kotlin_version = '1.9.0'
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:8.1.0")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
+    }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+android {
+    compileSdkVersion 34
+
+    defaultConfig {
+        minSdkVersion 31
+        targetSdkVersion 34
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+        }
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    kotlinOptions {
+        jvmTarget = '1.8'
+    }
+}
+
+repositories {
+    mavenCentral()
+    google()
+    maven {
+        url("$rootDir/../node_modules/react-native/android")
+    }
+}
+
+dependencies {
+    implementation 'com.facebook.react:react-native:+'
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+}
+

package/android/src/main/java/com/rnandroidblur/BlurPackage.kt

@@ -0,0 +1,13 @@
+package com.rnandroidblur
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class BlurPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext) = emptyList<NativeModule>()
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> =
+        listOf(BlurViewManager())
+}

package/android/src/main/java/com/rnandroidblur/BlurView.kt

@@ -0,0 +1,25 @@
+package com.rnandroidblur
+
+import android.content.Context
+import android.graphics.RenderEffect
+import android.graphics.Shader
+import android.os.Build
+import android.util.AttributeSet
+import android.widget.FrameLayout
+
+class BlurView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null
+) : FrameLayout(context, attrs) {
+
+    fun setBlur(radius: Float) {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            val effect = RenderEffect.createBlurEffect(
+                radius,
+                radius,
+                Shader.TileMode.CLAMP
+            )
+            setRenderEffect(effect)
+        }
+    }
+}

package/android/src/main/java/com/rnandroidblur/BlurViewManager.kt

@@ -0,0 +1,19 @@
+package com.rnandroidblur
+
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+
+class BlurViewManager : SimpleViewManager<BlurView>() {
+
+    override fun getName() = "RNBlurView"
+
+    override fun createViewInstance(reactContext: ThemedReactContext): BlurView {
+        return BlurView(reactContext)
+    }
+
+    @ReactProp(name = "radius", defaultFloat = 20f)
+    fun setRadius(view: BlurView, radius: Float) {
+        view.setBlur(radius)
+    }
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "rn-android-blur",
+  "version": "1.0.0",
+  "description": "React Native библиотека для размытия фона на Android",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src/",
+    "android/",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react-native",
+    "android",
+    "blur",
+    "blur-effect",
+    "native-module"
+  ],
+  "author": "Nikita Streltsov<i@chswe11.ru>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}
+

package/src/index.ts

@@ -0,0 +1,7 @@
+import { requireNativeComponent, ViewProps } from 'react-native';
+
+export type BlurViewProps = ViewProps & {
+  radius?: number;
+};
+
+export const BlurView = requireNativeComponent<BlurViewProps>('RNBlurView');