Before we start

Adding a global activity feed to a mobile application sounds difficult, but, luckily for us, there are third-party libraries to help us, which is one of the things that we like most about React Native.

Today, we’ll use react-native-activity-feed and also, as the documentation states, we’ll need to include the react-native-image-crop-picker if we are using native packages or expo-image-picker if we are using Expo.

To install all of these libraries, run the following scripts on your terminal from your React Native root project folder.

If you are using Expo:

• expo install expo-activity-feed expo-permissions expo-image-picker

If you are using native packages:

• npm install react-native-activity-feed OR yarn add react-native-activity-feed
• npm install react-native-image-crop-picker OR yarn add react-native-image-crop-picker

Remember that, if you are using Xcode, every time you add new libraries to your project you have to run npx pod-install to install pods dependencies.

Important note: to use react-native-activity-feed you need to have a GetStream account (we’ll look at this in the following steps). That said, GetStream provides paid plan options to use its resources; you can still use the Activity Feed package for free for development purposes, but only for a limited time.

Let’s jump into the code of a Global Activity Feed using React Native

First of all, you need to create a React Native project.

If you don’t know how to create your app, just run the following commands on your terminal:

• npx react-native init ProjectName

Now that you’ve created the application, let’s get to coding!

Important note: this example was made using React Native 0.66.

First steps

First, we need to create an account on https://getstream.io/accounts/signup/

After signing up, we’ll navigate to our dashboard where we’ll see that an application has already been created for us. This app includes an App ID, a Key and a Secret Key. We will use those values later.

By clicking on “PRODUCTION APP”, we can access our ‘Feeds’, access keys and other information. Note that we can create new feeds in this section.

Express backend client

It is very important to know that we can’t use our Secret Key inside a desktop/mobile/web environment, so we need a backend client.

Therefore, in a separate folder from the one containing the mobile project, we will run npm init in our console and provide a project name (e.g.: backend-server).

Inside this folder we need to install the two libraries using the following commands:

• npm install express –save
• npm install getstream

Link: Backend.js

This Express server is very minimalist and its main purpose is to allow us to create a user token for the frontend application. Keep in mind that we are always creating and or getting and subscribing to the feed using a user with id ‘tester’. If we want to add more users, we can change this or send the param inside a query param.

With the server running, now we have to fetch a request to, in this case, http://localhost:3000 from the mobile application.

Mobile application

Link: App.js

In this example, we have an activity indicator running while we get the user access token to start our StreamApp. The only two values we have here are the STREAM_API_KEY and STREAM_APP_ID; the token is the one that we got from the backend.

GetStream provides many components to use and customize. The most important one to establish the connection to our feed is StreamApp, which includes the API key, the app ID and a private token. We also need to send our user ID to see our user information in the post we create.

We can customize our feed however we want. We can also copy/paste the GetStream components to our code and make some modifications. In this example, we’ll customize the UserBar component for every Activity, and we’ll also add a LikeButton easily and in just a few lines as you can see in the link above!

Finally, we will see how the notify prop on the FlatFeed component shows that, every time there is a new post available, we will be notified and can tap on the notification area to see the new posts. If we prefer swiping down to update the feed, we can set the notify prop to false.

Global Activity Feed preview

Final thoughts on building a Global Activity Feed using React Native

As we’ve seen, adding an activity feed to our React Native application can be done with just a few lines of code and it is not as hard as it might seem.

The best advantages of this library are that it is easy to use, it is easy to adapt and customize to our designs, and it provides many other features to use in our development projects.

The post Build a Global Activity Feed with React Native and Node.js appeared first on asap developers.

Streaming is something that we see every day at all times in applications such as Instagram, Tik Tok, Twitter, Twitch and Youtube.  Having a streaming functionality in an application sounds a bit difficult. However, luckily for us, with React Native live stream video and a third-party libraries, things are much easier. So let’s take a look at how to add a live stream video functionality to an app.

Requirements for React Native live stream video

In this project, we will use the react-native-nodemediaclient library.

So, after running “npx react-native init ProjectName” and creating our project, we will go to our project’s root folder and install the library running one of the following commands in our console:

• npm install react-native-nodemediaclient 

OR 

• yarn add react-native-nodemediaclient

If we are using a Mac environment we’ll go to the iOS folder and install the pod dependencies by just running the following commands:

• cd ios
• pod install

