To help you get started, we've collected the most common ways that react-native-agora is being used within popular public projects.

syanbo / react-native-agora / samples / simpleDemo / components / agora.js View on Github

console.log('[RtcEngine] onUserOffline', data);
      this.setState({
          peerIds: this.state.peerIds.filter(uid => uid !== data.uid)
      })
    });
    RtcEngine.on('joinChannelSuccess', (data) => {
      console.log('[RtcEngine] onJoinChannelSuccess', data);
      RtcEngine.startPreview();
      this.setState({
        joinSucceed: true
      })
    });
    RtcEngine.on('audioVolumeIndication', (data) => {
      console.log('[RtcEngine] onAudioVolumeIndication', data);
    });
    RtcEngine.on('clientRoleChanged', (data) => {
      console.log("[RtcEngine] onClientRoleChanged", data);
    })
    RtcEngine.on('error', (data) => {
      if (data.error === 17) {
        RtcEngine.leaveChannel().then(_ => {
          RtcEngine.destroy();
          this.props.onCancel(data);
        });
      }
    })
    console.log("[CONFIG]", JSON.stringify(config));
    console.log("[CONFIG.encoderConfig", config.videoEncoderConfig);
    RtcEngine.init(config);
  }

View more ways to use react-native-agora

NOTE: These sdk and samples only for the Agora Video 4.x APIs. For examples using previous releases please see the following branches:

• 3.x

react-native-agora

This SDK takes advantage of React Native and Agora RTC Video SDK on Android && iOS.

Community Contributor

The community developer Syanbo developed 1.0 version React Native SDK based on the Agora Native SDK from 2016 to 2017. As the community's demand for React Native SDK keeps growing, Agora has achieved official cooperation with Syanbo, this project now is officially maintained by Agora. Thanks to Syanbo for his long-term contributions to React Native SDK.

Release Note

Changelog

Installation

Installing (React Native >= 0.60.0)

Install react-native-agora(^4.0.0):

yarn add react-native-agora

or

npm i --save react-native-agora

Go to your ios folder and run:

pod install

General Usage

import { createAgoraRtcEngine } from 'react-native-agora';

const engine = createAgoraRtcEngine();
engine.initialize({ appId: 'YOUR APP ID' });

or

const createAgoraRtcEngine = require('react-native-agora');
const engine = createAgoraRtcEngine();
engine.initialize({ appId: 'YOUR APP ID' });

Using TypeScript

We suggest you use TypeScript to develop, or use TypeScript eslint to lint your code.

• Getting Started with TypeScript
• Adding TypeScript to an Existing Project

Troubleshooting

Pod install failed (React Native >= 0.62.0)

The error log:

[!] The 'xxx' target has libraries with conflicting names: libcrypto.a.

You should disable Flipper, you can found it in the Podfile, and comment the code about Flipper in AppDelegate.

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  add_flipper_pods!
  post_install do |installer|
    flipper_post_install(installer)
  end

RCT_EXTERN_MODULE Swift modules broken in Xcode 10.2

The error log:

Swift class extensions and categories on Swift classes are not allowed to have +load methods

Fixed in React Native 0.59.3.

Source: https://github.com/facebook/react-native/issues/24139

XCode 11 Beta App Launch Crash

The error log:

Exception '*** -[__NSArrayM objectAtIndexedSubscript:]: index 1 beyond bounds [0 .. 0]' was thrown while invoking getCurrentAppState on target AppState with params (
2,
3
)

Fixed in React Native 0.59.9.

Source: https://github.com/facebook/react-native/issues/25154

FOREGROUND_SERVICE_MEDIA_PROJECTION permission

If you are not using screen sharing feature in your app, you should exclude Screen Sharing extension as below:

// build.gradle (project-level)
signingConfigs{
 ....
}

configurations.configureEach {
    exclude group: "io.agora.rtc", module: "full-screen-sharing"
}
compileOptions{
 ...
}

API

• React Native API
• Android API
• iOS API

Resources

• Complete API Doc at the Developer Center
• Changelog
• Release Notes
• File bugs about this sample
• React Native Getting Started

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT