DEV Community: Kyle Buntin

How to build a simple Live Video Streaming App with React Native and Agora

Kyle Buntin — Sat, 22 Jan 2022 15:49:37 +0000

There are different characteristics to building flexible, premium, live video streaming app. For instance, While maintaining cross-platform compatibility, maintaining low latency, load balancing, and directing thousands of users in the audience can be quite tasking.

However, there is a convenient way to making this happen using the Agora React Native SDK. In this article, we will create a live broadcasting app which can accommodate numerous broadcasters and entertain thousands of users by using the magic of the Agora Video SDK.

What we need:

Agora Account
App-ID from Agora
Client-side implementation with the module — react-native-agora

Client-side implementation

We add our agora module

yarn add react-native-agora

After doing that, you follow the simple installation instructions here for android and here for iOS.

Got to your ios folder and run:
pod install

Now we implement the Live stream.

First, we need to sort out permissions in a different file named Permission.ts, we request permission bellow.

  import { PermissionsAndroid } from 'react-native';

export default async function requestCameraAndAudioPermission() {
  try {
    const granted = await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.CAMERA,
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
    ]);
    if (
      granted['android.permission.RECORD_AUDIO'] ===
        PermissionsAndroid.RESULTS.GRANTED &&
      granted['android.permission.CAMERA'] ===
        PermissionsAndroid.RESULTS.GRANTED
    ) {
      console.log('You can use the cameras & mic');
    } else {
      console.log('Permission denied');
    }
  } catch (err) {
    console.warn(err);
  }
}

Now we import it in our main LiveScreen.js file where our main logic will be implemented

import React, { useEffect, useRef, useState } from 'react';
import {
  Platform,
  ActivityIndicator,
  StyleSheet,
  Dimensions,
} from 'react-native';
import 'react-native-get-random-values';
import { v4 as uuid } from 'uuid';
import RtcEngine, {
  ChannelProfile,
  RtcLocalView,
  RtcRemoteView,
} from 'react-native-agora';
import requestCameraAndAudioPermission from './Permission';

const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;

export default function LiveScreen({ route }) {
  const isBroadcaster = route.params.type === 'create';
  const channelId = route.params.channel;

  const [joined, setJoined] = useState(false);

  const AgoraEngine = useRef();

  useEffect(() => {
    if (Platform.OS === 'android') requestCameraAndAudioPermission();
    const uid = isBroadcaster ? 1 : 0;
    init().then(() =>
      AgoraEngine.current.joinChannel(null, channelId, null, uid),
    );
    return () => {
      AgoraEngine.current.destroy();
    };
  }, []);

  const init = async () => {
    AgoraEngine.current = await RtcEngine.create('You App ID Here');
    AgoraEngine.current.enableVideo();
    AgoraEngine.current.setChannelProfile(ChannelProfile.LiveBroadcasting);
    if (isBroadcaster)
      AgoraEngine.current.setClientRole(ClientRole.Broadcaster);

    AgoraEngine.current.addListener(
      'JoinChannelSuccess',
      (channelId, uid, elapsed) => {
        console.log('JoinChannelSuccess', channelId, uid, elapsed);
        setJoined(true);
      },
    );
  };

  const onSwitchCamera = () => AgoraEngine.current.switchCamera();

  return (
    <View style={styles.container}>
      {!joined ? (
        <>
          <ActivityIndicator
            size={60}
            color="#222"
            style={styles.activityIndicator}
          />
          <Text style={styles.loadingText}>
            {'Joining Stream, Please Wait'}
          </Text>
        </>
      ) : (
        <>
          {isBroadcaster ? (
            <RtcLocalView.SurfaceView
              style={styles.fullscreen}
              channelId={channelId}
            />
          ) : (
            <RtcRemoteView.SurfaceView
              uid={1}
              style={styles.fullscreen}
              channelId={channelId}
            />
          )}
          <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.button} onPress={onSwitchCamera}>
              <Text style={styles.buttonText}>{'Switch Camera'}</Text>
            </TouchableOpacity>
          </View>
        </>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  loadingText: {
    fontSize: 18,
    color: '#222',
  },
  fullscreen: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
  },
});

Let's work through the bunch of code we just wrote

The LiveScreen receives a props: a channelId and a type. The channelId is a unique string of the channel to connect to and the type can either be "create" or "join" to either start a broadcast of join one.
We acquired Camera and Microphone permissions from Android to send Audio and Video.
We initiated the Agora Engine instance and setup all the necessary configurations.
We joined the channel using no authentication and the channelId from the route prop.

(NB: The joinChannel function takes 4 arguments, Authentication Token, Channel ID, Optional Info, and Optional UID.

For a production app, you will need to fetch an authentication token to be generated by a middleware hosted on server-side. To learn more about joinChannel, refer here.)

We displayed the Local View and Remote View based on who is using the app, the broadcaster, or the audience.
We added a Switch Camera button to switch between the front camera and the back camera.

And That's all. You have a simple Live stream app working in minutes.

Now, the next step can be to add advanced features such as:

Live stream with video conference(many participants) and multiple audience, with embedded live chat with multiple audience, send request to join stream, and more. You can checkout this complete Instagram clone with the features mentioned above and more.

You should checkout QuickComponent for other templates such as a Video calling app, Whatsapp clone, Shopify mobile app templates, and more.

CreateRef VS UseRef

Kyle Buntin — Thu, 14 Oct 2021 08:39:31 +0000

A long time React user must have come across createRef and useRef refs to avoid the typical React dataflow and access a DOM element or a React component. Initially, these two provide similar functions, especially when looking closer at how each of them functions. Although, this is not the case. In order to eliminate the confusion between createRef and useRef, emphasis on the differences between these two will be given.

First, before going deep into their differences, it is important to know how and where refs can be used in React.

Specifically in React, Refs provides an escape invent to directly access React components or DOM elements in place of props and component state. This however, gives us the chance to modify the values that are associated with the React component or DOM elements without substituting its state. Moving forward, we’ll be going into the differences between CreateRef and UseRef.

The utmost difference between CreateRef and UseRef is that it is advisable to use CreateRef inside class components and UseRef inside function components. The question now is, can we use it the other way round? An example will be given below.

function TextInput () {
    const textInput = createRef()

    const focusOnInput = () => {
        textInput.current.focus()
    }

    return (
        <div>
            <input ref={textInput} type="text" />
            <button onClick={focusOnInput}>Focus on text input</button>
        </div>
    )
}

In the example above, using CreateRef does not have any specific difference to using useRef. Both refs successfully achieves the required goal of focusing the input in this situation.

However, what if we decide to use CreateRef instead of useRef for a different situation inside the following ValueComponent function?

function ValueComponent () {
    const valueComponent = createRef(10)

    const changeValue = () => {
       valueComponent.current += 1
    }


    return (
        <div>
            <div ref={valueComponent}>Value: {valueComponent.current}</div>
            <button onClick={changeValue}>Change Value</button>
        </div>
    )
}

Here, we can still get away with using CreateRef inside function component. The question now is; What happens if we render the element after changing the value stored in ref?

function ValueComponent () {
    const valueComponent = React.createRef(10)
    const {state, setState} = React.useState()


    return (
        <div>
            <div ref={valueComponent}>Value: {valueComponent.current}</div>
            <button onClick={() => (valueComponent.current = 2, setState({}))}>Change Value</button>
        </div>
    )
}

Clicking on the button, we expect to see the value inside the div to change to 2 from the initial value of 10. In reality however, the value displayed is not 2 but 10. Why is this so?

Once a function component re-renders, it acts like a normal function and execute the full content in function logic. In this case, though the value of component current changes to 2 when we click the button, it changes again to 10 once the component re-renders. It is clear that the displayed value does not change as expected.

Furthermore, CreateRef works with class components in this structure because re-rendering a class component only calls the render() function of the component. Given the nature of function complements, it is safe to say we cannot use createRef with them in the same aspect. Alternatively, we have to make use of useRef.

UseRef however does not reboot its values every time a function component re-renders. As a substitute, it persists the value stored all through the lifetime of the component.

function ValueComponent () {
    const valueComponent = React.useRef(10)
    const {state, setState} = React.useState()


    return (
        <div>
            <div ref={valueComponent}>Value: {valueComponent.current}</div>
            <button onClick={() => (valueComponent.current = 2, setState({}))}>Change Value</button>
        </div>
    )
}

When the button is clicked, the value changes to 2.

In summary, in the process of using React for fronted development, there are situations where we have to go from the typical dataflow to directly accessing the DOM elements and React components. We make use of createRef and useRef API’s for this reason.
Nevertheless, the two refs behave similarly most of the time, there is still a major difference between the two: createRef is required to be used inside Class components and useRef is required to be used inside function components. With this in mind, one can make use of React refs one program without needing to debate on which one to choose from henceforth.

