React Native is a JavaScript development framework that uses React to create user interfaces for iOS and Android devices. This allows developers to reuse code across both web and mobile platforms. React Native was developed by Facebook and released in 2015 and has done nothing but grow since then. Some of the reasons why we love React Native are that it’s open-source, cross-platform and easy to learn. It also leads to shorter development times, provides a native interface and makes it easy to implement changes. But don’t take our word for it! In this article, we’ll review some of the Best React Native apps available in 2022 to show you the wonders that can be created or revamped using this framework.

Instagram

With over 1 billion monthly users, Instagram is one of the most popular social media platforms out there. Although not originally developed with React Native, the team behind Instagram decided to integrate the React Native platform in 2016. This move definitely paid off as this meant that features could be shipped faster in both iOS and Android and it significantly reduced development costs.

UberEats

The original version of the UberEats Restaurant Dashboard was built for the web using the React library. However, Uber also wanted to develop iOS and Android versions. This is where the company turned to the React Native framework as it allowed it to go mobile using the same language it was already using for the web (i.e., JavaScript within a very similar framework). The outcome was excellent and has made it possible for Uber to stay on the list of top food delivery platforms in the US.

If you want to see how React Native was implemented for UberEats, you can take a peek at this page.

Skype

In 2017, Skype decided to develop a new app based on React Native, changing a lot of the design and functionalities of the original app. Most of the beloved Skype features were transferred to the new version, with various new features added (such as a Giphy integration).

Walmart

Just like Uber, Walmart had already chosen React for the web. It was only natural, then, for the company to use React Native for its mobile app projects. Choosing React Native came with many benefits for Walmart such as doubling the development speed, a significantly improved unit code testability, and a shared business logic with the existing React/Redux web app. The resulting mobile app includes a wide variety of features, including order tracking, shopping lists, an item finder and a scanner. All of this made the Walmart Shopping & Grocery app one of the best React Native apps in 2022.

If you want to read Walmart’s React Native journey in detail, you can take a look at this article.

Tesla

Founded in 2003, Tesla is currently one of the largest electric car producers. When the time came to develop a mobile app for its users, Tesla turned to React Native as the platform made it possible for both iOS and Android apps to have the same features. Tesla car owners can now lock and unlock their car, track their car’s location and heat or cool their car, all from their mobile app.

Facebook Ads Manager

As Facebook is the company behind React Native, it makes sense that they use this platform for many of their projects. One of the best React Native apps in 2022 was definitely Facebook Ads Manager. This was one of the first 100% React Native apps created by Facebook and it includes a clean interface, simple navigation and an intuitive user experience.

Shine

Shine is a mindfulness app that reflects the voice of minorities while empowering diversity and women in business. Launched in 2017, Shine received a Webby Award in 2019, a Google Play Award in 2019, and was among the App Store Best of 2020. This all shows how popular this app is, particularly in the United States and Canada.

The creators of Shine wanted to develop a cross-platform mobile app with native components that also allowed for the continuous development of new features. This meant that React Native was the perfect platform for the job.

Gyroscope

Gyroscope is a health app that tracks your online productivity and monitors your sleep patterns and eating habits, among many other features. React Native gave the Gyroscope team the possibility to develop their app without outsourcing the work. It also made it easy to present a wide array of statistics and personal health data in a visually-appealing way and to quickly implement new ideas. Moreover, React Native made it possible for Gyroscope to integrate with Apple watches and Fitbit.

If you want to see how the Gyroscope app was built using React Native, check out this article.

Pinterest

Around 2017, Pinterest decided to integrate React Native into its mobile app development process as it would be time-effective while not sacrificing the quality of the user experience. The company had already used React for its web app so React Native for mobile was the natural next step.

If you’d like to know more about Pinterest’s React Native journey, you can take a look at this interview.

Discord

Discord is a voice and chat app created specifically for gamers. The company behind it decided to use React Native as it allowed it to build an iOS app quite quickly from its existing React web app. It took just two weeks! Today, the app is also available for Android, has millions of monthly active users, and is 99.9% crash-free.

You can check out some of the reasons why Discord still chooses React Native here.

Final thoughts on the best React Native apps

React Native has proven to be an excellent cross-platform tool. It saves companies time and money while delivering native-like results. Thousands of apps are currently using React Native, including both startups and Fortune 500 companies.

If you’d like to explore why you should use React Native for your next mobile app project, you should take a look at this article.

We believe the list above proves the potential of our favorite cross-platform framework and we hope you agree. That said, would you add any apps to our list of best React Native apps in 2022?

The post Best React Native apps in 2022 appeared first on asap developers.

React Native is a JavaScript development framework that uses React to create user interfaces for iOS and Android devices. It was developed by Facebook and released in 2015. It helps developers reuse code across web and mobile platforms. With React Native resources, your JavaScript codebase is compiled to a mobile app indistinguishable from a native iOS app built using Objective-C or a native Android app built using Java.

The benefits of using React Native include that it’s open-source, cross-platform, and easy to learn, it leads to shorter development times, it provides a native interface and it makes it easy to implement changes.

In this article, we’ll cover a variety of free and paid resources that every React Native developer should be aware of. We’ll go over React Native tutorials and courses, list some of the top blogs, podcasts and YouTube channels, detail the most sought-after development tools and take a look inside the React Native community. 

React Native tutorials and courses

Whether you are just thinking about learning how to use the React Native framework or are a seasoned React Native programmer, the tutorials and courses below should be of use during your React Native journey. We’ll start with free options and also include some paid ones.

1. Official React Native documentation

If you are a “do-it-yourself” kind of person, the official React Native documentation is the best place to start. The documentation is quite comprehensive and includes plenty of examples to help you along.

Do note that you will need to understand the fundamentals of JavaScript to make the best of the documentation. If you’re not familiar with this programming language, you can take a look at Mozilla’s tutorial or, if you just need to brush up, you can take a look at Mozilla’s reintroduction to JavaScript.

2. React Native Training in Medium

React Native Training includes a series of stories and tutorials to learn React Native. There is also a React Native Training YouTube channel.

These React Native tutorials cover more specific areas (such as making a linear gradient view or processing image loading) and are a great complement to the official documentation or any other straightforward tutorial you might choose.

3. React Native Express

This guide is meant to be used in addition to the official React Native documentation. React Native Express encompasses everything you need to know to start working with this framework, including topics such as JavaScript fundamentals and key React Native libraries that are not covered in the official documentation.

The author of this React Native tutorial also wrote a book called Fullstack React Native that you can get here.

4. Codecademy

Codecademy offers free courses for a variety of programming languages. They have a free React Native course that covers core components, style components and navigation. You also have the option to access quizzes and portfolio projects with the pro version. This also gives you access to several other React Native courses.

You can make use of their free trial if you want to see if it’s worth it, after which the pro version costs $149.99/year for students.

5. Programming with Mosh

This is a video crash course taught by Mosh Hamedany, a software engineer with 20 years of experience. For this React Native tutorial, you should have some existing knowledge of both React and JavaScript.

Mosh also offers paid courses like The Ultimate React Native Series: Fundamentals and The Ultimate React Native Series: Advanced Concepts. The courses start from $19 or you can also buy an all-access membership for $29/month.

6. Udemy courses

Udemy offers a variety of courses for React Native developers for just $14.99. Some of our recommendations include React Native – The Practical Guide [2022 Edition], The Complete React Native + Hooks Course and React Native: Advanced Concepts.

React Native blogs, podcasts and YouTube channels

Blogs, podcasts and YouTube channels can be extremely helpful whether you are looking for React Native resources for beginners or are an expert who wants to keep updated on the latest news about React Native and get some solid tips.

There are countless podcasts, blogs and YouTube channels devoted to React Native and React in general so we’ve made a selection that covers various aspects of the programming framework. We won’t overwhelm you with extensive details, so here is a list of some of the top React Native blogs, podcasts and YouTube channels out there.

Blogs

• React Native’s GitHub blog
• ReactDom
• Mike Grabowski’s Medium page
• React Native Coach
• alligator.io

Podcasts

• React Podcast
• React Native Radio
• Software Engineering Daily
• React Round Up
• devMode.fm

YouTube channels

• Ben Awad
• Michael Thomas
• freeCodeCamp.org

React Native development tools

There is no shortage of React Native development tools. For this article, we have decided to make a list of the best free React Native resources for developers, including integrated development environments (IDEs), inspecting and debugging tools, libraries and many other tools that help you with specific aspects or features of mobile app development.

