by Sebastian Schiau , 1 year ago
In this article however, we are going to concentrate on React native development for mobile applications that will run on Android and Ios. What I really like about React Native in comparison with other frameworks like Ionic or Cordova, React Native will render the UI using native components, while hybrid apps renders using HTML and CSS via a Webview. This means the user experience and even app startup time will generally be closer to other native apps as they will follow the patterns imposed by the operating system. Still, React Native is not perfect, the ecosystem is pretty fragile and documentation is good but not abundant.
However, the point of this article is not compare it with other frameworks, but getting started with React Native, how to install it, how to get a boilerplate going and a bit of explanation of file structure and logic workflow. I will be using Windows and Android Studio to run my apps, so I will need to have installed Node.js, Python and Java JDK. You can check the requirements for all operating system in the Official Docs.
Once you got your environment set up, it's time to install the React Native command line interface:
npm install -g react-native-cli
After you got that installed, it's time to move over installing a boilerplate to get our app going. There are a lot of boilerplates out there and I've tried most of them, but there is one that I liked in particular because of the way it handles the overall workflow, folder structure, plugins and the overall bundle.
This boilerplate is called Ignite and comes out of the box with most of the modules you would usually have to configure yourself:
- React Navigation
- React Redux, Redux Persist, Redux Saga, Redux Sauce
- Reactotron debugging, Tests
- API Sauce, Vector Icons, Maps and much more plugins
Installing Ignite and creating an app is simple as running the commands below. When asked about additional plugins, select Yes to all, since they are usually used in every type of project.
npm install -g ignite-cli
ignite new TestApp
Note* If running on windows, it's usually the best to run your Powershell instance as Administrator.
Now that you got yourself the app sekeleton up, it's time to open the root directory of theapp up into your favourite code editor. Once you did that, also open the
TestApp/Androidfolder with Android Studio and create or start an emulator by clicking on the green "Play" button. This will build and launch the app on your emulator.
If you are getting a an error like:
Unable to connect to development server /
Unable to load script from assetsthen you need to launch the actual react native bundler / server, so inside the directory of your freshly created app, run the following commands
react-native run-android # Run android version
react-native run-ios # Run Ios version
Note* At the time I was writing the tutorial, there was an issue with the used react-navigation module which was throwing an error like: TypeError: undefined is not a function (evaluating 'addListener'). In order to fix that, I had to:
ReduxNavigation.jsfile with the following code > https://pastebin.com/cAa3pByi.
Now if everything went well, you should got your first React native app up and running!
Now I am going to explain as simple as possible how this boilerplate is handling different files and functionalities you will need for most of the projects:
android/ Location of the android app, here you must manual link libs sometimes, handle versioning, update gradle, etc
ComponentsHolds most of the times ""dumb components" and their styles
ConfigHolds the configuration files, you can add your is
ContainersHolds the pages containers or "smart components"
NavigationHolds the navigation mapping and redux nav integration. You can add your routes inside
ReduxHolds reducers, types, actions and action creators. Once you create one, make sure to include it in the
index.js file that combines them all
SagasHere is where we usually connect our redux actions to handle API provided data or other logic. You will need one for each of your reducers.
ignite/ Ignite examples
Ios/ Location of the ios app, here you must manual link libs sometimes, app name, icon integrate cocoa pods
Tests/ Tests location