If you are interested in learning React native, you can check out this cool mobile templates at Quick Component. These mobile templates are production ready and also good for learning purposes.
They include;
Dating app Whatsapp clone and more

How to Reduce your Android release App size, up to 47% or even more — React Native

Kyle Buntin — Wed, 29 Sep 2021 08:11:15 +0000

After finished developing and building your app, you then realise that it is somewhat bigger than what you prefer.
The first thought that comes to your mind is "how can this be reduced?"
Consider using Hermes to achieve this.

In one of our apps at Quick Component, we experienced about 19.2 percent decrease in app size when building release with Hermes. See the image below.

Without Hermes

With Hermes

Also checkout another app where about 47% decrease in app size was experienced using Hermes.

How do we build with Hermes?
You only need to edit one or two files.

In android/app/build.gradle enable Hermes

 project.ext.react = [     
    entryFile: "index.js",          
    enableHermes: true  // clean and rebuild if changing 
 ]

Also, if you're using ProGuard, you will need to add this rule in proguard-rules.pro :

-keep class com.facebook.hermes.unicode.** { *; }

Next, if you've already built your app at least once, clean the build:

$ cd android && ./gradlew clean

And now you can build ur release as you would normally do with

./gradlew bundleRelease

Also note that There are other benefits to using hermes like stated here:
Hermes is an open-source JavaScript engine optimized for running React Native apps on Android.
For many apps, enabling Hermes will result in improved start-up time, decreased memory usage, and smaller app size.

Also, ensure you're using at least version 0.60.4 of React Native.

Checkout a fully functioning templates with backend like the Dating app, Whatsapp clone(with audio and video calling), UberEats clone and more built with React Native.

What you didn't know about presenting screens with react-navigation

Kyle Buntin — Mon, 20 Sep 2021 22:18:58 +0000

Routing and Navigation in your react native apps have always been managed conveniently by react navigation using different navigators like the Stack Navigator.

But do you know you can easily manage how your screens are presented by editing the stack navigation options?
This can be done using TransitionPresets imported from “@react-navigation/stack”. Let’s get right into it. First you import TransitionPresets.

From the dropdown in the image above, we have lot of options to choose from when presenting our screens. In this article, we will examine a few.

ScaleFromCenterAndroid: As stated in the image, this is the standard Android navigation transition when opening an activity. See in the gif bellow how it is been used in a Dating app to transition from a card to a card detail.

ModalPresentationIOS: In here, we have the standard ios modal presentation style introduced in iOS13.

You should note that transitions are very smooth, but reduced here since it was a gif image upload. Moving forward, you can take advantage of this TransitionPreset and try out other options on your own. In doing so, you won’t even need the modal component imported from react-native, and you will have more control on how individual screens are presented.
See here how we have taken full advantage of this at Quickcomponent with all fully functioning templates like the Dating app, Whatsapp clone, UberEats clone and more.

Get a Dating App built with React Native

Kyle Buntin — Fri, 17 Sep 2021 11:07:43 +0000

Reduce your development time tremendously with a fully functional Dating app for both IOS and Android build with React Native.
With the React Native Dating app, You get a clean codebase that can be easily modified and maintained. Created with React Native, easily editable and ready to launch.

Features include:

Matching Algorithm for recommendations
Swipe for Like, Super like and Dislike - like Tinder
Filter
- Age
- Distance
- Location
- Gender Interest
Video and Audio calling
- Connection Service integration for Android
- PushKit & CallKit integration for iOS
- Foreground, Background and Locked Screen calls
- Group and 1:1 calls
Messaging
- Real-time 1:1 Private conversation
- Real-time Group conversation
- Share photos, videos, and audio file.
- Typing indicator
- Online indicator
- last seen
- unread message count
- clickable URL
- copy text feature
- caption photos and videos
Push Notification
- New match
- New messages
Settings
- switch Show me
- push notifications settings for chat and new match
Account
- Profile Details
- Edit Profile Info
Customer Authentication and Registration Flow

How to Structure and Modularise a Maintainable code in React Native

Kyle Buntin — Wed, 18 Aug 2021 07:43:55 +0000

When bootstrapping a new project, we always strive to achieve the best structure that enables, scalability, easy maintenance and a modularised structure. The goal is to have a self explanatory code structure. In this tutorial which is opinionated and was inspired by my new job at QuickComponent, I will be sharing few tips on how we have tried to achieve a well structured code in building a simple LoginApp Screen.

For this simple login screen, we have folders and files such as:

