Error: Requiring module which threw an exception: Invariant Violation: "background" "background" is not a valid style property

Question

I am implementing ZEGCLOUD one-to-one voice call. I am facing this error.

Error: Requiring module "node_modules@zegocloud\zego-uikit-prebuilt-call-rn\lib\commonjs\index.js", which threw an exception: Invariant Violation: "background" is not a valid style property.

CallScreen code. What am I doing wrong here. I have also looked into node modules. I did not find any styles audioVideoViewSubContainer. I have also clean the gradle and perform npm cache reset.

import React, {useRef} from 'react';

import {StyleSheet, View, Text, Button} from 'react-native';
import {
  ZegoUIKitPrebuiltCall,
  ONE_ON_ONE_VIDEO_CALL_CONFIG,
  GROUP_VOICE_CALL_CONFIG,
  ONE_ON_ONE_VOICE_CALL_CONFIG,
} from '@zegocloud/zego-uikit-prebuilt-call-rn';
import {AppId, AppSignIn} from '../../constants';
export default function CallScreen(props) {
  const prebuiltRef = useRef();
  const {route} = props;
  const {params} = route;
  const {userID, userName} = params;

  return (
    <View style={styles.container}>
      <ZegoUIKitPrebuiltCall
        ref={prebuiltRef}
        appID={AppId}
        appSign={AppSignIn}
        userID={userID}
        userName={userName}
        callID="rn12345678"
        config={{
          ...ONE_ON_ONE_VOICE_CALL_CONFIG,
          // ...ONE_ON_ONE_VIDEO_CALL_CONFIG,
          onHangUp: () => {
            console.log('########CallPage onHangUp');
            props.navigation.navigate('HomeScreen');
          },
          durationConfig: {
            isVisible: true,
            onDurationUpdate: duration => {
              console.log('########CallPage onDurationUpdate', duration);
              if (duration === 5) {
                prebuiltRef.current.hangUp();
              }
            },
          },
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 0,
  },
});

ERROR IMAGE:

REACT NATIVE DOCTOR:

Common
 ✓ Node.js
 ✓ npm

Android
 ✓ JDK
 ✓ Android Studio - Required for building and installing your app on Android
 ✓ Android SDK - Required for building and installing your app on Android
 ✓ ANDROID_HOME

Errors:   0
Warnings: 0

REACT NATIVE INFO:

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 6.04 GB / 15.87 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20220320.140531.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 23, 25, 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
      System Images: android-28 | Google APIs Intel x86 Atom_64, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-30 | Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: AI-213.7172.25.2113.9123335
    Visual Studio: Not Found
  Languages:
    Java: 15.0.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.2 => 0.64.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Answer 1

I have found the error in @zegocloud/zego-uikit-prebuilt-call-rn file Just change the background to backgroundColor

filepath in node modules

node_modules\@zegocloud\zego-uikit-rn\lib\commonjs\components\audio_video_container\ZegoAudioVideoContainer