#Agora io react native how to
#Agora io react native install
#Agora io react native code
#Agora io react native free

We'll pass null for authentication and optional info. Let's not worry about Authentication and Optional info now. To learn more about joinChannel, refer here. It takes 4 arguments, Authentication Token, Channel ID, Optional Info, and Optional UID. To join the channel, the Agora engine instance has a joinChannel function on it. then() to it and join the channel inside it. Since init is an async function, we can add a. Now that we have set all the config required for the Livestream, we need to join the channel.

#Agora io react native install

You can install these in advance or while going through the article.Įnter fullscreen mode Exit fullscreen mode This is the Home Screen you'll see when you open the app. When the text input is empty, the join button will be disabled. The Join button has a text input associated with it to provide the channel ID to join the stream. The Home Screen has 2 buttons, Start and Join. You can find the documentation for the React Native Navigation here. In the starter code, the Navigation is set up using a Stack Navigator with the Home screen and a dummy Live Screen. Follow the Repository's README for instructions. You can clone it from this repository on GitHub. To focus more on the Livestream, I've prepared a starter code.

Make sure you're following the React Native CLI Quickstart, not the Expo CLI Quickstart. You can follow this documentation to set up the environment. This is because video calling SDKs need native modules that are not supported by Expo. Agora's React Native SDK does NOT work with expo managed workflow. IMPORTANT - We will not be using Expo in our project. We'll need this later while setting up Agora in our app. Now, click on the closed eye icon near the App ID to reveal it and copy that App ID. Once you hit on submit, it'll create a new project and you should see it on the Project Management Console. Fill out the Project Name and set the Authentication Mechanism to Testing. Once you've signed up, you'll see the dashboard. You can reach the signup page from here.įill in the details and create an account or you can signup with Google, GitHub, or Cocos. I've made a commit for every step in this tutorial.

If you want to take a look at the final code, check out the GitHub Repo. We'll be going through these steps in this article: If you'd like to learn more about Agora, visit their website or read this article.

#Agora io react native free

You can learn more about Agora's capacity here.Īgora is a paid service, but the first 10,000 minutes are free every month. They also recommend limiting the number of users sending streams concurrently to 17 at most. Real-Time Messaging (which is in BETA at the time of writing this article)Īgora supports up to 1 million users in a live broadcast channel.

Its core technology is real-time communication (RTC).Īgora provides SDKs to build apps that require real-time engagement like: If you are not comfortable with the fundamentals, this is a helpful tutorial that you can go through before beginning with this project.įounded in 2014, Agora.io is a service provider for real-time voice and video. The fundamentals of React and React Native will not be covered in this tutorial.

#Agora io react native how to

How to add event listeners on the livestream to listen to state changes. How to share a channel ID for others to join the livestream. How to create/join a livestream using Agora. See the contributing guide to learn how to contribute to the repository and the development workflow.In this tutorial, we will be building a Livestreaming app with real-time engagement using React Native and Agora.īy the end of this tutorial, you’ll know:

Complete API Doc at the Developer Center.

The error log: Exception '*** -: index 1 beyond bounds ' was thrown while invoking getCurrentAppState on target AppState with params ( The error log: Swift class extensions and categories on Swift classes are not allowed to have +load methods RCT_EXTERN_MODULE Swift modules broken in Xcode 10.2 # you should disable these next few lines. # Note that if you have use_frameworks! enabled, Flipper will not work and

#Agora io react native code

You should disable Flipper, you can found it in the Podfile, and comment the code about Flipper in AppDelegate. The error log: The 'xxx' target has libraries with conflicting names: libcrypto.a. Troubleshooting Pod install failed (React Native >= 0.62.0) Adding TypeScript to an Existing Project.We suggest you use TypeScript to develop, or use TypeScript eslint to lint your code. Const createAgoraRtcEngine = require ( 'react-native-agora' ) const engine = createAgoraRtcEngine ( ) engine.