src: A folder where all source code lives
components: This house reusable components that are shared anywhere in the app.
hooks: This folders contains the general custom hooks used anywhere in the app.
screens: This generally holds different reusable components to make up a single component for screen display.

Analysing the components folder:

Button: A subfolder of components, In here, we have separated the ui from the styles file.

AnimatedTextInput: A subfolder of components, In here, we have a text input component of which the ui is separated from the styles file.
AnimatedInputFields: A subfolder of components, In here, we have used AnimatedTextInput to create auto generate multiple fields based on given props passed.
index: A file that simply exports all components to enable us import in this manner.

Analysing the screens folder:

Auth: A subfolder of screens In here, we have created multiple subfolders in a attempt to group all auth related screens in a single folder.
hooks: A subfolder of Auth, In here, we have all custom auth related hooks. This include a useAuth hook used to authenticate user. In doing so, you have separated your auth business logic from the ui code.
components: A subfolder of Auth, In here, we have all components reused only in Auth related screens.
LoginScreen: A subfolder of Auth, In here, we have The LoginScreen ui file separated from the styles file. You can also find the inputFields file, whose content is display in the picture bellow.
inputFieldsConfig: A subfolder of LoginScreen, This inputFieldsConfig file clearly defines the input fields rendered in the login screen. In doing so, it becomes easy to add or delete from a field without touching the UI code. It also contains the error messages and regex for validation.

index: Just like the index file recently mentioned, it does the same thing.

You should Take note of what we have done below and try to adapt it to your own style of structuring and modularising. we have:

Made sure all codes in each files are written with the goal of not exceeding 350 lines of code in a single file. When this threshold is hit, we start to examine the module being created and see how it can be broken down.
We try to create reusable custom hooks to separate business logic from UI code.
We try to group related components close to the screen components when we are not sure if it will be use any other place in the app.
We have made sure a single function doesn’t get overly long and become too difficult to read.

More pictures showing code sample

Moving forward, you can try to adopt and improve this style of structuring in your own app today.

You will learn, unlearn, grow and get better in the way you structure your react native projects, when you work in a team, meet other developers and get your hands on large structured projects.

We appreciate the time spent in reading this article. Find the complete source code for the LoginApp here.

Check out other mobile templates that has adopted this file structuring system at QuickComponent, where this article was first published.

This mobile templates includes a Whatsapp clone, Uber Eats Clone and more. It comes with a backend (Firebase) configured, saving you quality hours of development time.

How To Build A Food Delivery App Like Uber Eats - Uber Eats clone

Kyle Buntin — Sun, 15 Aug 2021 23:29:48 +0000

Building an Uber Eats Clone

Building a Food delivery platform that connects you with a wide range of nearby restaurants and makes getting great food from your favorite local restaurants as easy as requesting a ride, consists of 3 panels.

These panels can be customised by adding extra features and make it unique from other apps.

Restaurant App: A Restaurant, create a menu and add a new cuisine, with options letting customer browse through their page of different menu and place an order. The order placed is received and prepared for food delivery and places a request to the delivery boy to deliver the order to the customer. 75% of the profit, is kept by the Restaurant, and 25% goes to the Food delivery platform.

Customer App: A customer can browse through hundreds of nearby restaurants, make search for preferred restaurant, select a cuisine of their wish and place an order. This order is fully tracked on a map by the customer.

Delivery Boy App: A delivery request is received by the delivery boy They can choose to accept the order based on their convenience, and get turn-by-turn navigation UI with voice support.

Generally, Before launching a food delivery platform like Uber Eats, you will be interested in;

Carrying Out a Research

The first thing would be to consider your target audience.
Your business model and how you plan to operate.
The persisting trend in the food delivery network and how you can improve on that.
Consumer preference to enable you have the right first set of Restaurants on ur app.

Payment support

You would want to consider a good payment support system that enable you accept all kind of payments. Stripe payment is a good choice to consider and also if you support cash on delivery.

Considering all this, putting a team of developers is costly, from thousands of dollars and more than 6 months of development time to complete. You should not wait that long to start. Consider using a template. The good people at QuickComponent have an affordable Uber Eats Clone Template that supports both iOS and Android and is ready for launch. This is important as it saves you Thousands of dollars and months of development time. You simply download and have your app running. You can easily modify this template to fit your business needs and requirements.

How To Turn Any Shopify Store to a Mobile App

Kyle Buntin — Sun, 15 Aug 2021 22:19:35 +0000

