status-im
/
react-native-blur
mirror of https://github.com/status-im/react-native-blur.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Add Fabric support (#493) 

* build(deps): update react-native

* feat: codegen setup for BlurView component

* feat: add basic Fabric component for BlurView (iOS)

* feat(iOS): implement updateProps Fabric method

* feat(iOS): migrate VibrancyView

* feat(Android): add code for new and old architecture

* chore: update dependencies and example app

* fix(iOS): interface VibrancyViewComponentView

* refactor: separate codegen specs by platform

* refactor: rename Android component file to avoid a bug in Codegen

* refactor: delete/rename files

* refactor: conditionally include Fabric code in the original views

* refactor: remove unnecessary code in build.gradle
This commit is contained in:
Gianluca Spada 2022-11-03 17:45:48 +01:00 committed by Thibault Malbranche
parent 7a1e76b753
commit 2fcc595bc3
25 changed files with 3129 additions and 2470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
android/build.gradle
View File

@ -49,6 +49,16 @@ android {
sourceCompatibility JavaVersion.VERSION_1_8 sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8
} }
sourceSets {
main {
if (isNewArchitectureEnabled()) {
java.srcDirs += ['src/newarch']
} else {
java.srcDirs += ['src/oldarch']
}
}
}
} }
repositories { repositories {
@ -130,11 +140,3 @@ dependencies {
implementation 'com.github.Dimezis:BlurView:version-2.0.2' implementation 'com.github.Dimezis:BlurView:version-2.0.2'
} }
if (isNewArchitectureEnabled()) {
react {
jsRootDir = file("../src/")
libraryName = "Blur"
codegenJavaPackageName = "com.reactnativecommunityblur"
}
}

33
android/src/main/java/com/reactnativecommunity/blurview/BlurViewManager.java → android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java
View File

@ -5,8 +5,6 @@ import android.os.Build;
import android.view.View; import android.view.View;
import android.view.ViewGroup; import android.view.ViewGroup;
import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.annotations.ReactProp;
import eightbitlab.com.blurview.BlurView; import eightbitlab.com.blurview.BlurView;
import eightbitlab.com.blurview.RenderEffectBlur; import eightbitlab.com.blurview.RenderEffectBlur;
@ -16,20 +14,14 @@ import java.util.Objects;
import javax.annotation.Nonnull; import javax.annotation.Nonnull;
@SuppressWarnings("unused") @SuppressWarnings("unused")
class BlurViewManager extends ViewGroupManager<BlurView> { class BlurViewManagerImpl {
private static final String REACT_CLASS = "BlurView"; public static final String REACT_CLASS = "AndroidBlurView";
private static final int defaultRadius = 10; public static final int defaultRadius = 10;
private static final int defaultSampling = 10; public static final int defaultSampling = 10;
@Override public static @Nonnull BlurView createViewInstance(@Nonnull ThemedReactContext ctx) {
public @Nonnull String getName() {
return REACT_CLASS;
}
@Override
public @Nonnull BlurView createViewInstance(@Nonnull ThemedReactContext ctx) {
BlurView blurView = new BlurView(ctx); BlurView blurView = new BlurView(ctx);
View decorView = Objects View decorView = Objects
.requireNonNull(ctx.getCurrentActivity()) .requireNonNull(ctx.getCurrentActivity())
@ -51,29 +43,24 @@ class BlurViewManager extends ViewGroupManager<BlurView> {
return blurView; return blurView;
} }
@ReactProp(name = "blurRadius", defaultInt = defaultRadius) public static void setRadius(BlurView view, int radius) {
public void setRadius(BlurView view, int radius) {
view.setBlurRadius(radius); view.setBlurRadius(radius);
view.invalidate(); view.invalidate();
} }
@ReactProp(name = "overlayColor", customType = "Color") public static void setColor(BlurView view, int color) {
public void setColor(BlurView view, int color) {
view.setOverlayColor(color); view.setOverlayColor(color);
view.invalidate(); view.invalidate();
} }
@ReactProp(name = "downsampleFactor", defaultInt = defaultSampling) public static void setDownsampleFactor(BlurView view, int factor) {}
public void setDownsampleFactor(BlurView view, int factor) {}
@ReactProp(name = "autoUpdate", defaultBoolean = true) public static void setAutoUpdate(BlurView view, boolean autoUpdate) {
public void setAutoUpdate(BlurView view, boolean autoUpdate) {
view.setBlurAutoUpdate(autoUpdate); view.setBlurAutoUpdate(autoUpdate);
view.invalidate(); view.invalidate();
} }
@ReactProp(name = "enabled", defaultBoolean = true) public static void setBlurEnabled(BlurView view, boolean enabled) {
public void setBlurEnabled(BlurView view, boolean enabled) {
view.setBlurEnabled(enabled); view.setBlurEnabled(enabled);
} }
} }

2
android/src/main/java/com/reactnativecommunity/blurview/BlurViewPackage.java
View File

@ -30,6 +30,6 @@ public class BlurViewPackage implements ReactPackage {
public List<ViewManager> createViewManagers( public List<ViewManager> createViewManagers(
@Nonnull ReactApplicationContext reactContext @Nonnull ReactApplicationContext reactContext
) { ) {
return Collections.<ViewManager>singletonList(new BlurViewManager()); return Collections.<ViewManager>singletonList(new BlurViewManager(reactContext));
} }
} }

78
android/src/newarch/java/com/reactnativecommunity/blurview/BlurViewManager.java Normal file
View File

@ -0,0 +1,78 @@
package com.reactnativecommunity.blurview;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.ViewManagerDelegate;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.viewmanagers.AndroidBlurViewManagerDelegate;
import com.facebook.react.viewmanagers.AndroidBlurViewManagerInterface;
import eightbitlab.com.blurview.BlurView;
@ReactModule(name = BlurViewManagerImpl.REACT_CLASS)
class BlurViewManager extends ViewGroupManager<BlurView>
implements AndroidBlurViewManagerInterface<BlurView> {
private final ViewManagerDelegate<BlurView> mDelegate;
public BlurViewManager(ReactApplicationContext context) {
mDelegate = new AndroidBlurViewManagerDelegate<>(this);
}
@Nullable
@Override
protected ViewManagerDelegate<BlurView> getDelegate() {
return mDelegate;
}
@NonNull
@Override
public String getName() {
return BlurViewManagerImpl.REACT_CLASS;
}
@NonNull
@Override
protected BlurView createViewInstance(@NonNull ThemedReactContext context) {
return BlurViewManagerImpl.createViewInstance(context);
}
@Override
@ReactProp(name = "blurRadius", defaultInt = BlurViewManagerImpl.defaultRadius)
public void setBlurRadius(BlurView view, int radius) {
BlurViewManagerImpl.setRadius(view, radius);
}
@Override
@ReactProp(name = "overlayColor", customType = "Color")
public void setOverlayColor(BlurView view, Integer color) {
BlurViewManagerImpl.setColor(view, color);
}
@Override
@ReactProp(name = "downsampleFactor", defaultInt = BlurViewManagerImpl.defaultSampling)
public void setDownsampleFactor(BlurView view, int factor) {}
@Override
@ReactProp(name = "autoUpdate", defaultBoolean = true)
public void setAutoUpdate(BlurView view, boolean autoUpdate) {
BlurViewManagerImpl.setAutoUpdate(view, autoUpdate);
}
@Override
@ReactProp(name = "enabled", defaultBoolean = true)
public void setEnabled(BlurView view, boolean enabled) {
BlurViewManagerImpl.setBlurEnabled(view, enabled);
}
@Override
public void setBlurAmount(BlurView view, int value) {}
@Override
public void setBlurType(BlurView view, @Nullable String value) {}
}

53
android/src/oldarch/java/com/reactnativecommunity/blurview/BlurViewManager.java Normal file
View File

@ -0,0 +1,53 @@
package com.reactnativecommunity.blurview;
import androidx.annotation.NonNull;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.annotations.ReactProp;
import eightbitlab.com.blurview.BlurView;
class BlurViewManager extends ViewGroupManager<BlurView> {
ReactApplicationContext mCallerContext;
public BlurViewManager(ReactApplicationContext reactContext) {
mCallerContext = reactContext;
}
@Override
public BlurView createViewInstance(ThemedReactContext context) {
return BlurViewManagerImpl.createViewInstance(context);
}
@NonNull
@Override
public String getName() {
return BlurViewManagerImpl.REACT_CLASS;
}
@ReactProp(name = "blurRadius", defaultInt = BlurViewManagerImpl.defaultRadius)
public void setRadius(BlurView view, int radius) {
BlurViewManagerImpl.setRadius(view, radius);
}
@ReactProp(name = "overlayColor", customType = "Color")
public void setColor(BlurView view, int color) {
BlurViewManagerImpl.setColor(view, color);
}
@ReactProp(name = "downsampleFactor", defaultInt = BlurViewManagerImpl.defaultSampling)
public void setDownsampleFactor(BlurView view, int factor) {}
@ReactProp(name = "autoUpdate", defaultBoolean = true)
public void setAutoUpdate(BlurView view, boolean autoUpdate) {
BlurViewManagerImpl.setAutoUpdate(view, autoUpdate);
}
@ReactProp(name = "enabled", defaultBoolean = true)
public void setBlurEnabled(BlurView view, boolean enabled) {
BlurViewManagerImpl.setBlurEnabled(view, enabled);
}
}

2
example/ios/Podfile
View File

@ -4,4 +4,4 @@ use_flipper!
workspace 'BlurExample.xcworkspace' workspace 'BlurExample.xcworkspace'
use_test_app! use_test_app! :hermes_enabled => true

915
example/ios/Podfile.lock
View File

File diff suppressed because it is too large Load Diff

13
example/package.json
View File

@ -13,21 +13,22 @@
"test": "jest" "test": "jest"
}, },
"dependencies": { "dependencies": {
"react": "17.0.2", "@react-native-community/segmented-control": "^2.2.2",
"react-native": "0.68.2" "react": "18.1.0",
"react-native": "0.70.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.9", "@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"@react-native-community/blur": "../", "@react-native-community/blur": "../",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3", "babel-jest": "^26.6.3",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"jest": "^26.6.3", "jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.67.0", "metro-react-native-babel-preset": "^0.72.1",
"mkdirp": "^1.0.0", "mkdirp": "^1.0.0",
"react-native-test-app": "^1.6.0", "react-native-test-app": "^1.6.16",
"react-test-renderer": "17.0.2" "react-test-renderer": "18.1.0"
}, },
"jest": { "jest": {
"preset": "react-native" "preset": "react-native"

81
example/src/App.tsx
View File

@ -5,7 +5,6 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { import {
Image, Image,
SegmentedControlIOS,
StyleSheet, StyleSheet,
Platform, Platform,
Switch, Switch,
@ -14,19 +13,40 @@ import {
SafeAreaView, SafeAreaView,
Dimensions, Dimensions,
} from 'react-native'; } from 'react-native';
import SegmentedControl from '@react-native-community/segmented-control'; // Note: SegmentedControl does not yet support Fabric
import { BlurView, VibrancyView, BlurViewProps } from '@react-native-community/blur'; import {
BlurView,
VibrancyView,
BlurViewProps,
} from '@react-native-community/blur';
const blurTypeValues =
Platform.OS === 'ios'
? ['xlight', 'light', 'dark', 'regular', 'prominent']
: ['xlight', 'light', 'dark'];
const Blurs = () => { const Blurs = () => {
const [blurBlurType, setBlurBlurType] = useState<BlurViewProps['blurType']>('light'); const [blurBlurType, setBlurBlurType] =
useState<BlurViewProps['blurType']>('light');
const [blurActiveSegment, setBlurActiveSegment] = useState(1); const [blurActiveSegment, setBlurActiveSegment] = useState(1);
const [vibrancyBlurType, setVibrancyBlurType] = useState<BlurViewProps['blurType']>('dark'); const [vibrancyBlurType, setVibrancyBlurType] =
useState<BlurViewProps['blurType']>('dark');
const [vibrancyActiveSegment, setVibrancyActiveSegment] = useState(2); const [vibrancyActiveSegment, setVibrancyActiveSegment] = useState(2);
const onBlurChange = useCallback((e) => setBlurActiveSegment(e.nativeEvent.selectedSegmentIndex), []); const onBlurChange = useCallback(
(e) => setBlurActiveSegment(e.nativeEvent.selectedSegmentIndex),
[]
);
const onBlurValueChange = useCallback((value) => setBlurBlurType(value), []); const onBlurValueChange = useCallback((value) => setBlurBlurType(value), []);
const onVibrancyChange = useCallback((e) => setVibrancyActiveSegment(e.nativeEvent.selectedSegmentIndex), []); const onVibrancyChange = useCallback(
const onVibrancyValueChange = useCallback((value) => setVibrancyBlurType(value), []); (e) => setVibrancyActiveSegment(e.nativeEvent.selectedSegmentIndex),
[]
);
const onVibrancyValueChange = useCallback(
(value) => setVibrancyBlurType(value),
[]
);
const tintColor = blurBlurType === 'xlight' ? 'black' : 'white'; const tintColor = blurBlurType === 'xlight' ? 'black' : 'white';
const platform = Platform.OS === 'ios' ? 'iOS' : 'Android'; const platform = Platform.OS === 'ios' ? 'iOS' : 'Android';
@ -44,24 +64,22 @@ const Blurs = () => {
blurType={blurBlurType} blurType={blurBlurType}
blurAmount={100} blurAmount={100}
reducedTransparencyFallbackColor={'pink'} reducedTransparencyFallbackColor={'pink'}
style={[styles.blurView]}> style={[styles.blurView]}
<Text style={[styles.text, { color: tintColor }]}> />
Blur component ({platform}) <Text style={[styles.text, { color: tintColor }]}>
</Text> Blur component ({platform})
{Platform.OS === 'ios' ? ( </Text>
<SegmentedControlIOS <SegmentedControl
values={['xlight', 'light', 'dark', 'regular', 'prominent']} values={blurTypeValues}
selectedIndex={blurActiveSegment} selectedIndex={blurActiveSegment}
onChange={(event) => { onChange={(event) => {
onBlurChange(event); onBlurChange(event);
}} }}
onValueChange={(value) => { onValueChange={(value) => {
onBlurValueChange(value); onBlurValueChange(value);
}} }}
tintColor={tintColor} tintColor={tintColor}
/> />
) : null}
</BlurView>
</View> </View>
{ {
@ -74,11 +92,12 @@ const Blurs = () => {
blurType={vibrancyBlurType} blurType={vibrancyBlurType}
blurAmount={10} blurAmount={10}
reducedTransparencyFallbackColor={'pink'} reducedTransparencyFallbackColor={'pink'}
style={[styles.container, styles.blurContainer]}> style={[styles.container, styles.blurContainer]}
>
<Text style={styles.text}>Vibrancy component (iOS-only)</Text> <Text style={styles.text}>Vibrancy component (iOS-only)</Text>
<SegmentedControlIOS <SegmentedControl
values={['xlight', 'light', 'dark', 'regular', 'prominent']} values={blurTypeValues}
selectedIndex={vibrancyActiveSegment} selectedIndex={vibrancyActiveSegment}
onChange={(event) => { onChange={(event) => {
onVibrancyChange(event); onVibrancyChange(event);
@ -93,7 +112,7 @@ const Blurs = () => {
} }
</SafeAreaView> </SafeAreaView>
); );
} };
const Example = () => { const Example = () => {
const [showBlurs, setShowBlurs] = React.useState(true); const [showBlurs, setShowBlurs] = React.useState(true);
@ -115,8 +134,8 @@ const Example = () => {
/> />
</SafeAreaView> </SafeAreaView>
</View> </View>
) );
} };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {

1620
example/yarn.lock
View File

File diff suppressed because it is too large Load Diff

11
ios/BlurView.h
View File

@ -1,7 +1,16 @@
#import <UIKit/UIKit.h> #import <UIKit/UIKit.h>
#import "BlurEffectWithAmount.h" #import "BlurEffectWithAmount.h"
@interface BlurView : UIView #ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTViewComponentView.h>
#endif // RCT_NEW_ARCH_ENABLED
@interface BlurView :
#ifdef RCT_NEW_ARCH_ENABLED
RCTViewComponentView
#else
UIView
#endif // RCT_NEW_ARCH_ENABLED
@property (nonatomic, copy, nullable) NSString *blurType; @property (nonatomic, copy, nullable) NSString *blurType;
@property (nonatomic, copy, nullable) NSNumber *blurAmount; @property (nonatomic, copy, nullable) NSNumber *blurAmount;

62
ios/BlurView.m → ios/BlurView.mm
View File

@ -1,8 +1,21 @@
#import "BlurView.h" #import "BlurView.h"
#import "BlurEffectWithAmount.h" #import "BlurEffectWithAmount.h"
@interface BlurView () #ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnblurview/ComponentDescriptors.h>
#import <react/renderer/components/rnblurview/Props.h>
#import <react/renderer/components/rnblurview/RCTComponentViewHelpers.h>
#endif // RCT_NEW_ARCH_ENABLED
#ifdef RCT_NEW_ARCH_ENABLED
using namespace facebook::react;
@interface BlurView () <RCTBlurViewViewProtocol>
#else
@interface BlurView ()
#endif // RCT_NEW_ARCH_ENABLED
@end @end
@implementation BlurView @implementation BlurView
@ -22,6 +35,11 @@
- (instancetype)initWithFrame:(CGRect)frame - (instancetype)initWithFrame:(CGRect)frame
{ {
if (self = [super initWithFrame:frame]) { if (self = [super initWithFrame:frame]) {
#ifdef RCT_NEW_ARCH_ENABLED
static const auto defaultProps = std::make_shared<const BlurViewProps>();
_props = defaultProps;
#endif // RCT_NEW_ARCH_ENABLED
self.blurEffectView = [[UIVisualEffectView alloc] init]; self.blurEffectView = [[UIVisualEffectView alloc] init];
self.blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; self.blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
self.blurEffectView.frame = frame; self.blurEffectView.frame = frame;
@ -43,6 +61,38 @@
return self; return self;
} }
#ifdef RCT_NEW_ARCH_ENABLED
#pragma mark - RCTComponentViewProtocol
+ (ComponentDescriptorProvider)componentDescriptorProvider
{
return concreteComponentDescriptorProvider<BlurViewComponentDescriptor>();
}
- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
{
const auto &oldViewProps = *std::static_pointer_cast<const BlurViewProps>(_props);
const auto &newViewProps = *std::static_pointer_cast<const BlurViewProps>(props);
if (oldViewProps.blurAmount != newViewProps.blurAmount) {
NSNumber *blurAmount = [NSNumber numberWithInt:newViewProps.blurAmount];
[self setBlurAmount:blurAmount];
}
if (oldViewProps.blurType != newViewProps.blurType) {
NSString *blurType = [NSString stringWithUTF8String:toString(newViewProps.blurType).c_str()];
[self setBlurType:blurType];
}
if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) {
UIColor *color = RCTUIColorFromSharedColor(newViewProps.reducedTransparencyFallbackColor);
[self setReducedTransparencyFallbackColor:color];
}
[super updateProps:props oldProps:oldProps];
}
#endif // RCT_NEW_ARCH_ENABLED
- (void)dealloc - (void)dealloc
{ {
[[NSNotificationCenter defaultCenter] removeObserver:self]; [[NSNotificationCenter defaultCenter] removeObserver:self];
@ -127,6 +177,9 @@
- (void)updateBlurEffect - (void)updateBlurEffect
{ {
// Without resetting the effect, changing blurAmount doesn't seem to work in Fabric...
// Setting it to nil should also enable blur animations (see PR #392)
self.blurEffectView.effect = nil;
UIBlurEffectStyle style = [self blurEffectStyle]; UIBlurEffectStyle style = [self blurEffectStyle];
self.blurEffect = [BlurEffectWithAmount effectWithStyle:style andBlurAmount:self.blurAmount]; self.blurEffect = [BlurEffectWithAmount effectWithStyle:style andBlurAmount:self.blurAmount];
self.blurEffectView.effect = self.blurEffect; self.blurEffectView.effect = self.blurEffect;
@ -161,3 +214,10 @@
} }
@end @end
#ifdef RCT_NEW_ARCH_ENABLED
Class<RCTComponentViewProtocol> BlurViewCls(void)
{
return BlurView.class;
}
#endif // RCT_NEW_ARCH_ENABLED

0
ios/BlurViewManager.m → ios/BlurViewManager.mm
View File

32
ios/RNBlur.xcodeproj/project.pbxproj
View File

@ -7,11 +7,11 @@
objects = { objects = {
/* Begin PBXBuildFile section */ /* Begin PBXBuildFile section */
215426C328894FC500DF69C3 /* VibrancyView.m in Sources */ = {isa = PBXBuildFile; fileRef = 215426BB28894FC400DF69C3 /* VibrancyView.m */; }; 215426C328894FC500DF69C3 /* VibrancyView.mm in Sources */ = {isa = PBXBuildFile; fileRef = 215426BB28894FC400DF69C3 /* VibrancyView.mm */; };
215426C428894FC500DF69C3 /* BlurView.m in Sources */ = {isa = PBXBuildFile; fileRef = 215426BC28894FC400DF69C3 /* BlurView.m */; }; 215426C428894FC500DF69C3 /* BlurView.mm in Sources */ = {isa = PBXBuildFile; fileRef = 215426BC28894FC400DF69C3 /* BlurView.mm */; };
215426C528894FC500DF69C3 /* BlurEffectWithAmount.m in Sources */ = {isa = PBXBuildFile; fileRef = 215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */; }; 215426C528894FC500DF69C3 /* BlurEffectWithAmount.m in Sources */ = {isa = PBXBuildFile; fileRef = 215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */; };
215426C628894FC500DF69C3 /* BlurViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 215426C028894FC400DF69C3 /* BlurViewManager.m */; }; 215426C628894FC500DF69C3 /* BlurViewManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = 215426C028894FC400DF69C3 /* BlurViewManager.mm */; };
215426C728894FC500DF69C3 /* VibrancyViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 215426C228894FC500DF69C3 /* VibrancyViewManager.m */; }; 215426C728894FC500DF69C3 /* VibrancyViewManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = 215426C228894FC500DF69C3 /* VibrancyViewManager.mm */; };
/* End PBXBuildFile section */ /* End PBXBuildFile section */
/* Begin PBXCopyFilesBuildPhase section */ /* Begin PBXCopyFilesBuildPhase section */
@ -30,14 +30,14 @@
134814201AA4EA6300B7C361 /* libRNBlur.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRNBlur.a; sourceTree = BUILT_PRODUCTS_DIR; }; 134814201AA4EA6300B7C361 /* libRNBlur.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRNBlur.a; sourceTree = BUILT_PRODUCTS_DIR; };
215426B928894FC400DF69C3 /* VibrancyViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = VibrancyViewManager.h; sourceTree = "<group>"; }; 215426B928894FC400DF69C3 /* VibrancyViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = VibrancyViewManager.h; sourceTree = "<group>"; };
215426BA28894FC400DF69C3 /* VibrancyView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = VibrancyView.h; sourceTree = "<group>"; }; 215426BA28894FC400DF69C3 /* VibrancyView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = VibrancyView.h; sourceTree = "<group>"; };
215426BB28894FC400DF69C3 /* VibrancyView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = VibrancyView.m; sourceTree = "<group>"; }; 215426BB28894FC400DF69C3 /* VibrancyView.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = VibrancyView.mm; sourceTree = "<group>"; };
215426BC28894FC400DF69C3 /* BlurView.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurView.m; sourceTree = "<group>"; }; 215426BC28894FC400DF69C3 /* BlurView.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurView.mm; sourceTree = "<group>"; };
215426BD28894FC400DF69C3 /* BlurView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurView.h; sourceTree = "<group>"; }; 215426BD28894FC400DF69C3 /* BlurView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurView.h; sourceTree = "<group>"; };
215426BE28894FC400DF69C3 /* BlurEffectWithAmount.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurEffectWithAmount.h; sourceTree = "<group>"; }; 215426BE28894FC400DF69C3 /* BlurEffectWithAmount.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurEffectWithAmount.h; sourceTree = "<group>"; };
215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurEffectWithAmount.m; sourceTree = "<group>"; }; 215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurEffectWithAmount.m; sourceTree = "<group>"; };
215426C028894FC400DF69C3 /* BlurViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurViewManager.m; sourceTree = "<group>"; }; 215426C028894FC400DF69C3 /* BlurViewManager.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurViewManager.mm; sourceTree = "<group>"; };
215426C128894FC400DF69C3 /* BlurViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurViewManager.h; sourceTree = "<group>"; }; 215426C128894FC400DF69C3 /* BlurViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurViewManager.h; sourceTree = "<group>"; };
215426C228894FC500DF69C3 /* VibrancyViewManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = VibrancyViewManager.m; sourceTree = "<group>"; }; 215426C228894FC500DF69C3 /* VibrancyViewManager.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = VibrancyViewManager.mm; sourceTree = "<group>"; };
/* End PBXFileReference section */ /* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */ /* Begin PBXFrameworksBuildPhase section */
@ -65,13 +65,13 @@
215426BE28894FC400DF69C3 /* BlurEffectWithAmount.h */, 215426BE28894FC400DF69C3 /* BlurEffectWithAmount.h */,
215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */, 215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */,
215426BD28894FC400DF69C3 /* BlurView.h */, 215426BD28894FC400DF69C3 /* BlurView.h */,
215426BC28894FC400DF69C3 /* BlurView.m */, 215426BC28894FC400DF69C3 /* BlurView.mm */,
215426C128894FC400DF69C3 /* BlurViewManager.h */, 215426C128894FC400DF69C3 /* BlurViewManager.h */,
215426C028894FC400DF69C3 /* BlurViewManager.m */, 215426C028894FC400DF69C3 /* BlurViewManager.mm */,
215426BA28894FC400DF69C3 /* VibrancyView.h */, 215426BA28894FC400DF69C3 /* VibrancyView.h */,
215426BB28894FC400DF69C3 /* VibrancyView.m */, 215426BB28894FC400DF69C3 /* VibrancyView.mm */,
215426B928894FC400DF69C3 /* VibrancyViewManager.h */, 215426B928894FC400DF69C3 /* VibrancyViewManager.h */,
215426C228894FC500DF69C3 /* VibrancyViewManager.m */, 215426C228894FC500DF69C3 /* VibrancyViewManager.mm */,
134814211AA4EA7D00B7C361 /* Products */, 134814211AA4EA7D00B7C361 /* Products */,
); );
sourceTree = "<group>"; sourceTree = "<group>";
@ -133,11 +133,11 @@
isa = PBXSourcesBuildPhase; isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647; buildActionMask = 2147483647;
files = ( files = (
215426C728894FC500DF69C3 /* VibrancyViewManager.m in Sources */, 215426C728894FC500DF69C3 /* VibrancyViewManager.mm in Sources */,
215426C328894FC500DF69C3 /* VibrancyView.m in Sources */, 215426C328894FC500DF69C3 /* VibrancyView.mm in Sources */,
215426C528894FC500DF69C3 /* BlurEffectWithAmount.m in Sources */, 215426C528894FC500DF69C3 /* BlurEffectWithAmount.m in Sources */,
215426C428894FC500DF69C3 /* BlurView.m in Sources */, 215426C428894FC500DF69C3 /* BlurView.mm in Sources */,
215426C628894FC500DF69C3 /* BlurViewManager.m in Sources */, 215426C628894FC500DF69C3 /* BlurViewManager.mm in Sources */,
); );
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
}; };

54
ios/VibrancyView.m → ios/VibrancyView.mm
View File

@ -2,7 +2,21 @@
#import "BlurView.h" #import "BlurView.h"
#import "VibrancyView.h" #import "VibrancyView.h"
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnblurview/ComponentDescriptors.h>
#import <react/renderer/components/rnblurview/Props.h>
#import <react/renderer/components/rnblurview/RCTComponentViewHelpers.h>
#endif // RCT_NEW_ARCH_ENABLED
#ifdef RCT_NEW_ARCH_ENABLED
using namespace facebook::react;
@interface VibrancyView () <RCTVibrancyViewViewProtocol>
#else
@interface VibrancyView () @interface VibrancyView ()
#endif // RCT_NEW_ARCH_ENABLED
@property (nonatomic, strong) UIVibrancyEffect *vibrancyEffect; @property (nonatomic, strong) UIVibrancyEffect *vibrancyEffect;
@property (nonatomic, strong) UIVisualEffectView *vibrancyEffectView; @property (nonatomic, strong) UIVisualEffectView *vibrancyEffectView;
@ -23,17 +37,44 @@
return self; return self;
} }
#ifdef RCT_NEW_ARCH_ENABLED
#pragma mark - RCTComponentViewProtocol
+ (ComponentDescriptorProvider)componentDescriptorProvider
{
return concreteComponentDescriptorProvider<VibrancyViewComponentDescriptor>();
}
- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
[self attachToVisualEffectView:childComponentView];
}
- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
{
// Override unmountChildComponentView to avoid an assertion on childComponentView.superview == self
// childComponentView is not a direct subview of self, as it's inserted deeper in a UIVisualEffectView
[childComponentView removeFromSuperview];
}
#endif // RCT_NEW_ARCH_ENABLED
- (void)layoutSubviews - (void)layoutSubviews
{ {
[super layoutSubviews]; [super layoutSubviews];
self.vibrancyEffectView.frame = self.bounds; self.vibrancyEffectView.frame = self.bounds;
} }
- (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex { - (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex
{
[self attachToVisualEffectView:(UIView *)subview];
}
- (void)attachToVisualEffectView:(UIView *)subview
{
if ([self useReduceTransparencyFallback]) { if ([self useReduceTransparencyFallback]) {
[self addSubview:(UIView*)subview]; [self addSubview:subview];
} else { } else {
[self.vibrancyEffectView.contentView addSubview:(UIView*)subview]; [self.vibrancyEffectView.contentView addSubview:subview];
} }
} }
@ -70,3 +111,10 @@
} }
@end @end
#ifdef RCT_NEW_ARCH_ENABLED
Class<RCTComponentViewProtocol> VibrancyViewCls(void)
{
return VibrancyView.class;
}
#endif // RCT_NEW_ARCH_ENABLED

0
ios/VibrancyViewManager.m → ios/VibrancyViewManager.mm
View File

23
package.json
View File

@ -52,25 +52,22 @@
"@react-native-community/eslint-config": "^3.0.2", "@react-native-community/eslint-config": "^3.0.2",
"@release-it/conventional-changelog": "^5.0.0", "@release-it/conventional-changelog": "^5.0.0",
"@types/jest": "^28.1.2", "@types/jest": "^28.1.2",
"@types/react": "~17.0.21", "@types/react": "~18.0.20",
"@types/react-native": "0.68.0", "@types/react-native": "^0.70.1",
"commitlint": "^17.0.2", "commitlint": "^17.0.2",
"eslint": "^8.4.1", "eslint": "^8.23.1",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"jest": "^28.1.1", "jest": "^28.1.1",
"pod-install": "^0.1.0", "pod-install": "^0.1.0",
"prettier": "^2.0.5", "prettier": "^2.0.5",
"react": "17.0.2", "react": "18.1.0",
"react-native": "0.68.2", "react-native": "0.70.1",
"react-native-builder-bob": "^0.18.3", "react-native-builder-bob": "^0.18.3",
"react-native-test-app": "^1.6.0", "react-native-test-app": "^1.6.16",
"release-it": "^15.0.0", "release-it": "^15.0.0",
"typescript": "^4.5.2" "typescript": "^4.5.2"
}, },
"resolutions": {
"@types/react": "17.0.21"
},
"peerDependencies": { "peerDependencies": {
"react": "*", "react": "*",
"react-native": "*" "react-native": "*"
@ -148,5 +145,13 @@
} }
] ]
] ]
},
"codegenConfig": {
"name": "rnblurview",
"type": "components",
"jsSrcsDir": "./src/fabric",
"android": {
"javaPackageName": "com.reactnativecommunityblur"
}
} }
} }

