Make animations with React Native.

Image for post
Image for post
Photo by Irvan Smith on Unsplash

To create a great user experience, animations take a very important part. In this part, we'll learn how to make animations with React Native using 3 different ways.

Continue with your code from the previous part. Otherwise, clone the repository.

git clone -b internationalization https://github.com/thinhtran3588/react-native-starter-kit.git

The first way is to use the official API: Animated . We’ll make an animated component to show whether the internet connection is available or not. Run:

yarn add @react-native-community/netinfo

Go to src/core/components. Create a new folder internet_connection. Inside it, create 2 new files internet_connection.tsx & internet_connection.styles.ts.

internet_connection

Now, look into the code. We subscribe to NetInfo so when the internet status is changed, the show function is called. In there, we call Animated.timing to change the component's opacity from 0 to 1 if there is no internet connection or from 1 to 0 if vice versa in 500 milliseconds. Note that we use useNativeDriver: true to improve the performance (you can read more here). …


Make your app supports multiple languages.

Image for post
Image for post
Photo by Nareeta Martin on Unsplash

Supporting multiple languages is a common feature of applications. Normally when you target a wide range of users, you want to support the languages they desire. Or at least if the primary language of your app is not English, at least you also want to support English as well.

Even you don't plan to support multiple languages at first, make the right structure reduces a large amount of effort in the future. It also doesn't cost much now.

Continue with your code from the previous part. Otherwise, clone the repository.

git clone -b manage_data_rematch https://github.com/thinhtran3588/react-native-starter-kit.git

Manage your data. Make Dark mode and theme your app.

Image for post
Image for post
Photo by Balázs Kétyi on Unsplash

Most of the time, the data should rest inside components as their states. The typical case is that the root component is a ‘screen' (for example, the weather screen or the setting screen). In this case, you should place the data inside the root component and pass it down to children via props. If your screens having multiple children components that are independent, you may consider moving the related data into child components. However, there are some cases that data needs to be moved outside:

  • data is used in multiple screens/components. As a result, it becomes global (for example dark/light mode, language).

Fetch data from server with React Native.

Image for post
Image for post
Photo by Adeolu Eletu on Unsplash

Except for some applications such as offline games, utility tools which don't need data from servers, most of the mobile applications interact and transfer data between them and backend servers. In this part, we'll learn how to do it to make our weather forecast tool.

Let’s continue from the previous part. Otherwise, clone the repository.

git clone -b integrate_3rd_components https://github.com/thinhtran3588/react-native-starter-kit.git

The first step is to set up the API. In this tutorial, we use Openweathermap to get weather data. The first step is to go to their website, register a new free account and confirm it by email. After that go to https://home.openweathermap.org/api_keys


Use React Native core components & 3rd party components to make your customized ones.

Image for post
Image for post
Photo by Kelly Sikkema on Unsplash

To build an application, most of the time we use existing components and build our own ones on top of them. Making everything from scratch is very time-consuming and unproductive. Luckily, we're living in the open-source world and the community has already built a huge number of production-ready components for us. Some are just small independent components, some are completed component kits. You should take a look at React Native Community on GitHub to look for components you need before trying to make it yourself. It provides many well-made components as well as useful utilities. For UI component kits, take a look at React Native UI Kitten, NativeBase and react-native-ui-lib. They are all great libraries I've tried in the real projects. Each one has its own unique features. …


Routing and navigation with react-navigation.

Image for post
Image for post
Photo by Malcolm Lightbody on Unsplash

For a production app, it's very rare that it consists of only one screen but is made of multiple screens. To navigate between screens, we use stack-based navigation, tab-based navigation, drawer-based navigation or a combination of them. React Native doesn't support it natively. Instead, we use a 3rd library to solve the problem. There are 2 libraries which are officially recommended: react-navigation & react-native-navigation.

Pro tip: If you start to make a new app, react-navigation is the way to go. It provides cleaner & easier APIs to work with (and better documentation). Previously, the performance was an obstacle when working with large applications, but the recent versions resolved it. You should choose react-native-navigation if you want a native look and feel or want to integrate React Native into an existing app which already has navigation natively. …


Structure your codebase in the right way to be scalable and maintainable in the future.

It’s time to get serious!

Let's make an app called T Assistant. You’ll see it in the stores later after I finish this series. It consists of many small tools such as weather forecasts, notes, etc. It also has the Settings module to enable Dark mode, change languages. Authentications will be included, too.

Let's take a look at Facebook's instruction first: https://reactjs.org/docs/faq-structure.html. There is no standard structure for all projects. However, it depends on you, developers to make the structure that you're most comfortable with. Therefore, the content of this part is heavily opinionated. The structure is built on years of experience with React & React Native. …


Use Eslint, Prettier, typescript default compiler, Sonarqube & babel-plugin-module-resolver to improve your code quality.

Eslint and Prettier

Let's continue from the previous part. Or you can clone the sample code, open the root folder in VSCode then run yarn to restore packages.

git clone -b debug_vscode https://github.com/thinhtran3588/react-native-starter-kit.git
cd react-native-starter-kit
yarn

Let's start with Eslint & Prettier first. ESLintis a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs”. Prettier, on another hand, “is an opinionated code formatter”. They are both commonly used as tools to enforce coding conventions into your codebase. …


Debug your application with VSCode & Flipper.

VSCode

As mentioned in the previous part, you have to install the React Native Tools extension first. Then open the root folder (mobile folder from the previous part). Alternatively, you can clone the sample code, open the root folder in VSCode then run yarn to restore packages.

git clone -b understand_hooks https://github.com/thinhtran3588/react-native-starter-kit.git
cd react-native-starter-kit
yarn

Now change to the Run (Control + Command + D) tab. You’ll see that screen.

Image for post
Image for post
create launch.json

Press create a lauch.json file’. A popup will show up. Then choose React Native.

Image for post
Image for post
choose React Native environment

After that, choose Debug Android, Debug iOS, Attach to packager, Debug Android (Hermes), Attach to Hermes application. …


Use VSCode as the code editor with recommended extensions.

VSCode is one of the most popular code editors. It has built-in git, great default IntelliSense and offers superb debug experiences. It also has a marketplace with tons of useful extensions that contribute hugely to its popularity.

Below is the survey for Popular Development Environments in 2018 at StackOverflow:

Image for post
Image for post
StackOverflow Survey 2018

You also can see the project on Github to see its popularity.

Let's download it from here. Please read the doc to use it productively.

After installing VSCode, open it and navigate to File → Open (Command + O), browse and select your mobile folder (the root folder) and click Open to open the folder in VSCode. …

About

Thinh Tran

Software developer. Interested in web/mobile application development with React, React Native, Typescript, Nodejs and AWS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store