Setting up the Folder Structure
Let's initialize a React Native project using React Native's CLI. The project will be named carBooking and will be available for iOS and Android devices:
react-native init --version="0.49.3" carBooking
In this app, there is only one screen so that the folder structure for the code should be very straightforward. Since we will be using external images and fonts, we will organize these resources in two separate folders: img and fonts, both under the root folder.
The images and fonts used to build this app can be downloaded freely from some image and font sock websites. The name of the font we will use is Blair ITC.
We also stored the following images inside the img folder:
car.png: A simple drawing of a car to represent the bookable cars on the map.class.png: The silhouette of a car to show inside the class selection buttonclassBar.png: The bar in which the class selection button will be slid to change the class.loading.png: Our custom spinner. It will be stored as a static image and animated through the code.
Finally, let's take a look at our package.json file:
{
"name": "carBooking",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-beta.5",
"react-native": "0.49.3",
"react-native-geocoder": " 0.4.8",
"react-native-maps": " 0.15.2"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
},
"rnpm": {
"assets": ["./fonts"]
}
}
We only use two npm modules:
react-native-geocoder: This translates coordinates into human-readable locationsreact-native-maps: This easily displays the maps and the markers showing the locations for the bookable cars
In order to allow the app to use custom fonts, we need to make sure they are accessible from the native side. For that, we need to add a new key to package.json named rnpm. This key will store an array of assets in which we will define our fonts folder. During build time, React Native will copy the fonts to a location from where they will be available natively and therefore usable within our code. This is only required by fonts and some special resources, but not by images.
Files and Folders Created by React Native's CLI
Let's take the chance of having a simple folder structure in this app to show what other files and folders are created by React Native's CLI when initializing a project through react-native init <projectName>.
React Native's CLI includes Jest as a developer dependency and, to get testing started, it includes a folder named __tests__, in which all tests can be stored. By default, React Native's CLI adds one test file: index.js, representing the initial set of tests. Developers can add later tests for any components in the app. React Native also adds a test script in our package.json, so we can run npm run test from the very first moment.
Jest is ready to be used with every project initialized through the CLI and it's definitely the easiest option when it comes to testing React components, although it is also possible to use other libraries such as Jasmine or Mocha.
These two folders hold the built app for both platforms natively. This means that we can find our .xcodeproj and java files in here. Every time we need to make changes to the native code of our app, we will need to modify some files in these two directories.
The most common reasons to find and modify files in these folders are:
- Modify permissions (push notifications, access to location services, access to compass, and many more) by changing
Info.plist(iOS) orAndroidManifest.xml(Android) - Change the build settings for any platform
- Add API keys for native libraries
- Add or modify native libraries to be used from our React Native code
This folder should be familiar to most of the JavaScript developers who worked with npm as it is where npm stores all the modules marked as a dependency in our project. It is not common to have the necessity to modify anything inside this folder, as everything should be handled through npm's CLI and our package.json file.
React Native's CLI creates a number of files in the root directory of our project; let's take a look at the most important ones:
.babelrc: Babel is the default library in React Native to compile our JavaScript files containing JSX and ES6 (for example, syntax into plain JavaScript capable to be understood by most of the JavaScript engines). Here, we can modify the configuration for this compiler so we can, for example, use the@syntax for decorators as it was done in the first versions of React..buckconfig: Buck is the build system used by Facebook. This file is used to configure the building process when using Buck..watchmanconfig: Watchman is a service that watches the files in our project to trigger a rebuild anytime something changes in them. In this file, we can add some configuration options such as directories, which should be ignored.app.json: This file is used by thereact-native ejectcommand to configure the native apps. It stores the name that identifies the app in each platform and also the name that will be displayed on the home screen of the device when the app is installed.yarn.lock: Thepackage.jsonfile describes the intended versions desired by the original author, whileyarn.lockdescribes the last-known-good configuration for a given application.
react-native link
Some apps depend on libraries with native capabilities which, before React Native CLI, required developers to copy native library files into the native projects. This was a cumbersome and repetitive project until react-native link came to the rescue. In this lesson we will use it to copy library files from react-native-maps and to link custom fonts from our /fonts folder to the compiled app.
By running react-native link in our project's root folder we will trigger the linking steps which will result in those native capabilities and resources to be accessible from our React Native code.