5
react-native-blur.podspec
View File

@ -1,7 +1,7 @@
require "json" require "json"
package = JSON.parse(File.read(File.join(__dir__, "package.json"))) package = JSON.parse(File.read(File.join(__dir__, "package.json")))
folly_version = '2021.06.28.00-v2' # folly_version = '2021.06.28.00-v2'
folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32' folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
Pod::Spec.new do |s| Pod::Spec.new do |s|
@ -27,8 +27,9 @@ Pod::Spec.new do |s|
"CLANG_CXX_LANGUAGE_STANDARD" => "c++17" "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
} }
s.dependency "React-RCTFabric"
s.dependency "React-Codegen" s.dependency "React-Codegen"
s.dependency "RCT-Folly", folly_version s.dependency "RCT-Folly"
s.dependency "RCTRequired" s.dependency "RCTRequired"
s.dependency "RCTTypeSafety" s.dependency "RCTTypeSafety"
s.dependency "ReactCommon/turbomodule/core" s.dependency "ReactCommon/turbomodule/core"

4
src/components/BlurView.android.tsx
View File

@ -1,12 +1,12 @@
import React, { forwardRef, useEffect } from 'react'; import React, { forwardRef, useEffect } from 'react';
import { import {
View, View,
requireNativeComponent,
DeviceEventEmitter, DeviceEventEmitter,
StyleSheet, StyleSheet,
ViewProps, ViewProps,
ViewStyle, ViewStyle,
} from 'react-native'; } from 'react-native';
import NativeBlurView from '../fabric/BlurViewNativeComponentAndroid';
const OVERLAY_COLORS = { const OVERLAY_COLORS = {
light: 'rgba(255, 255, 255, 0.2)', light: 'rgba(255, 255, 255, 0.2)',
@ -110,6 +110,4 @@ const styles = StyleSheet.create<{ transparent: ViewStyle }>({
transparent: { backgroundColor: 'transparent' }, transparent: { backgroundColor: 'transparent' },
}); });
const NativeBlurView = requireNativeComponent<BlurViewProps>('BlurView');
export default BlurView; export default BlurView;