In this article, we are going to describe in details, the simple steps required to turn any Shopify store to a mobile app for iOS and android using this Shopify template.

Check out the template here

This template is built with Expo React Native, and is optimised for both android and iOS. All you really need to do to have your app ready to be published to App Store(ios) or Google Play Store(Android) can be summarised in the steps below.

Shopify set up.
Create a Stripe account.
Link the created Stripe account to enable Apple pay, Google pay, and scan or input Card to pay.

You should note that the listed steps above require no coding knowledge. Everything is fully explained in details and anyone can apply and turn their Shopify store into a mobile app with ease.

Shopify set up

To set up Shopify, you will need to;

Generate the necessary Shopify API keys -Storefront access token, API key and password.

Sign in to your Shopify admin dashboard of the store you have chosen to connect with your mobile app and generate a Storefront access token.

Right at the dashboard, the left menu list, go to Apps.
You should see Manage private apps, at the bottom right of the page, click on it.

Click on Create a new private app.
Locate App Details section, and input a name for the private app you are about to create and your contact email address. (Shopify uses the email address to contact the developer if there is an issue with the private app, such as when an API change might break it).
Locate Admin API section, and select the areas of your store you will like the app to have access to.
Please, Make sure you tick "Allow this app to access your storefront data..." like in the picture below.

In the Storefront API permissions section, select which types of data you want to expose to the app.
Now click Save, and your storefront access token will be created.

After your Storefront access token has been created successfully, you will be routed to a page with different sections:

App Details.
Admin API.
Storefront API.

Locate the Admin API, section, where you will find the API key and password, note this, as you will need this later. Also, make sure read and write permissions are set for all bellow.

Also, Scroll to the bottom to locate the Storefront API section, note the Storefront access token you will find there.

Update the Shopify keys in the React Native code** Now, the noted keys should be used to update the config file on your project.

Open src/config.js file and paste the keys where specified.

See here to enable customer accounts

You should note that details on getting started and linking stripe to your mobile app is added to the template folder.

Getting your mobile app to Run

First, make sure you have Node install and expo cli installed.
We have chosen yarn to manage dependencies; since things are quite fast with yarn.
Install yarn here If you do not currently have it installed.

To install dependencies, run command:

expo install

For IOS run the command :

yarn ios

For Android run the command :

yarn android

React Native Video Calling App

Kyle Buntin — Tue, 10 Aug 2021 07:02:39 +0000

What you need:

A Twilio Account
Server-side implementation (node.js)
Client-side implementation with the module — react-native-twilio-video-webrtc

Twiilio Account
We will be using Twilio, so you should signup here and retrieve the essential keys - API KEY SID, ACCOUNT SID, API KEY SECRET.

After that, navigate to Settings => API Keys

click add a new api key, for type, select the dropdown and choose main.
The api secret will only be shown once. You should copy and paste somewhere safe as you will need all keys for server-side implementation.

Server-side implementation

The step here is quite simple. Implement ur regular node express and add this route:

import 'dotenv/config';
import express from 'express';
import twilio from 'twilio';

const AccessToken = twilio.jwt.AccessToken;
const VideoGrant = AccessToken.VideoGrant;
const app = express();

app.get('/getToken', (req, res) => {
if (!req.query || !req.query.room || !req.query.username) {
 return res.status(400).send('username and room parameter is required');
}
const accessToken = new AccessToken(
    process.env.ACCOUNT_SID,
    process.env.API_KEY_SID,
    process.env.API_KEY_SECRET
 ); // Set the Identity of this token
 const grant = new VideoGrant();

  accessToken.identity = req.query.username;// Grant access to Video
  grant.room = req.query.room;

  accessToken.addGrant(grant); // Serialize the token as a JWT
  const jwt = accessToken.toJwt();
  return res.send(jwt);
  });

For this endpoint, we get a username as string and a room as string in the body of the query. We create a room and add the user to that room awaiting other participants.

Client-side implementation

Now we can add twilio video webrtc module to our project

yarn add https://github.com/blackuy/react-native-twilio-video-webrtc

Then, you follow the simple installation instructions here for both android and iOS.

import React, { useState, useRef } from "react";
import {
 Alert,
 AppRegistry,
 StyleSheet,
 Text,
 TextInput,
 View,
 Button,
 PermissionsAndroid,
 Platform,
 TouchableOpacity,
} from "react-native";

import {
 TwilioVideoLocalView,
 TwilioVideoParticipantView,
 TwilioVideo,
} from "react-native-twilio-video-webrtc";