IDEs

• Visual Studio Code

This free and open-source IDE created by Microsoft is very popular (and not only for React Native). Visual Studio Code is lightweight and includes many powerful features. You can add themes, debuggers and connect to other services. It also includes troubleshooting tools and is fully customizable.

Specifically for React Native, Visual Studio Code works as an excellent code editor that includes the React Native Tools extension for debugging.

• Android Studio and XCode

Android Studio and XCode are IDEs for native Android and iOS development, respectively. These IDEs are required to set up the tools you need to build a React Native app.

Inspecting and debugging

• React Native Debugger

This is a remote debugging app that combines Chrome DevTools, React DevTools and the Redux Devtools Extension in the same window.

• Reactotron

Reactotron is a desktop app used for inspecting React and React Native projects. The app works for macOS, Linux, and Windows.

• React DevTools

This is a package available for Chrome and Firefox. React DevTools means you can debug a React Native app from a mobile browser, Safari or an embedded view.

Other tools

• Postman

Postman is an API platform used for checking requests. When using Postman, you can build complex HTTP requests swiftly, organize them in collections, and share them with other members of your team.

• Zeplin

Zeplin offers a React Native extension that generates JavaScript snippets from colors, layers and text styles.

Libraries

• Redux

Redux is a state management JavaScript library that can be used with React Native.  It lets you centralize your app’s state so you can build apps that are more predictable and easier to debug.

• React Navigation

React Navigation is a library that provides routing and navigation for React Native apps. It is easy to use and completely customizable. It also has an extensible platform and includes components built for both iOS and Android.

React Native community

React Native has a strong community behind it. There are countless React Native developers that are willing to share their knowledge and help when others run into issues. Here are some places where you can find support and resources for any of your React Native projects.

Stack Overflow

You can find countless React Native developers in Stack Overflow. There you can read the existing questions or ask your own to solve any issue you may have with your React Native development.

Meetups

There are React Native Meetups happening all around the globe. These are the perfect place to learn and network with other developers.

React Conf

There is also a yearly React conference that includes various panels and talks in addition to after-hours activities where you can get to know other React Native developers.  You can find past conference talks on the React Conf YouTube channel.

Slack/Chat channels

There are also many Slack and chat channels available where you can interact with your peers. Here are just a few:

1. Reactiflux
2. Android United
3. GitHub

Final thoughts on React Native development resources

We hope this article on React Native development resources has given you enough material to work with. We certainly hope to have covered everything you might need as a React Native developer.

The post React Native development resources appeared first on asap developers.

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.

The post React Navigation appeared first on asap developers.

Why should you develop a widget?

Most widgets are developed not only so users can stay up to date with relevant information and use their applications from their home screen, but also because they help those apps stand out among competitors and retain user engagement.

Unfortunately, widget development is not feasible using React Native alone. An alternative is to get a native widget to communicate with your React Native application, and that is what we are going to do in this guide.

Widgets with React Native

First of all, you’ll need to create your React Native app. This will be a bare React Native app; it does not use Expo. The command you will be using to set it up is

npx react-native init widgetAsap

In our case, the project has been created with react-native version 0.64.2.

Then, you will need just one additional dependency that will be creating the bridge between the widget and the app. This will be different for iOS and Android as we’ll show you below. 

Let’s start with iOS. Behind the scenes, the package is just taking data from the React Native app and putting it into UserDefaults for Swift. According to the official docs, UserDefaults is a persistent key-value storage. 

Install the dependency by running the following command on your terminal:

yarn add react-native-shared-group-preferences

Let’s import it and try it out. To keep it simple, the application will just ask for a text value to be rendered into the widget. The content of the App.js file will be the following:

Link: script

As you can see, SharedGroupPreferences is being imported from the library. The way to use it is to store an item using setItem with the given key, value and group. In this example, the key will be widgetKey, the value will be widgetData—a JavaScript object that will contain the user input—and, finally, group will be the name of the group that will share the information between the app and the widget. We will see them again when working on the Swift code.

On the other hand, for Android, we’ll use SharedStorage. This is imported fromNativeModules, which belongs to the React Native package so we don’t need to install any additional libraries. In this case, the stored value is a serialized JavaScript object that has been converted to a string and saved using the set SharedStorage method.