11
src/components/BlurView.ios.tsx
View File

@ -1,11 +1,6 @@
import React, { forwardRef } from 'react'; import React, { forwardRef } from 'react';
import { import { StyleSheet, ViewProps, ViewStyle, View } from 'react-native';
requireNativeComponent, import NativeBlurView from '../fabric/BlurViewNativeComponent';
StyleSheet,
ViewProps,
ViewStyle,
View,
} from 'react-native';
type BlurType = type BlurType =
| 'dark' | 'dark'
@ -52,6 +47,4 @@ const styles = StyleSheet.create<{ transparent: ViewStyle }>({
transparent: { backgroundColor: 'transparent' }, transparent: { backgroundColor: 'transparent' },
}); });
const NativeBlurView = requireNativeComponent<BlurViewProps>('BlurView');
export default BlurView; export default BlurView;

11
src/components/VibrancyView.ios.tsx
View File

@ -1,10 +1,6 @@
import React, { forwardRef } from 'react'; import React, { forwardRef } from 'react';
import { import { StyleSheet, ViewProps, ViewStyle } from 'react-native';
requireNativeComponent, import NativeVibrancyView from '../fabric/VibrancyViewNativeComponent';
StyleSheet,
ViewProps,
ViewStyle,
} from 'react-native';
import type { BlurViewProps } from './BlurView.ios'; import type { BlurViewProps } from './BlurView.ios';
export type VibrancyViewProps = ViewProps & { export type VibrancyViewProps = ViewProps & {
@ -27,7 +23,4 @@ const styles = StyleSheet.create<{ transparent: ViewStyle }>({
transparent: { backgroundColor: 'transparent' }, transparent: { backgroundColor: 'transparent' },
}); });
const NativeVibrancyView =
requireNativeComponent<VibrancyViewProps>('VibrancyView');
export default VibrancyView; export default VibrancyView;