One last thing we must do is grant camera permissions for our project.

For Android, just add the following lines to ProjectName/android/app/src/main/AndroidManifest.xml :

Link: script

For iOS, add the following lines to ProjectName/ios/QLive/Info.plist:

Link: script

Now, our environment is ready and we can proceed with the application development.

Let’s jump into the code

In our application, we will have 3 screens:

1. Main screen
2. Streaming screen
3. Play Stream screen

Note: This implementation was written using functional components and hooks.

Main screen

This is the screen we will see when our application starts. The function “requestCameraPermission”, as the name indicates, will ask our device to grant Camera and Record Audio permissions.

The useState hooks are used to store the Stream player and Live Session server URLs.

The useEffect hook uses the request permissions function on Android devices (using the Platform API) when our component mounts for the first time.

Then, there’s the screen container where we have an input to write the streaming name that we will place at the end of the URLs.

At the bottom of the screen, we have two buttons to go to the other two screens.

Finally, we have a navigation component to navigate inside our application.

Link: script

Streaming screen

This screen is where we will use our mobile’s front or back camera to start streaming.

Keep in mind that the first time we get to this screen or the Play Stream one, we will be asked to grant Camera and Audio permissions. 

We use a useState hook to set a reference to the NodeCameraView component and the useEffect hook to stop the streaming content once we get on the screen.

Inside the NodeCameraView component, we have props that we can use to adjust the audio definition, video resolution, the available cameras, and much more.

One important prop of this component is outputUrl, which is where we set the URL and ports where our streaming will be played so others can join it.

At the end of the component we have three buttons with the following functions:

1. Switch between the front and back camera.
2. Start the stream transmission or stop it.
3. Return to the Main screen.

Link: script

Play React Native Live Stream screen

On this last screen, we can use the useState and useEffect hooks to get and set the component reference, but in this case, we’ll use NodePlayerView.

As the name states, this component is used to see streaming content. On its inputUrl prop, we will set the URL from the streaming that we want to watch.

Our example sets the URL from the input on the Main screen where we can write the name of the Stream we would like to join.

Other props that NodePlayerView has are the autoplay option, buffer time and max buffer time; these last two can be used to adjust the transmission if the video is getting some delay. 

The onStatus prop is used in this example to display the streaming state on the console, so we will be able to see when the transmission is finished or when we disconnect from it. 

Keep in mind that if we set a wrong URL or the transmission is finished, we will see a black screen.

At the end of the component, we have a back button to return to the Main screen.

Link: script

Application preview

Final thoughts on React Native Live Stream Video

One of the best things about React Native is that there are always third-party libraries that make things easier for us. As we have seen in this example, integrating streaming features into our applications was quite simple thanks to the Node Media Client library. Are you ready to try it out?

The post React Native Live Stream Video appeared first on asap developers.

In a previous post, we explained how to add and set up a video player in your React Native application. This time around, we’ll show you how to add full-screen landscape orientation to your video player and use the library React Native Orientation Locker.

Before we start with React Native Video 

Keep in mind that the project files are in the initial post mentioned above. This post will pick up from where we left off on that article. We will use a new library to control our mobile screen orientation called ‘React Native Orientation Locker’.

Note: This demo was made with React Native version 63.3. The following setup applies only to React Native versions higher than 60.0. The setup instructions for older versions can be found on the official library documentation.

Let’s setup Orientation Locker

First of all, you’ll need to add the library to the project using one of the following commands in your terminal:

• yarn add react-native-orientation-locker

• npm i react-native-orientation-locker

For iOS devices, you’ll need to run the following command on Mac inside the ‘iOS’ project folder:

• pod install

Next, you’ll need to manually modify some Android and iOS files to add some lines of code following the instructions below.

iOS setup

For iOS, you will need to modify the following file:

• AppDelegate.m

Link: AppDelegate.m

Android setup

For Android, you will need to modify the following file:

• MainActivity.java

Link: MainActivity.java

• MainApplication.java

Note: these changes should appear automatically, but if they don’t, you should make them yourself.

Link: MainApplication.java

Final changes

Now it’s time to make some changes to the VideoPlayer.js file.

It should look something like this:

Link: VideoPlayer.js

As you can see, there is a new useState hook to check if the video player is in full-screen mode. The ‘onFullScreen’ function will be triggered when the user presses the full-screen button or when they exit full-screen mode.