That’s all you need to know about the React Native application. Now it’s time to look at some native code. Let’s start with iOS.

iOS widgets

If you are new to iOS widgets, we recommend you take a look at the official Apple documentation. To develop one, you will need Xcode version 12 or above so it can run iOS14 and have access to WidgetKit. This is a framework that allows you to build widgets easily and make them compatible across the different Apple operating systems. In this case, we will be using version 12.4 of Xcode. You will also need an Apple Developer account.

The first step will be to create the widget extension for the app. Open the application you have just created in Xcode, go to File > New > Target and select Widget Extension. Choose your widget name and a folder will be created.

Now it’s time to set up your App Group. This will enable your React Native application to communicate with the widget extension. Go to the file with the “.xcodeproj” extension.

Select the Build Settings tab and search for Library Search Paths. Look at the value and replace swift-5.0 with swift-5.2. This will prevent you from getting an Xcode error later on. 

Also, right-click on widgetApp in the Project Navigator on the left and click “New File…”. Create an empty Swift file in the project and, when Xcode prompts you, press Create Bridging Header. This file won’t be used later, it’s just to avoid getting an Xcode error. 

Then, select your project file and look at the targets; you should be seeing something like this: 

You will need to add the widgetAsap and MyWidgetExtension targets so they become part of the App Group we just created. Select widgetAsap and, inside the Signing & Capabilities section, click on in the upper right. Select App Groups and type a name of your choice. We will be using group.asap. Repeat this step with MyWidgetExtension.

We are almost there. You now need to modify the MyWidget.swift file. There, you have to retrieve the data that is being stored by your React Native code. Remember you are using UserDefaults for this. Take a look at what the content of the file will be, as explained below.

Link: script

We will delve just into what is important so you can create your widget as quickly as possible.

First of all, take a look at the WidgetData struct. Its type is Decodable because it is the retrieved data we will parse and display on the widget. In this example, it contains only a text property.

Then, we have the SimpleEntry struct. It has the TimelineEntry type, which specifies the date to display a widget (used to refresh the widget content) and can also include the information to display. In this case, we added a text value to match the one we are storing in the UserDefaults. 

Now everytime that SimpleEntry is instantiated, it has our text string. This occurs in MyWidget_Previews, placeholder, getSnapshot and, the vital one, getTimeline. This function is the one that does the work here, so we will explain it step by step below. 

It starts by initializing UserDefaults using the App Group we created:

let userDefaults = UserDefaults.init(suiteName: "group.asap")

Then, it retrieves the value from the widgetKey we defined in the React Native code:

let savedData = userDefaults!.value(forKey: "widgetKey")

After that, it decodes the data received and defines how often our widget will refresh:

let parsedData = try? decoder.decode(WidgetData.self, from: data!)

let nextRefresh = Calendar.current.date(byAdding: .minute, value: 5, to: entryDate)!

In this case, it will be five minutes, the lowest value available.

With that information, it creates a SimpleEntry and passes it to set the Timeline. This will provide the widget’s new content and indicate when to carry out the update. 

The last step is to style the widget. This is up to you. In this case, we decided to keep it simple. The MyWidgetEntryView struct is the one that takes care of styling.

You can test your widget by running your application using npm start and using a virtual or real device. Once the application has been installed, select the widget from the widget list and place it on the home screen.

Open the app or the widget itself and you will see something like this: 

Enter something in the input field, hit the enter key and return to the home screen. Remember we set the refresh time to five minutes so it will take a while to display the text you have just entered. Be patient! 

And that’s it for iOS. Let’s see how to achieve the same results on the Android platform. 

Android widgets

If you are new to Android widgets, we recommend you take a look at the official Android documentation.

Luckily, This process will be easier than in iOS. The approach will be the same, storing the data we want to display from React Native into the widget and, then, retrieving it using native code (Java, in this case).

Begin by opening the project in Android Studio. We will be using version 4.2.

Then, right click on the res folder and select the option shown above. Name your widget class however you want and click on Finish. We will name it “MyWidget”, like we did for iOS.

A new MyWidget.java file will open. Just as we used UserDefaults for iOS, we will be using the SharedPreferences Android native module.

To do this, you will first need to implement the bridge between the React Native app and the widget. Add the new SharedStorage.java and SharedStoragePackager.java files to the same directory as your MainApplication.java.