39
src/fabric/BlurViewNativeComponent.ts Normal file
View File

@ -0,0 +1,39 @@
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, HostComponent, ColorValue } from 'react-native';
import type {
WithDefault,
Int32,
} from 'react-native/Libraries/Types/CodegenTypes';
interface NativeProps extends ViewProps {
blurType?: WithDefault<
| 'dark'
| 'light'
| 'xlight'
| 'prominent'
| 'regular'
| 'extraDark'
| 'chromeMaterial'
| 'material'
| 'thickMaterial'
| 'thinMaterial'
| 'ultraThinMaterial'
| 'chromeMaterialDark'
| 'materialDark'
| 'thickMaterialDark'
| 'thinMaterialDark'
| 'ultraThinMaterialDark'
| 'chromeMaterialLight'
| 'materialLight'
| 'thickMaterialLight'
| 'thinMaterialLight'
| 'ultraThinMaterialLight',
'dark'
>;
blurAmount?: WithDefault<Int32, 10>;
reducedTransparencyFallbackColor?: ColorValue;
}
export default codegenNativeComponent<NativeProps>('BlurView', {
excludedPlatforms: ['android'],
}) as HostComponent<NativeProps>;

20
src/fabric/BlurViewNativeComponentAndroid.ts Normal file
View File