import styleSheet from "./styles";

const styles = StyleSheet.create(styleSheet);

const App = (props) => {
 const [isAudioEnabled, setIsAudioEnabled] = useState(true);
 const [isVideoEnabled, setIsVideoEnabled] = useState(true);
 const [status, setStatus] = useState("disconnected");
 const [participants, setParticipants] = useState(new Map());
 const [videoTracks, setVideoTracks] = useState(new Map());
 const [room, setRoom] = useState("");
 const [username, setUsername] = useState("");
 const twilioVideo = useRef(null);

 const fetchToken = async () => {
 try {
 const res = await fetch(
 `https://<your_base_url>/getToken?username=${username}&room=${room}`
      );
 if (!res.ok) {
 console.log("error", error);
 Alert.alert("API not available");
 return null;
      }
 const jwt = await res.text();
 return jwt;
    } catch (error) {
 console.log("error", error);
 Alert.alert("An Error occurred");
 return null;
    }
  };

 const _onConnectButtonPress = async () => {
 if (Platform.OS === "android") {
 await _requestAudioPermission();
 await _requestCameraPermission();
    }
 const token = await fetchToken();
 if (!token) {
 return;
    }
 twilioVideo.current.connect({
 accessToken: token,
 enableNetworkQualityReporting: true,
 dominantSpeakerEnabled: true,
    });
 setStatus("connecting");
  };

 const _onEndButtonPress = () => {
 twilioVideo.current.disconnect();
  };

 const _onMuteButtonPress = () => {
 twilioVideo.current
      .setLocalAudioEnabled(!isAudioEnabled)
      .then((isEnabled) => setIsAudioEnabled(isEnabled));
  };

 const _onFlipButtonPress = () => {
 twilioVideo.current.flipCamera();
  };

 const _onRoomDidConnect = () => {
 setStatus("connected");
  };

 const _onRoomDidDisconnect = ({ error }) => {
 console.log("ERROR: ", error);

 setStatus("disconnected");
  };

 const _onRoomDidFailToConnect = (error) => {
 console.log("ERROR: ", error);

 setStatus("disconnected");
  };

 const _onParticipantAddedVideoTrack = ({ participant, track }) => {
 console.log("onParticipantAddedVideoTrack: ", participant, track);

 setVideoTracks(
 new Map([
        ...videoTracks,
        [
 track.trackSid,
          { participantSid: participant.sid, videoTrackSid: track.trackSid },
        ],
      ])
    );
  };

 const _onParticipantRemovedVideoTrack = ({ participant, track }) => {
 console.log("onParticipantRemovedVideoTrack: ", participant, track);

 const videoTracks = new Map(videoTracks);
 videoTracks.delete(track.trackSid);

 setVideoTracks(videoTracks);
  };

 const _onNetworkLevelChanged = ({ participant, isLocalUser, quality }) => {
 console.log(
 "Participant",
 participant,
 "isLocalUser",
 isLocalUser,
 "quality",
 quality
    );
  };

 const _onDominantSpeakerDidChange = ({ roomName, roomSid, participant }) => {
 console.log(
 "onDominantSpeakerDidChange",
 `roomName: ${roomName}`,
 `roomSid: ${roomSid}`,
 "participant:",
 participant
    );
  };

 const _requestAudioPermission = () => {
 return PermissionsAndroid.request(
 PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
      {
 title: "Need permission to access microphone",
 message:
 "To run this demo we need permission to access your microphone",
 buttonNegative: "Cancel",
 buttonPositive: "OK",
      }
    );
  };

 const _requestCameraPermission = () => {
 return PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, {
 title: "Need permission to access camera",
 message: "To run this demo we need permission to access your camera",
 buttonNegative: "Cancel",
 buttonPositive: "OK",
    });
  };

 return (
 <View style={styles.container}>
 {status === "disconnected" && (
 <View>
 <Text style={styles.welcome}>React Native Twilio Video</Text>
 <TextInput
 style={styles.input}
 autoCapitalize="none"
 value={username}
 onChangeText={(text) => setUsername(text)}
 />
 <TextInput
 style={styles.input}
 autoCapitalize="none"
 value={room}
 onChangeText={(text) => setRoom(text)}
 />
 <Button
 title="Connect"
 style={styles.button}
 onPress={_onConnectButtonPress}
 ></Button>
 </View>
      )}

 {(status === "connected" || status === "connecting") && (
 <View style={styles.callContainer}>
 {status === "connected" && (
 <View style={styles.remoteGrid}>
 {Array.from(videoTracks, ([trackSid, trackIdentifier]) => {
 return (
 <TwilioVideoParticipantView
 style={styles.remoteVideo}
 key={trackSid}
 trackIdentifier={trackIdentifier}
 />
                );
              })}
 </View>
          )}
 <View style={styles.optionsContainer}>
 <TouchableOpacity
 style={styles.optionButton}
 onPress={_onEndButtonPress}
 >
 <Text style={{ fontSize: 12 }}>End</Text>
 </TouchableOpacity>
 <TouchableOpacity
 style={styles.optionButton}
 onPress={_onMuteButtonPress}
 >
 <Text style={{ fontSize: 12 }}>
 {isAudioEnabled ? "Mute" : "Unmute"}
 </Text>
 </TouchableOpacity>
 <TouchableOpacity
 style={styles.optionButton}
 onPress={_onFlipButtonPress}
 >
 <Text style={{ fontSize: 12 }}>Flip</Text>
 </TouchableOpacity>
 <TwilioVideoLocalView enabled={true} style={styles.localVideo} />
 </View>
 </View>
      )}

 <TwilioVideo
 ref={twilioVideo}
 onRoomDidConnect={_onRoomDidConnect}
 onRoomDidDisconnect={_onRoomDidDisconnect}
 onRoomDidFailToConnect={_onRoomDidFailToConnect}
 onParticipantAddedVideoTrack={_onParticipantAddedVideoTrack}
 onParticipantRemovedVideoTrack={_onParticipantRemovedVideoTrack}
 onNetworkQualityLevelsChanged={_onNetworkLevelChanged}
 onDominantSpeakerDidChange={_onDominantSpeakerDidChange}
 />
 </View>
  );
};