SharedStorage.java

Link: script

SharedStoragePackager.java

Link: script

Note that the application package is being imported in the first line of both files. Change the name to your app’s; you can find it in your AndroidManifest.xml file inside android > app > src > main. 

Once you have placed those files and made the relevant changes, add this to your MainApplication.java file inside the getPackages method:

packages.add(new SharedStoragePackager());

This will autolink the package we have just created.

Now that we have established the bridge, it’s time to receive that data in MyWidget.java. We need to tell the widget to update its content using SharedPreferences. This is managed by updateAppWidget. Replace your code with this one:

Link: script

The last step is optional and has to do with the widget styling. We will keep the same design as in the iOS example. Using Android Studio, go to your app > res > layout > my_widget.xml file, click on the “Example” text and you will see the following:

To the right, you will see the attributes being used. In this example, changing textStyle, textColor and background is enough. 

And that’s it. Try testing it using an Android device, either virtual or real, to confirm you have followed this guide properly. 

Find the widget of the application:

Place it where you want and open the application. Write something in the input field, hit the enter key and return to the home screen. 

In this case, the widget has refreshed the content immediately:

Congratulations! You’ve reached the end of this guide for widgets using React Native. You have successfully built a widgets application for the iOS and Android platforms that communicates with a React Native application. We hope this can help you take full advantage of this functionality.

Final thoughts on Widgets for React Native 

This simplified application allows you to elevate key content and features from your app so users can see them at a glance. In spite of being combined with a native approach, it wasn’t that difficult to integrate it into a React Native application.

We hope this guide has left you with teachings that you can put into practice for your applications in order to take advantage of the benefits we’ve mentioned, as it could be particularly valuable if your app is part of a business.

The post How to Build Widgets for a React Native App 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.

@react-native-async-storage/async-storage

What does this package do? 

Its formal definition states that this library is an asynchronous, unencrypted, persistent, key-value storage API. 

Well, those are a lot of adjectives for a storage API. Let’s break this terminology down. Asynchronous means that each of its methods returns an object that could be a Promise or an Error. It’s unencrypted, so beware of using it to store sensitive data. Being persistent means it saves the data, even when the user has closed the API or even the device. Finally, key-value pairs are the way data is stored.

Now that we know what it is, let’s see how useful it is.

Why should you use it?

First of all, it’s a lightweight solution that doesn’t involve a database, server or even an internet connection. It sounds like a good choice, but remember it is just one more alternative for storing information and sharing data in your application; it may not always be the best one to use. 

So the really important question would be when to use this library, rather than why you should use it. Based on the characteristics we mentioned, you can deduce when it is appropriate to use AsyncStorage and when it is not such a good idea.

It is usually replaced by React Context or Redux, but despite being used for the same purpose, they are not the same. Mainly because React Context and Redux store data in memory that is erased when the app closes and AsyncStorage saves data persistently in the device. It resembles the local storage used for web applications.

How to use it 

There are three main actions you can take with AsyncStorage. Set a key-value pair, get a value of a given key and remove the pair using its key. The API methods used for this are setItem, getItem and removeItem, respectively. You can delve into the API if you are interested, but we will only use these main ones in the following example. 

Example of React Native AsyncStorage

Let’s do a proof of concept. Our application will store the user’s theme preference, whether light or dark. For this purpose, we are not compromising data scalability, sensitive information or anything else we may be worried about. 

Start by installing create-react-native-app globally with yarn by running this command:

yarn global add create-react-native-app

Now, you can run create-react-app asyncstorapp to create your React Native application. We decided to use “asyncstorapp”, but you can name it however you want. Follow the instructions and you are done. In our case, the project was created with react-native version 0.63.4.

Proceed to install the package by running:

yarn add @react-native-async-storage/async-storage

We will be using the 1.15.5 version. According to the official installation guide, running npx pod-install is needed to link this dependency.

You can now enter npm start in your terminal and use a real or virtual device to start testing what we are about to develop.

Let’s import it and try it out. As a first approach, we will store a hardcoded key-value pair, then close the app and open it again to prove it’s being saved. 

To start, add the following to your App.js file and then look at the console.

Link: script

Remember it is asynchronous, so that’s why try/catch and async/await are used to handle the Promise in getItem.