Finally, some styles must be added to fix the video player view on full-screen mode. These styles must also be taken into account when our React Native application has a top or bottom navigation bar, or both.

Player preview with and without React Native Video landscape orientation

Bonus: lock your React Native Video orientation on portrait mode

Sometimes, you may want to keep your application from being used in landscape mode. This can be easily done by taking advantage of the ‘React Native Orientation Locker’ library we installed before.

In iOS, however, the best way of doing this is with Xcode, so we will see both alternatives.

Portrait mode for Android devices

On the App.js file, you need to import the React Native Orientation Locker library and then import the following line of code:

• Orientation.lockToPortrait();

That’s it, the file should look something like this:

Link: App.js

Portrait mode for iOS devices

You don’t need to install anything to do this, just follow these steps:

• Open the project on Xcode

• Go to the project’s main folder

• Go to ‘general’

• Under ‘Deployment Info’ leave ‘Portrait’ checked

Run the application again from Xcode and the changes should be added.

Final thoughts on React Native Landscape

Adding a landscape orientation to your video player drawer is simple thanks to the React Native Orientation Locker library. With this library, you can also set your entire project application to portrait mode or get full control over when you want something to be seen in landscape orientation.

The post React native ‌orientation‌ locker and ‌landscape‌ orientation appeared first on asap developers.

Although every application has its particular purpose, there are certain features that are shared by most, such as navigation bars, user profiles, logins, and the feature we’ll be looking at in this post: video players.

Let’s kick things off

Including an integrated video player in your application doesn’t sound so difficult when you can use third-party libraries on React Native applications. In this case, we will use react-native-video and react-native-media-controls; this last one has another library dependency that you have to install, which is react-native-slider.

To install all these libraries, run the three following scripts on your terminal:

• npm install react-native-video OR yarn add react-native-video

• npm install react-native-media-controls OR yarn add react-native-media-controls

• npm install react-native-slider OR yarn add react-native-slider

Let’s jump into the code of React Native Video

First of all, you need to have created a React Native project (for example, using npx react-native init).

If you don’t know how to create your app, just run the following commands on your terminal:

Link: script

Now that you’ve created the application, let’s get to coding!

Important note: this example was created with React Native 63.3 and it uses hooks and functional components.

First, check your package.json file to make sure the three libraries mentioned before are installed.

It should contain the following three lines (keep in mind that the libraries’ versions can change in the future). 

Link: script

Next, create a custom component to define your video player.

Link: script

This is a small component, but it includes many functions and some hooks: 

The useRef hook is used to get the video’s current timing and change it to throw the player bar. The useState hooks are created to handle the video duration, whether the video is paused or not, the current video time, whether the player is PLAYING/PAUSED/ENDED and whether the video is loading.

You’ll also need some functions which are necessary to set both libraries’ props.

The functions needed for MediaControls are:

• onSeek: triggered when the user releases the player slider.
• onSeeking: triggered when the user interacts with the player slider.
• onPaused: triggered when the play/pause button is pressed.
• onReplay: triggered when the replay button is pressed.

There is a small bug on Android devices that does not allow the player to replay the video when changing the state to PLAYING, so you have to use the ‘Platform’ API to fix that.

And the ones needed for Video are:

• onProgress: triggered while the video is playing.
• onLoad & onLoadStart: these allow you to do something while the video is loading. For example, you could set a preview image while this is happening.
• onEnd: triggered when the player reaches the end of the media file.

Here you can check more details about MediaControls and Video props, and customize the video player even more.

Important note: both Video and Media Controls components must be enclosed in the same component one followed by the other, in this case, in a View component.

And that’s it! As you can see, you don’t need many CSS styles to make it look good. The most difficult part is setting up all the components’ props to make the player work the way you want it to.

The final step is mounting your custom component in the App.js file to see how it works.

Link: script

Player preview

Final thoughts on React Native Video & Media Controls:

As we’ve seen before with third-party libraries, it’s not difficult to add a video player to your React Native application. This article was written to show an easy way to add one to your projects. 

Asap developers

asap has been developing web and mobile applications for San Francisco Bay Area companies since 2008. With a team of almost 30 hard-working members, we’re big enough to tackle almost any project and, at the same time, agile enough to respond to the changing needs of our clients. We see our clients as strategic partners, so we offer a comprehensive service that is completely focused on their success.

The post React Native Video & Media Controls example appeared first on asap developers.