export default App;

copy and paste the above code in ur react native project, enter a room and a username and hit the connect button to start your video call.
Oh. and make sure you have at least two devices to test and see that it actually works.

After implementing a a basic video call in react native using Twilio , implementing both server-side and client side, the next step can be to add advanced features and help improve your skills like building a WhatsApp clone which include standard calling features such as:
Ringing another participant or multiple participant video calling rooms, group calls, managing and displaying participant status such as busy, declined call or not answered call.

You should checkout QuickComponent for a proper Video calling app where all this features has been added. You find the React Native WhatsApp Clone previously mentioned and more React native apps like, Dating app, UberEats clone, and more with complete video calling feature.

Building Apps with React Native and Its Benefits

Kyle Buntin — Sun, 08 Aug 2021 21:31:52 +0000

Building a mobile app, you will want to achieve attractiveness, great functionality and good user-experience. Below are some examples of how a successful mobile app is expected to be:

◦ COMPATIBLE: The app is expected to function in an effective manner for the device and its operating system.

◦ USER FRIENDLY AND APPEALING: The app cannot have far more than usual interfering graphics. It is important that the app should look good and as well function properly without the normal usage being disturbed or affected in anyway.

◦ UNIQUE AND BRANDED: There's absolutely no reason assimilating into the extreme excess of apps available. Your app has to be highly noticeable and should therefore be able to create an impression on its users.

◦ SUITABLE FOR ITS PURPOSE: Apps must meet adequate standards for the target demographic and also for the audience your app would be helpful for. Its design needs to find all the boxes suitable.
React Native is one of the app frameworks that make their app function effectively and incapable of being wrong or misused in less time. The JavaScript-based framework however helps you create the best apps from scratch or existing apps for the best User Interface and User Experience.

HOW DOES REACT NATIVE HELP?

An app framework is a blessing for beginner developers. Below are the characteristics of React Native development:

◦ Great Coding: React Native includes JavaScript and it is rendered with their native code. They are able to exist and perform in agreeable condition with many platforms and they help create platform-specific technology with ease.

◦ Native User Experience: The platforms agnostic components helps give access to the UI building blocks without any complications which means there's no need to compromise your unique ideas.

◦ Versatile: The work is easier and faster for new developers and existing ones because the framework is used to wrap already existing code for usage across different platforms.

◦ Speed: When the work is completed, it can be saved, iterated and edited in no time thanks to React Native. It helps developers work at lighting speech with instant saving.

BENEFITS RESULTING IN BUILDING APPS WITH REACT NATIVE

The development toolkit designed by Facebook however helps beginners to have significant progress across the most appealing apps with an extensive choice of the best elements in the market. This technology comes with benefits such as:

