Bootstrapping a React Native App With Boilerplate

[00:00 - 00:16] For the purpose of the course, we'll use an open source boilerplate. It has been based off their official React Native getting started guide and TypeScript integration is done using instructions from Microsoft's TypeScript React Native Starter repo on GitHub.

[00:17 - 00:31] Now the default way of creating a new app in React Native is either using Expo or the React Native CLI. The boilerplate code is built using React Native CLI plus TypeScript integration and a few other tools that are required in any app.

[00:32 - 00:39] So let's look at what the boilerplate code has to offer. The routing and navigation has been done using React Native navigation.

[00:40 - 00:46] We'll see more details of this in upcoming modules. For state management, we are following the flux architecture.

[00:47 - 00:55] Flux really helps control the data flow of the application and manage it at scale. Redux is the library that implements this pattern and we'll be using the same.

[00:56 - 01:06] We'll also integrate Thunk for side effect handling. The boilerplate code also has basic setup done for typography and global styles for building elements and widgets.

[01:07 - 01:18] These will help in defining a design system for the app and it also has code length using airbnbslenting. Now these tools can be replaced as per developer's choice.

[01:19 - 01:28] So next, let's look at the project structure before we jump into running the code. The project is based off React Native CLI.

[01:29 - 01:38] So the structure that we see here is actually quite similar to that. Now there are four major folders, Android, iOS, shared, and SRC.

[01:39 - 02:00] Android and iOS are the native folders while shared and SRC are the folders that will work mostly on to build the React Native app. Now the native folders are only required if we want to make some changes to the native side or if we want to run code from Android Studio or maybe from Xcode.

[02:01 - 02:13] Apart from that, in Android folder, we can find our APKs that we'll build. So it will be under Android, app, build, output, APK, and then debug.

[02:14 - 02:21] So we'll have the APKs here. So it will be either a debug folder or a release folder based on the kind of app that we have built.

[02:22 - 02:34] Since APKs are installable, we can drop them on simulators and install them or we could also transfer them as files and then install them on our phones. So that's about the Android folder.

[02:35 - 02:44] For iOS, unfortunately, there is no such way to build files and then install them. They have to be done either through test flight or some other tool like fast lane or mini firebase.

[02:45 - 02:54] Now if you want to open the iOS project, remember to open the app name dot xc workspace file. Do not open the app name dot xcode profile.

[02:55 - 02:58] That will not work. So remember you have to open the xc workspace file.

[02:59 - 03:12] We'll see how to run apps from the Android and iOS folder in the next lesson. The shade folder is where we have all the business logic of the application and the SRC folder contains everything related to the presentation.

[03:13 - 03:22] In the shade folder, we have our Redux and our services. We look at Redux in detail in the state management lesson that we have in this course.

[03:23 - 03:30] The folders action, reducers and store are actually a part of it. In action, we have all the actions of the app.

[03:31 - 03:41] We define all of them. App dot TS has global actions for the app as we keep building different screens like home screen or card screen or something else.

[03:42 - 03:49] We keep adding to it. The constants has all the constant types will build objects to access strings.

[03:50 - 03:57] We'll never use hard coded strings in the application. Reducers has industrial TXX.

[03:58 - 04:13] It combines all the reducers of the app at a single place for the store to consume. The app dot TSX actually implements the action that we defined under actions that is the splash launched.

[04:14 - 04:32] Similar to what we do for actions, we will also keep building different files for different reducers and that we go forward as we go forward in the app. Store, this is where we actually initialize our store and we add all the middle wares.

[04:33 - 04:41] As you can see, we are actually adding the logger middleware and the thunk middleware. It's there.

[04:42 - 04:51] We have added the logger inside an if block. This variable is exposed by React Native and this code will only get executed in the dev mode.

[04:52 - 04:57] In the release mode, it's not executed. So it's a good place to add the logger as we don't need the logger in production mode.

[04:58 - 05:12] Finally, we pass the reducers and all the middleware to the store to create the store and we export it. If we need any other middleware like analytics, we may require, we can add them here.

[05:13 - 05:15] Thunks are basically action creators. They are great for side effect handling.

[05:16 - 05:37] Whenever a view fires an action, thunk is the place where we need to implement all the business logic. If you need to make an API call, if you need to store some data in application store, like async storage or SQLite or something very simple, like storing it in memory or fetching something, this is the place that we need to do it.

[05:38 - 05:48] Services folder is quite simple. We'll have all the different services here, like analytics or making API call to the backend for card or for any part that your application requires.

[05:49 - 06:06] Now the core folder is what I like to maintain as a low-layer implementation. So we have storage.ts and similarly, we can have maybe an API.ts and let's say that we want to use fetch for implementing APIs or we want to use Xeos or API source.

[06:07 - 06:30] Now this is where I would go ahead and make those implementations, like for forget calls, post calls and everything and I'll expose very simple methods to the rest of the services. Now the reason for that is tomorrow, let's say we want to change from Xeos to API source or to something else or we want to change storage from async storage to SQLite or again iCloud or something else.

[06:31 - 06:45] So this kind of abstraction really helps out for a long-term maintainability as the services don't really care whether you're using what kind of technology are using at the backend to make those calls really. Next let's look at the SRC folder.

[06:46 - 06:55] So this one contains everything related to the presentation of the app and the screens, the views, the styles and everything else. Now config is basically the config that your application boots with.

[06:56 - 07:18] It can be all the APIs that your app will need to make calls to the base URL, the default locale in case your app supports multiple locales and if a user has not selected a locale up till now then what's the default locales are supposed to come. So basically this keeps growing as the app grows.

[07:19 - 07:23] Constance again very similar to the action types we had. So all the screen names are basically strings.

