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.

@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.

Testing is an essential part of any development process and there are countless tools available depending on what you are looking to test. In this article, we’ll focus on the React Testing Library and cover what it is, as well as why and how to use it.

What is React Testing Library?

The React Testing Library is a library built as part of an open-source project named Testing Library. It is part of a family of packages named @testing-library that provides guidance to test UI components in a user-centric way.

Just as React Testing Library has its own package, there are specific ones for other frameworks, including React Native, Angular, and Vue. All of these have been built on top of DOM Testing Library, the so-called “core library”, by adding a specific ergonomic API for each framework. 

Here, we will focus on the React package, since it is the most popular among its GitHub pinned repositories. 

Why should you use it? 

Testing Library relies on the belief that “The more your tests resemble the way your software is used, the more confidence they can give you.” 

In other words, this light-weight library produces tests that use components closer to the way a user would, giving the developer more confidence that their application will work when it goes out to real users.

End users don’t care what happens behind the scenes, they just see and interact with the output. So, instead of getting hung up writing code that tests a component’s internal API, props or state, you should be writing tests that verify it works properly from a user’s perspective, regardless of how it’s implemented.

Last but not least, this way of testing makes tests more maintainable, since code refactors won’t break them. 

How to use React Testing Library  

We’ll be taking a high-level view at this library, just to get you started from scratch. It is far from being a full library explanation, so here is a complete and detailed guide recommended by the official docs in case you want to take a deeper look.

Note: this example was developed using create-react-app, functional components, react version 17.0.1 and version 11.2.2 of @testing-library/react.

The latest create-react-app setups already come with @testing-library/react installed. If this is not the case for the version you’re working with, start by adding the following package to the project:

npm install --save-dev @testing-library/react

React Testing Library works along with Jest. When running npm test, all files with a .test.js suffix will be recognized by the Jest test runner. So, an example for our test file would be App.test.js. Create an App.test.js file if it has not been included yet with create-react-app. In this example, the files’ content looked like this: 

App.js

Link: script

App.test.js

Link: script

This example has a single test suite, renders learn react link, with just one assertion: expect. It uses the render function to render a React component and then queries the UI to verify if a text that matches the regular expression has been rendered.

After running all tests with npm test, it passes successfully:

Let’s modify the App.js file to add a button and then fire an event on the App.test.js in a different test suite. To do so, the fireEvent function will be used like this:

App.js

Link: script

App.test.js

Link: script

What we’ve done here is simulate a user’s behavior, checking what happened in the application UI after that event. After executing npm test, it passes again.

There are more ways to test your application using this library; only the basics were shown in this example. Because of how this library works, rather than dealing with instances of rendered React components, tests will work with actual DOM nodes. Ultimately, you are using JavaScript but with a React output.

Bonus: Why not use Enzyme?

According to the official docs, the React Testing Library is suggested as a replacement for another well-known testing library: Enzyme.  This is because Enzyme fosters some bad testing practices, encouraging developers to test implementation like we mentioned above. Here is an article written by the React Testing Library founder delving into why you should not test implementation details, and here is an official guide explaining how to migrate from Enzyme to the React Testing Library.

Final thoughts on React Testing Library

Without a doubt, we fully recommend this library because of its primary purpose: giving the developer confidence by testing components in the way a user would use them. Give this library a try if you have the chance. If you prefer a different framework, you can use one of the other libraries offered by the Testing Library project. You won’t regret it!

The post React Testing Library appeared first on asap developers.