1. Less Development Time: The reusable code offered can be used on many platforms to a large extent. Affording comfort in editing the existing work simply from amateurs to professionals, a prebuilt framework can surely increase their speed.

2. Affordable: It is much affordable to apply REACT NATIVE than to develop native codes for various operating systems. The framework capable of being used again makes its simpler for integration and creation.

3. Engaging UI/UX Interface: A successful app should be interactive, it shouldn't be like a storybook because responses are required from its users. With components like Picker, Button, Slider, etc, the job is made quite easier.

4. Credibility: Apps like Facebook, F8, Instagram, Skype, and Bloomberg are the products of React Native developers which is therefore a guaranteed success because they were all built on the platform. The framework however, makes certain the foolproof app development with cross-platform compatibility.

5. Transfer and Testing: Through a range of test runs, the Native App developers give certainty and confidence about the apps quality before the app is released. The Native code that has been used for apps can also be migrated and edited by the developers hassle-free.

In conclusion, React Native development has proven to have the best quality and also to be cost-effective.
QuickComponent is a company that builds mobile app templates using react native framework. This templates comes with a backend configured, and are ready to launch, saving you thousands of dollars and quality hours of development time.

How to add Stripe payments in React Native

Kyle Buntin — Sun, 08 Aug 2021 18:10:02 +0000

Using stripe in react native, you should implement:

Server-side (node.js)
Client-side using the official stripe react-native module.

— @stripe/stripe-react-native

Server-side

You can find a great example to guide you here. This was implemented by the good people at stripe. We will make a few adjustment to this code. Using the routes found in the example, we will adjust how it is handled. The result is in the image below.

payment-sheet: We receive a request body containing customerId, currency, amount, and we make the necessary checks to ensure this field is supplied. After that, we use the fields to create a paymentIntent and an ephemeralKey. We send a response of this object to the client side.

stripe-key: This was implemented to retrieve the stripe publishable key.

create-setup-intent: We implemented this to set up stripe. We pass an email in the body of the request, with the email received, we retrieve the existing or create a new stripe customerId. We also create a setupIntent, after which we will have the client_secret available.

We then respond with the publishableKey, clientSecret, and the customerId. And this is all in the server side. You should note that this is a minimum implementation and you should always ensure the amount ti charge is not passed in the body of the request but calculated on the server-side for security reasons.

Client-side using the official stripe react-native module

Again, the good people at stripe, has made it extremely easy for us to implement any stripe supported payment means such as Apple Pay, Card payment, Scan card to pay. We simply present a simple payment sheet.
This payment sheet also enable us manage customer cards(save and delete card) with ease. The work needed here is getting the keys needed to display this sheet hence the server-side implementation. Add the official react native module for stripe by running the command.

yarn add @stripe/stripe-react-native

install pods by running the command

cd iOS && pod install && cd ..

And that’s all for installation, you should rebuild ur app now. If you have any problem while building for iOS relating to linking problem for swift. Then you should Try this solution. It wasn’t included in the documentation and I had to figure it out.

Open ur project in Xcode
From your project directory, add a new file, file.swift and don’t link bridge header when asked.
Also, click on your project and not the target file, then Remove $(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME) and the rest from LIBRARY_SEARCH_PATHS in build settings.

Now that our app is running successfully, We need to wrap our root App, most likely in the App.js file with a StripeProvider imported from @stripe/stripe-react-native, and set the publishableKey and merchantIds props like in the picture below.

We can now create a payment hook. Like in the image below

setupStripePayment and setupPaymentSheet: We assume you are on ur checkout screen and this hook is implemented. These methods are called once the checkout component is mounted. we need to connect with the server-side, fetch the keys required to set up the payment sheet and this method help us to achieve that. we alertOnlinePaymentFailed if an error occurred while setting up the keys. If it is all successful, we initPaymentSheet with the keys and setCanPayOnline to true.

openPaymentSheet: This method is called when the checkout button is pressed. We present a payment sheet and not worry about any other thing but the response from the presentPaymentSheet method. If we have an error filed from the response, we alert alertOnlinePaymentFailed and handle error, and if success, we handle success.

And That is all. We now have the client-side and server-side implemented and you will find that it is extremely easy to implement.
See here how we have included this amazing @stripe/stripe-react-native library in our templates at QuickComponent

Handling all user case error and success, using hooks.
We have also used it in a complete Shopify mobile app templates built with react native. Also available with Woocommerce and Firebase backend.
All Projects can be found here at QuickComponent.