As you can see, value null has been outputted. That’s because we haven’t set a value for that key yet. So let’s create an asynchronous setItem function that does it.

Also, let’s change our code so instead of getting the theme value in the useEffect, we store it. 

Keep in mind that AsyncStorage can only store string values. In order to store object data you need to serialize it first. You can do this by using JSON.stringify() to store it and JSON.parse() to retrieve it.

In this case, we will be using just a string, so it should look like this:

Link: script

To test if the dark value has been stored correctly, change the useEffect again to its previous value. Save your file and you will see value dark outputted in your terminal.

Let’s close and reopen the application to test if that value has been saved to our device. You will see the same value in your terminal. This proves it’s really working.

Now that we know it works, it’s time to store and use our application theme properly. Replace your code with the following:

Link: script

You will see something like this, working like a light switch, lighting up when turned on and darkening when turned off:

And that’s it! Close the app keeping in mind the previous state and reopen it so you can confirm that it remembers it.

Final thoughts on React Native AsyncStorage

This package fulfills a need when you wish to recover data without depending on anything other than your device. However, it also has some drawbacks. 

Since it is a storage option that is on your device until it is manually removed, we find it very useful as long as the data you are storing or sharing in your application has been carefully selected. When it comes to saving sensitive data or large amounts of it, we would recommend choosing another alternative.

The post React Native AsyncStorage appeared first on asap developers.

In this guide, we will cover how to connect React Native and Node.js to develop a login application. Once logged in, users will be able to access a private resource. We won’t go into too much detail, so you can get started as soon as possible.

Before we start, let’s take a look at why we chose to use these technologies. You should know that prior knowledge of both tools is required to complete this guide successfully.

Why React Native?

According to the official docs, “React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.”

To put it more simply, React Native is the adaptation of React for native development. But let’s analyze what that really means.

React Native is a framework based on React that uses JavaScript to build mobile applications that render natively, for Android and iOS at the same time. 

Therefore, this tool allows web developers to take advantage of React’s outstanding benefits and apply their prior JavaScript knowledge but, in this case, to target mobile platforms.

Why Node.js? 

The official documentation claims that “Node.js is a JavaScript runtime built with Chrome’s V8 JavaScript engine.” 

Being a runtime means it acts as an environment that allows you to execute, in this case, a JavaScript program on your machine. Moreover, it uses a non-blocking I/O model to respond to events from a user or from another application, which makes it lightweight and efficient.

Moreover, its package ecosystem, npm, has the greatest number of open-source libraries in the world.

Now that we know which technologies we are going to use, let’s get started.

Create the Node.js project

Let’s talk about our backend and what its role will be. It will receive requests from the frontend and, in turn, give a response according to the result of the data flow. Behind the scenes, it will be interacting with the database, creating the users when they sign up and verifying their credentials when they attempt to log in.

Requirements

To be able to follow this part of the guide, you must have Node installed. We will be using node v14.16.1 and the npm 6.14.12 version.

To store our users in the database, we will be using MySQL Community Server as well as MySQL Workbench, so you will need them both as well. You can use another database if you want. If you do, you can skip the next step. 

How to setup MySQL

Start by downloading MySQL Community Server from their website. Follow the installation instructions and that’s it. Then, MySQL Workbench will be needed to manage our database. Download it from the same site and install it. We will use versions 8.0.25 and 8.0.12, respectively.

When you have finished, you will see a MySQL local instance running. To connect to the database, click on that instance and you will be asked to enter a password. Remember the password, as well as the username and the port your local instance is running on. You will need that later. 

Now, it’s time to create our database. Right click below “Schemas” and choose “Create schema”. We will name it “loginDB”, but you can choose whichever name you prefer. Click “Apply” and the database will be created. 

In the left panel, you will see the database we have just created. Inside it, there is a “Tables” section. Right click it and select “Create table”. Select the configuration below and click “Apply” to finish the setup.

Once you are done, you can start by creating the backend project and installing the necessary dependencies. 

First, we will create a “loginApp” folder and, inside it, another one called “server” where our backend will be placed. Folder names are up to you, you can name them however you want. Then, run the npm init command to initialize npm and proceed to install the required dependencies listed below. To install them, we will be using yarn version 1.22.10 and running the yarn add <package_name> command. we will summarize what each dependency does below, in case you are not familiar with all of them.

