enableVirtualBackground for IRtcEngine is now working with Expo SDK 50

[elenitaex5]

Describe the bug Hi, I'm using Agora for video calls using react-native-agora and a Fork of Agora UI Kit. Working with Expo SDK 49 working perfectly blurring background, if we wanted, but after upgrade to Expo SDK 50 ("react-native": "0.73.6" ) call is still working but blur background has dissapear, only shows a completely normal background. I've been researching documentation and I can't find anything. Also, this function is returning Promise void so I cannot include logs to know if there's a problem or not blurring.

To Reproduce Steps to reproduce the behavior:

1. Create a minimal proyect with Expo SDK 50 and agora-react-native using this dependency https://github.com/elenitaex5/agora-video-uikit-react-native. enableBlurBackground is an rtcProp passing them to UIKit
2. Starts a call
3. White Blur Background has to be included in video image
4. No blur Background is shown, only video background.

Expected behavior After starting the video White Blur background has to be included in video image.

Screenshots

Smartphone (please complete the following information):

• Device: Both Android or iOS
• OS: All of them we've tried with several iphones and Android devices.
• Version 4.3.2

Additional context Add any other context about the problem here.

[guoxianzhe]

@elenitaex5 We have some samples in https://github.com/AgoraIO-Extensions/react-native-agora/blob/main/example/src/examples/advanced/VirtualBackground/VirtualBackground.tsx

Can you confirm is that work in the issue device?

[elenitaex5]

@guoxianzhe I've just tried in a new EXPO SDK 50 project and include only Virtual Background components (and dependencies or other components needed) with react-native-agora etc.

And this sample doesn't work. It only have expo sdk 50 new project chore and structure and component in main screen and it doesn't work with any type of Background Source.

Attaching a picture. I've tried to enable background several times with multiple types of bacgkround with dropdown selectors.

[guoxianzhe]

I've just tried in a new EXPO SDK 50 project and include only Virtual Background components (and dependencies or other components needed) with react-native-agora etc.

@elenitaex5 Can you share this code to me?

[elenitaex5]

I've just tried in a new EXPO SDK 50 project and include only Virtual Background components (and dependencies or other components needed) with react-native-agora etc.

@elenitaex5 Can you share this code to me?

Hi @guoxianzhe thanks for helping. This is my testing repository. As I said just create a new Expo SDK 50 project and copy-paste component class and components and dependencies needed. Route and Navigation are not added to BaseComponent, not needed for real test and our appId etc are hardcoded in Virtual Background component and not comes from config. You can see it. It was a fast test.

This is test repository: https://github.com/elenitaex5/expo-sdk-50

[guoxianzhe]

@elenitaex5 I saw your code and I found that you are using a file(agora-logo.png) that is not existing in your project. Please use a exist file to enableVirtualBackground

for example in android: https://github.com/AgoraIO-Extensions/react-native-agora/blob/main/example/android/app/src/main/assets/agora-logo.png

If you want to use BackgroundSourceType is BackgroundImage, you should send a absolute path. such as demo did:https://github.com/AgoraIO-Extensions/react-native-agora/blob/main/example/src/utils/index.ts#L46

[elenitaex5]

@guoxianzhe thanks for your answer, I didn't include the background image because I only want to try a Blur background or particular color background with no image and they don't work either. In example above you can check I'm trying blur background with a background color not image color.

[guoxianzhe]

@elenitaex5 You should delete source parameter like this.

I tested it in my real android device and it's works. ( color is :0xffffff)

your code has passed a un-existing file and it will cause error.

[elenitaex5]

Hi @guoxianzhe Thanks a lot for your help. This code is working in a clean project. Hope I can reproduce it in my real project.