@ -0,0 +1,20 @@
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, HostComponent, ColorValue } from 'react-native';
import type {
WithDefault,
Int32,
} from 'react-native/Libraries/Types/CodegenTypes';
interface NativeProps extends ViewProps {
blurAmount?: WithDefault<Int32, 10>;
blurType?: WithDefault<'dark' | 'light' | 'xlight', 'dark'>;
blurRadius?: Int32;
downsampleFactor?: Int32;
overlayColor?: ColorValue;
enabled?: boolean;
autoUpdate?: boolean;
}
export default codegenNativeComponent<NativeProps>('AndroidBlurView', {
excludedPlatforms: ['iOS'],
}) as HostComponent<NativeProps>;

39
src/fabric/VibrancyViewNativeComponent.ts Normal file
View File

@ -0,0 +1,39 @@
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ViewProps, HostComponent, ColorValue } from 'react-native';
import type {
WithDefault,
Int32,
} from 'react-native/Libraries/Types/CodegenTypes';
interface NativeProps extends ViewProps {
blurType?: WithDefault<
| 'dark'
| 'light'
| 'xlight'
| 'prominent'
| 'regular'
| 'extraDark'
| 'chromeMaterial'
| 'material'
| 'thickMaterial'
| 'thinMaterial'
| 'ultraThinMaterial'
| 'chromeMaterialDark'
| 'materialDark'
| 'thickMaterialDark'
| 'thinMaterialDark'
| 'ultraThinMaterialDark'
| 'chromeMaterialLight'
| 'materialLight'
| 'thickMaterialLight'
| 'thinMaterialLight'
| 'ultraThinMaterialLight',
'dark'
>;
blurAmount?: WithDefault<Int32, 10>;
reducedTransparencyFallbackColor?: ColorValue;
}
export default codegenNativeComponent<NativeProps>('VibrancyView', {
excludedPlatforms: ['android'],
}) as HostComponent<NativeProps>;

2471
yarn.lock
View File

File diff suppressed because it is too large Load Diff