[07:24 - 07:30] So we just try to define constants for those to be used across the app. In navigators we have industry TSX.

[07:31 - 07:35] This is where the application boots from. It listens for a particular event.

[07:36 - 08:01] Now this is how it works in React Native and then we can set some default options like do we want the top bar visible and there are a lot of other things we can do and then we tell the app how to boot the application with as in do we want to boot with a stacked application a single screen with a side menu or do we want to use a tab navigation. Next is our navigation.tsx.

[08:02 - 08:10] This is where we define the base navigation of the app like the stack. Versus tab navigation and then we have our route to the TSX.

[08:11 - 08:28] So route to the TSX has all the methods that we will call in response to user actions that are performed in our applications. So for clarity I just like to separate them out as navigation and routers.

[08:29 - 08:51] As we can see router would be let's say show card screen or maybe show model or something like that or maybe go back to some screen or pop to route is basically if we have opened four or five different screens then going back to the base screen. Router is basically more towards routing logic.

[08:52 - 09:00] Next looks look at the view folder. So this one has assets, elements, screens, styles and widgets.

[09:01 - 09:11] So assets are all the SVGs and PNGs that we are going to use across the application. Screens are all the different views that we will have.

[09:12 - 09:26] Styles is where we will define the global typography of the application. Now global.tsx is the global we will talk about building a design system in the application which really helps in maintainability and consistency of the app.

[09:27 - 09:54] And global.tsx and typography these two are these two are very critical part in building that. So global has default settings for some of the styling of the app like what should be the page margin, what should be the header size, what should be the title size, how should be the button fonts, colors and and these types of things typography is our applications.

[09:55 - 10:01] Let's say color palette, we can call it color palette or theme. So it has a few things like colors, fonts.

[10:02 - 10:16] So we define the colors over here like like I said we don't want 10 developers to be putting in five different blues in the applications a blue that is our brand color. We will simply declare them here and reuse them across the application.

[10:17 - 10:27] So this will work as a typography and we'll also declare the fonts over here. So let's say tomorrow we want to change the from from Helvetica to something else to Sans Serif or Comic Sans.

[10:28 - 10:47] All we need to do is we need to come and she made to changes over here and it should reflect throughout the entire application. Now I left the elements part on purpose as it plays a critical role in in building the design system, the elements and the widgets.

[10:48 - 11:17] We'll look at them in detail in our design system lesson but in short elements would be our most native building blocks of the application like buttons and text boxes will also style them using the typography and the global styles that we have defined so that we can really build consistent components across the application. Widgets will be our components.

[11:18 - 11:33] Widgets will be like headers like carasels, product widgets and all the different components that will be required to build any particular view or screen on the application . That was the structure of the application.

[11:34 - 11:40] Next let's look at the flow of code. So industry.js is the entry point of the application.

[11:41 - 11:52] It's calling an app function which is inside our navigator. Our navigator is listening for a registered app launch event and once that is done it will set some default options like about topboards.

[11:53 - 11:57] Do we want it to be visible or not? What theme should it be?

[11:58 - 12:09] And then it sets the kind of application we look into build. So a show splash method over here is trying to do a stacked app with a side menu.

[12:10 - 12:24] Now if you wanted to do a tab navigation we have already defined that here. All we needed to do was call that particular method instead of the show splash method and our application will boot up with a tab navigation.

[12:25 - 12:40] Apart from that we are registering all the screens over here before the app launches. So if you build a new screen they have to be registered over here and we have written a very thin wrapper since we are consuming since we are using Redux as a state management and all it does is it adds the provider.

[12:41 - 12:56] This is very similar to what we do in Redux and it passes the store to those screens. Now once the app is launched and the control is moved to let's say the splash method over here it basically calls splash screen.

[12:57 - 13:05] Let's go there and it tries to render the splash component that we have over here. So let's look at any particular screen.

[13:06 - 13:13] This is basically broken into three parts one is the component.tsx. So this is basically the entire component that we define.

[13:14 - 13:18] It can be a class it can be a functional component. Next is an index.tsx.

[13:19 - 13:27] We are defining our map state to props and map this map dispatch to props over here. It's very similar to react.

[13:28 - 13:46] So basically what a map state to prop does is it would use it to provide the store data to our components like the splash page over here, splash screen over here. Whereas the map dispatch to props is something that we will use to provide action creators.

[13:47 - 14:00] So any actions that we dispatch we can declare over here and from here we'll call the methods from the thunks that we had defined earlier. And the next is tiles.txx.

[14:01 - 14:21] This is again very simple it contains all the styles for a particular screen. Now we saw a styles folder earlier just remember the difference that the folder that we saw earlier are global and typography are styles that will be reused across the application and they should be referenced like over here as much as possible.

[14:22 - 14:34] But we will need styles for individual screens and it's best to keep them along with the screens. It's just easier in development mode to have the styles along with the screens where we are building them.

[14:35 - 14:45] But you can definitely choose to keep all the styles together. So that's the entire flow of the app.

[14:46 - 14:55] And it has all the basic basics that are required for building an app using React Native. And it also has TypeScript.

[14:56 - 15:05] So it doesn't have anything additional as of now only React Native navigation. So if we go to the package.json and we'll look at dependencies.

[15:06 - 15:16] So it only has Redux for state management and it has React Native navigation. Apart from that the package.json has a few scripts that are helpful.

[15:17 - 15:29] Like we have the command for building the Android app in debug mode or release mode or you want to start the Android through our terminal. So we just need to do React Native run Android.

[15:30 - 15:39] The variant over here and this is the device ID that the emulator or the ID of the emulator that needs to be in your system. Just change it and use what you have in your system.

[15:40 - 15:41] And very similarly for iOS.