One of the most common questions that arise in the mind of a developer is how to properly architect the new application and how to get started with the chosen technology stack. In this article, we’re going to go through the process of creating a new mobile app with React Native Starter, take a look at the architecture patterns and try to understand how to make your initial code clean, scalable and beautiful.
What is React Native Starter?
First of all, let’s talk about React Native Starter for a little bit. Any developer who starts a new project is usually facing the same issues. What technology stack to choose, how to implement navigation properly, how to manage app’s data and so on. An average developer spends more than 40 hours just with architecture! I’m not even talking about components and specific pages.
So, React Native Starter we’re trying to address these issues by providing developers with a scalable, flexible and powerful starter kit for their projects. It has Redux integration for managing data, react-navigation as a provider for screens transitions and much more, saving your team up to $20k!
Starting a new project with React Native Starter
Prerequisites
To be able to follow this tutorial, you have to be familiar with React and have a solid JavaScript knowledge. Even if you have no previous experience with React, you will be able to follow it. In this tutorial, we will explain some fundamental React concepts.
Choose your development tools. You can use any combination of editors and platforms, but if you want some advice, you can start with:
- Visual Studio Code: one of the greatest editors out there.
- React Native Tools for VSCode: Visual Studio Code plugin for react native development that provides you helpful shortcuts and allows you to debug your code right from VSCode environment.
- Reactotron: A desktop app for inspecting your React JS and React Native projects.
You will also need to have XCode installed if you want to build your apps for iOS.
Starting a project
Let’s assume you’re building a mobile version of your Wordpress blog and want to get started from RNS.
React Native Starter has various themes available and you’re free to choose one of them. Here’s the list:
While building these themes, the team was trying to cover as much market volume as possible. You’ll find any design trend included in rns. And for your new blog app, you’re choosing the dark version. Here are a few screens from it:
First of all, let’s go and clone the RNS code and go to the repo:
git clone https://github.com/flatlogic/react-native-starter-full.git
cd react-native-starter-full
In the beginning, React Native Starter comes with default theme (which is beautiful as well), but you want to have the dark one. As our documentation states (https://docs.reactnativestarter.com/) we only need to run the following command in order to change the theme:
$THEME_NAME=dark bash ./change-theme.sh
And your app is dark now! Let’s see how it looks like with all included screens. Run these 2 commands in the console:
yarn install
yarn run:ios
Wait for the build finished and you’ll see your app in the simulator. And here’s your initial app ready.
Adjusting your project
And the next step is to adjust your newly created application to your app’s type. First of all, you need to decide which pages we need to have inside the app. For your blog, the pages list is:
- Login screen.
- Articles list.
- Single article page.
- Profile page.
All the pages are included in RNS, so let’s modify the stated template. The only thing you need is to modify navigation. If you open the current navigation page (src/modules/navigation/MainTabNavigator.js) you’ll see that we’re including and using all the pages in our navigator.
But we’ll only need 2 pages at the tab navigator: posts list and profile page. Let’s modify it to the following:
And now we have 2 screens in our tab navigator. Then, in order to have 2 other screens (Login and Post screen) we need to modify our top-level navigator (src/modules/navigation/RootNavigation.js):
And now we have our navigation implemented! You have all the screens in place.
Next Steps
Next steps are more specific to your app’s goals but thanks to the RNS flexibility can be implemented fast and without much effort. All you need to do is to connect RNS to your blog’s API endpoints by modifying the code of module’s containers.
Conclusion
As we just discovered, starting a new app with React Native Starter can’t be simpler than it currently is. In less than an hour, we’ve created a boilerplate for a specific app without much effort and deep architecture knowledge. That’s why React Native Starter is the best-in-class option for starting a new mobile application project!