After installing them, go to your package.json file and, in the scripts section, change start from node app.js to nodemon app.js. You can now run npm start and nodemon will be activated.

Enough with the preparations, let’s code. In the “server” folder, create an app.js file that will initialize the application and create and hold the environment configuration. Place this in your file:

app.js

Link: script

From now on, pay close attention to the imports in each file to understand how they are connected. 

As you may see, in the first line of our app.js, we are importing express and, at the bottom, we are specifying the port where our server will be listening for requests. Also, two files we haven’t talked about yet are being imported. app.js will connect what they provide to our application.

The first one is database.js and it is inside a “utils” folder. Here, we will create an instance of sequelize that will let us connect to our MySQL database. Copy the following content and replace your password where it says YOUR_PASSWORD.

database.js

Link: script

The second imported script is inside a “routes” folder and is named routes.js. This is the one that defines our API endpoints using express, as follows: 

routes.js

Link: script

We are only going to use the first three endpoints, the other two are examples you may need to define a public route and a default one.

You may note that, in this script, another file came into play in the imports. Its name is auth.js and it is placed inside the “controllers” folder. This file contains the actions that get executed when those requests are received.

So let’s see what auth.js should include:

auth.js

Link: script

Again, looking at the imports, we can see that there are two new packages: bcryptjs and jsonwebtoken. 

There is also another file we haven’t seen yet. Let’s look at what it should include before continuing with auth.js. 

The file name is user.js and it is inside a “models” folder. It should import the sequelize instance from the database.js file we already saw and, then, define the users table we are going to store. Copying this into your file will be enough:s

user.js

Link: script

Going back to the auth.js file, we can see three functions are being exported: signup, login and isAuth. These will be in charge of resolving the requests defined in routes.js.

signup registers users in the database. First, it checks if the email provided has already been registered. Then, if the email and password have been received, it hashes the password and stores the user in the database. 

login handles login requests. It starts by checking if the email corresponds to a database user. If that’s the case, it hashes the password and compares it to the user password in the database. If they match, it responds with a temporary secret token. 

isAuth asks for the secret token and, if it is provided, proceeds to verify it. If everything goes well, it will finally respond with the private resource. In this case, that resource will be just a message containing “here is your resource”. This is enough for our proof of concept.

That’s it. We are done for now. We have our server ready to respond to authentication requests in port 5000 after running npm start. You can test the endpoints defined using Postman or another tool of your choice.

Create the React Native project

It’s time to talk about the frontend and what its role in this project should be. It will receive the user input and send a request to the backend, to sign up or log in, depending on what the user has selected. Then, based on the backend response, it will show an error or success message to the user.

So let’s start coding. The create-react-native-app package will set up the project for you. First, run the following command to install it globally: yarn global add create-react-native-app

Then, go to your “loginApp” folder and execute the command we’ve just installed by running create-react-native-app mobile. Again, we decided to use “mobile” as the name of the frontend app, but it’s up to you. 

This step is optional since your app’s style is up to you. Inside your new “mobile” folder, create a new folder called “public” and another one named “images” inside it. That last folder will contain the background image for the app. We downloaded the one we will be using from here and we had to rotate it to achieve a portrait orientation.

Then, create another folder inside “mobile” called “screens”. Inside it, create two files, “index.js” and “AuthScreen.js”. The first one will be the one that exports the screen like this:

index.js

Link: script

The second one will contain our unique screen, where the user can get authenticated. It will use fetch to send the user requests to the backend and return a message according to what it receives. There will be one request sending user input and creating the signup or login, and another one requesting the private resource. Once the user logs in, the resource request will automatically be triggered.

We will be using a single screen for the entire app to make it simpler, but you can try a different approach if you want. Copy its content to your AuthScreen.js file:

AuthScreen.js

Link: script

Finally, we need to import that screen to our App.js file and render it as follows:

App.js

Link: script

And that’s all. Just run npm start on the mobile directory and the frontend app will start running on port 3000. Then, proceed to use a virtual or real device to test how it communicates with the backend. You should see something like this:

Let’s test if it works:

Let’s test error messages by creating a user with the same email and trying to log in with the wrong credentials:

It works perfectly! After you finish this guide, your directory should look like this:

You have reached the end of this guide. Now you have a React Native frontend login application working with a Node.js backend. Congratulations!

Challenge: Develop tests for your React Native App 

We encourage you to test your application on both sides to ensure it is working as expected. Testing is an essential part of any development process and you should start incorporating it into your projects from the beginning. 

You can start with the frontend side, testing components in the way a user would use them. We recommend using React Testing Library. If you haven’t heard about it, you can read the article we have written about it.

Final thoughts on React Native with Node.js backend

To sum up, both React Native and Node.js are powerful tools that share a single programming language: JavaScript. With their separate advantages combined, you have built an incredibly strong mobile application. We have proven how straightforward it is to get started with any of them, even if you have not seen it before. We hope this guide gives you a starting point to start creating mobile apps with more functionalities.

GitHub

The post Build a React Native Login app with Node.js Backend 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.

Native apps have long been held at a higher standard than cross-platform apps. However, the truth is cross-platform frameworks development has revolutionized the mobile app industry. Thanks to this approach, developers can create native-like apps for devices using different operating systems, like Android or iOS, at the same time. This translates into lower costs, shorter time to market and, therefore, maximized profits. So, is one actually better than the other? What are the main differences? And what are your options as a developer? These are some of the questions we’ll cover in this article.

What are native apps?

A native app is one that is developed using the language of choice of a given operating system. It’s the traditional way to build apps where Android apps are built using Java and iOS apps are developed using Swift or Objective-C.

What are cross-platform apps?

Cross-platform apps are not necessarily created with the language of choice of a certain operating system. In fact, they can be developed with a variety of frameworks that use the same language and codebase to make the app compatible with multiple operating systems.

Cross-platform vs. native code development

Let’s take a look at the main differences, pros and cons of native and cross-platform development.

Most popular cross-platform frameworks

Now that we’ve looked at each option in detail, let’s take a look at some of the most popular cross-platform frameworks. According to Stack Overflow’s 2020 Developer Survey, these are Flutter, React Native and Xamarin.

Flutter

As stated on its website, Flutter is “Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase”. Flutter helps you swiftly craft high-quality interfaces for both iOS and Android.
Flutter is not just a framework but a complete SDK, which means it grants users everything they need to create cross-platform apps, such as ready-made widgets, a rendering engine, and testing and integration APIs. The framework works with existing code, is used by developers and organizations around the globe, and is free and open-source.

Flutter also includes widget customization and extensions, its own development language called Dart, an automated testing toolset, and plenty of debugging tools. Some of the development companies currently using Flutter include Groupon, eBay, Alibaba Group and Capital One. You can learn more about Flutter here.

React Native

React Native is an open-source JavaScript development framework that uses ReactJS to create user interfaces for iOS and Android devices. It was developed by Facebook and released in 2013. Facebook not only used it to develop its flagship app, but also others such as Instagram.
With React Native, your JavaScript codebase is compiled to a mobile app nearly indistinguishable from a native iOS app built using Objective-C or a native Android app built using Java. The framework also lets you write modules in other languages such as Swift, Python and C++.

If that wasn’t enough, React Native helps you build your app faster with hot reloading. This feature means you reload your app instantly instead of recompiling after making changes and it even lets you run new code while retaining your application state.
You can learn more about React Native here.

Xamarin

Xamarin, which is owned by Microsoft, is also open-source and works on the “write once, run anywhere” (WORA) model. It uses C# as a single language (which means you don’t have to learn Swift, Objective-C or Java) and harnesses the power of the .NET platform to build native and performant apps for Android, iOS and Windows.

Xamarin can be tested on multiple devices by using cloud services and also includes native API access and native UI support. This framework lets you include Objective-C, Java and C++ libraries, in addition to its considerable collection of class libraries.
Some of the mobile apps created with Xamarin include Azure App, Alaska Airlines and BBVA.

Final thoughts on Cross-platform frameworks vs. native code

Both cross-platform and native code development have their pros and cons. At the end of the day, it all comes down to where your priorities lie. If you prefer not to worry about performance and functionality and have the cash and time to spare, native is the way to go. However, if you are short on budget, want your app to hit the market as soon as possible and are not that bothered by prime app performance, cross-platform is the right choice for you. If that’s so, you can take a look at even more cross-platform frameworks here.

The post Cross-platform frameworks vs. native code development appeared first on asap developers.