Build Real World, Scalable & Updated React Native Apps with Expedia Senior UX Engineer, Amit Mangal

[Music] welcome to new line guide to building apps with react native in this course we're going to take a product-based development approach what that means is we will look at building a design system for the app and taking an atomic design patent methodology for building uis react native already black boxes out a lot of platform specific nuances so i feel the focus should be on building our apps as an experience i recommend that the student build their own apps along with the course as building something ready-made hides the nuances of a real app though we will be building an e-commerce app over the span of the course so students can choose to build that too by the end of this course you will not just be able to build a performant app in react native but also know how to troubleshoot bottlenecks the course is split into eight sections and a bonus content section it will start by covering the fundamentals like navigation setting up screens styles and ui elements before moving on to more advanced topics such as state management crash and error reporting setting up analytics and middleware debugging and performance optimization the fundamentals discussed over the course can be applied to building any ui application and is not limited to react native apps if you have a question you can ask in our discord channel you can find the link in the notes below feel free to hop on to the channel and ask your question we will be sure to respond and help you out we will be building the app using typescript and the course comes with the boilerplate code which will help students jumpstart we hope you enjoy the course and it helps you build beautiful products with react native hi react native for javascript developers is a course designed for developers who have been working with javascript for a long time and want to understand how it serves as an excellent platform for building apps we will start the course by covering the fundamentals like setting up the navigation building the screens adding styles building ui elements and then moving on to more advanced topics like state management crash reporting setting up the analytics using middlewares debugging and performance optimizations over the course of the module we will be building an app using a polar plate code and like any other open source framework react native provides a wide range of tools and libraries to its users we will cover the topics of the module using a set of tools that have been pre-baked into the boilerplate code these tools are time tested and some of them are industry standards and are highly recommended although developers are free to substitute any of these tools with a choice of their own a word of caution here though as some of these tools have a direct impact on the performance of the application with react native the important part is to understand how these pieces come together to create an app this course is not just designed for someone looking to jump start building apps using react native but we will take a product based development approach and learn about things to take care of to achieve native performance on both the platforms android and ios this is the first module getting started we will look at some of the real world apps that you might not have known to be on react native it's going to be a fun little exercise we will talk about storyboarding and how it aligns to product based app development and why it is a must if you go by my advice then towards the end we will build and run the boilerplate code that comes along with the course the bonus content section contains some of the libraries that deserve a special mention in the iron world the first of them is lottie if you have not heard about it do check it out while it is mostly used for micro animations i've had the experience of rendering some really complex animations with this without breaking a sweat and the best part these are not memory intensive and i've seen them work amazingly on some pretty low end configuration phones too reactive svg is the second one while it does not draw a lot of attention like lodi but trust me it is a life saver most of the images we ended up using were svg so what are the prerequisites the course does not expect you to have any prior experience developing native apps in fact i was at the same place when i started off a few years ago it is not a requirement for react native javascript is at the base of everything react native so that is a must knowledge of react is good to have as fundamentally the concepts remain the same between react and react native although i would say do not let that discourage you if you have the experience with any front-end framework before the boilerplate code we are going to use over the course of this module is based on typescript so if you have used typescript before that is a plus if not we'll learn as we go although we'll be building an app as we progress through the course i have planned the modules to be standalone as much as they could be so that you can jump through the topics that you're comfortable with or come back to them later without requiring too much background however where required i've added a heading called prerequisites at the top of the section about what other modules you need to complete so that you can better understand the current one so if you do want to jump to any section just remember to go through the prerequisites before you do that having said all of the above i do recommend that you go through the modules of section 1 that's getting started in the order as this sort of build up to the type of learning we are trying to achieve here and it also lays the foundation for this entire course broadly speaking apps are categorized into three types first comes our very familiar and the most popular tool what we like to call the native apps now as the name suggests these apps are built on native platforms like java or kotlin for android and objective c or swift for ios the sdks and the ids for developing on these platforms are freely available from the oems themselves apple has xcode and android has built on android studio by google then comes our pwas or the progressive web apps now typically these are websites that can be bookmarked to home screens of their respective platforms they are made responsive to cater to the mobile device resolutions and finally comes our hybrid types now frankly there are multiple options here one option is to build a web application and run it inside a webview container these are built on web technologies like html css and javascript and they render on web views ioniq and cordova are examples of such platforms another category is that of applications that render on the native views providing some kind of a technology bridge that enables developers to do that without writing any native code these are generally written in a common language like javascript or dust so when finally compiled and packed as apps these run on native views providing a first class native experience and are also deployable to multiple platforms mostly promoted as write ones deploy multiple times platforms regularly falls under this hybrid category of apps so how does it differ from these other platforms now this is the important part react native renders everything on the ui thread of the app in native while handling the interactions on the javascript thread so what does it mean it means a reactive app will be responsive and deliver a native like performance only if the javascript thread is well optimized that is in simple terms kept free as much as possible for rendering if that is confusing to you don't worry about it just yet this may sound like a lot but as you go through the modules of this course you will see that if you can just follow some thumb rules and best practices along with an app architecture that clearly segregates responsibility you will be amazed to the complexity of apps that you can build with react native now the question that comes a lot across many forums too is that is it worth investing in react native after all this is a wrapper above the native and can never be as fast right well i do not agree with that i like to approach this question differently and the answer as usual is not straightforward the answer for me depends upon what are you looking to build for if for a moment you could keep this perspective out of the head that react native apps have performance issues and i believe they are mostly because they are poorly written will it then make sense to build apps in react native or flutter or maybe even xamarin remember react native renders everything in native so it is not like a webview the experience that end users of your app get is that of a first class citizen let's do one small exercise which can help clear some of the bias towards not just react native but also towards other cross-platform tools like it let's look at these apps some of which are in react native obviously feel free to download these apps use them for a minute and then try guessing as to which category do they fall out of the above three so let's start with discard that's a pretty decent load time let's start loading more messages a little more as you can see the transition between loading the messages and displaying them is not jerky so let's scroll really fast seems to be doing a pretty good job let's go to the side menu it says it's a list and we have tabs at the bottom it seems like it seems to be performing pretty well right okay so next up is this cast 24 app it's an app that allows you to buy and sell secondhand used cars so as we saw the loading time was pretty good right let me just kill this whole thing and then start again yeah pretty decent uh it has a gallery to start with okay that seems to be doing well okay let me just log in to this and come back to the app so it has a nice little animation going on right here recent otp login let's connect whatsapp okay later so that was a pop-up and it displays cars like this so it's trying to render how many five images and the ui seems to be pretty heavy that's a lot of cards let's try and load more cars to it and see how it performs hmm it seems to be pretty smooth it has tabs at the bottom we'll look at it in a few seconds but let's look at how does it perform when we scroll really fast yeah it seems to be doing a good job okay so these are the other tabs and there seems to be another list here it's 29 000 at the top so overall seems to be doing a good job i'm not going to try facebook i think we have all used that so let's move on to amazon okay that's a pretty decent load time we've all used amazon too i suppose it has a home page of pretty fixed length but it seems to be doing pretty well if we scroll really fast that's good let's move on to some other tab and yeah so amazon is is a very widely used app although the ui doesn't really feel like native but what do you say is it a native app is it a hybrid app is it a webview what do you think the transitions definitely seem native but i'll let you guys decide okay and at last let's see airbnb uh that's a pretty decent launch time airbnb i think has one of the best user experiences really nice transitions let's try and search for some place to go i'm trying to be adventurous let's see iceland what are you looking for that was a really great transition right finding a place to stay calendars let's do next adults to search so it has a map at the top and list of properties at the bottom let's try and load a lot of properties and see how it performs well it seems to be doing really good right that is nice so let's move to the map view and i'm just trying to zoom in zoom out let's see what happens when you tap one of these that was again a really nice transition airbnb does a really good job with that app right so these are the other tabs i think the explorer tab is one of the heaviest ones doing a lot of work okay there are a couple more that i have mentioned in the course like the walmart grocery and tableau that i have not really tried here because they are not really available and you need accounts to do that so feel free to download those and try it yourself and if you're ready let's look at the answers did that list surprise you airbnb facebook or native apps amazon is a hybrid app and the rest of the apps that you saw or even tried like discord walmart grocery cast 24 shopify tableau all of them are react native apps a disclaimer discord ios is only on react native discord android is native facebook is native although i think the marketplace tab is on react native amazon is a hybrid app it i do my best with my understanding what they do is they launch web views and they use the native transitions to make it feel more like an app so i hope that helps create some of the bias around performance it all depends on how good you write the app how will the app is structured and and how you really design the user experience of the app now since we are at it let's also talk about the elephant in the room the airbnb articles there was a series of articles by airbnb that became quite unpopular where they had called out on sunsetting react native for their app they had even published a detailed analysis in what was a five part series about the pros cons and their experience with it i would recommend reading those articles yourself and i would also recommend the readers take those with a pinch of salt firstly it was till 2016 when they started off with react native also they had not built the app on react native but were using it to build only parts of it like a brownfield approach so they relied heavily on the bridge for communicating and creating which is i wouldn't say the weakest but comparatively the slowest link in react native world and to be fair reactivity was itself quite new at the time and had very frequent upgrade react has come a long way since then and react native 2 has had some major upgrades especially with the lean core hermes support and the all-new one-stop debugger flipper there is also a major re-architecture happening to how reactive interacts with native modules where they're doing away with the bridge and substituting it with a new component called jsi or the javascript interface this element will also serve as an enabler for new fabric and turbo modules with this new architecture developers will be able to use any javascript engine and not bound to javascript core we will have direct control over native modules and the application will use them only when required instead of starting all of them at the start then there is fabric which is a re-architecture of the ui manager and is expected to transform the rendering layer by eliminating the need in bridges these are mostly under the hood transformations that are happening moving towards the end of the series of the airbnb articles part 4 it also mentions some interesting observations of an internal survey of its developers 60 would describe their experience as amazing and 63 of the engineers would have chosen react native again given a chance and 74 would consider react native for a new project i hope this little exercise helps clear some of the bias in the mind now the idea is not to sell react native but i want the readers to approach this course with an open mind so that they can learn react native the right way and we'll see that react native can deliver what we want to build with it as i mentioned in the about the course lesson earlier i recommend a product based development approach for building apps using react native once you get a hang of the ecosystem around react native building apps will become the easy part the tricky part is knowing how to set up a strong foundation that helps you build a maintainable and scalable app the right way now if we look at the app we want to build as a product that our end users are going to use we will be able to build a great experience and not just an app i mean is that not the aim of using a cross-platform tool like react native for app development okay let's look at this objectively using react native we are reusing our expertise in javascript or typescript right we are black boxing out most of the platform-specific nuances and trying to build ones and deploy on multiple platforms we are looking to i trade furiously and reduce the time to production and with all of this provide a consistent experience across platforms to our end users so if you look at all the above points we have offloaded quite a few nuances of building apps to the platform and are trying to play on our strengths so wouldn't focusing on building our app as a product make the most sense and having a clear view of what we are looking to build will not just help us get there but also help us not get lost in technicalities and challenges of a platform storyboarding the app will help us achieve just that by definition a storyboard is a visual representation of a film sequence and breaks down the action into individual panels it sketches out how a video will unfold shot by shot this is not the typical storyboarding that is created by the design teams though the idea is similar to that as it is a very good way of looking at our app from a technical implementation point of view here we will create a wireframe design of the app you're looking to build the goal of this step is multi-fold first it will help layout the navigation flow of the app this will help us lay the foundation of the app do we want a single screen stacked app with a side menu or do we need to have a tab navigation next it will help identify the structure of the views the app design may have a common header so can we build a fixed header that can be shared across screens then we'll look to build a design system and we'll use the atomic design pattern to do that now there is a whole module dedicated to this process so we'll cover that in details there but in short a design system will help us build a prototype for the app like standardizing the most basic elements defining the primary and secondary colors defining paddings margins headers titles basically every part of the app next as a part of the design system we will also identify elements and components elements are the most basic building blocks that are used to build any view like text boxes buttons and along with design will also define their behavior components are the building blocks think of them as lego blocks for example a view may have a carousel product displays reviews and rating cards the idea is to break the ui down into individual reusable components the process also helps us build consistency across the app and in turn reduce cognitive load on our users of the app i would recommend building custom elements for even most basic native ones like text element or image what this does is it makes the app very maintainable say for example the design tomorrow changes to support a new font for the app now if we have a custom element for text doing that doing that is practically a one line change in the application's design system another example can be about changing the brand colors or or the theme of the application that includes default fonts or maybe supporting the dark mode storyboarding and a design system will help us achieve all of this let's look at the screens right in front of us for example what do we have here we have an initial tour a few screens that are trying to show what the app is going to do for them for our users and then it lands on a home page now from a technical standpoint let's see how we can break this entire flow down into elements and components so first there's the screen we have a carousel here that supports uh displaying multiple images and the user can navigate forward and backwards through it so this kind of gives the tour so this is a carousel then we have our very basic elements buttons that help the user to navigate and finally land on the home page using this home button that can be a primary button made of the brand color of that of the app when we land on the home page let's see what we have we have a search bar at the top a set of category icons then there is a carousel again but this time a product carousel and then probably a banner carousel and with the tab navigation at the bottom so as we can see we have a product castle over here so probably this can be reused from what we build for the initial tour the difference being out here our carousel was supporting a set of images and out here it's supporting a set of product cards so these can be different type of components for a product for carousel that we build for this application right and we can reuse what we build here out here similarly it can be it can be done for the banner carousel this time again a set of images the difference being this probably is a free-flowing one and again even for the category icons if they extend beyond the viewpoint then this one again can be a carousel but this time we'll pass category icons as children at the top we have the search bar so it consists of the the most basic text element that supports displaying an icon and it will depend upon the implementation of the search bar is it going to be a drop down list over here or it's going to be a separate screen so if we look at the whole thing holistically from a storyboarding point of view just these three screens from from the user opening the app to landing on the home page we have broken this down into a swiper a set of secondary buttons that can be defined with typography there is a primary button that takes us to the home page then on the home page we have category icons a product carousel again a primary button but displaying a different text and a different action still a primary button a banner carousel and a header how much of this are we able to reuse just between these three screens a lot right and how much can we standardize using a design system as we move forward in the journey of storyboarding to to the further screens the number of new elements and styles and typography that we defined is going to reduce and it should reduce otherwise we need to check are we are we building a consistent app or are we building an app where each screen has its own identity and doesn't fall in line with an overall brand image or brand colors or a brand picture for the purpose of the course we'll use an open source boilerplate it has been based off the official react native getting started guide and typescript integration is done using instructions from microsoft's typescript react native starter repo on github 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 type is typescript integration and a few other tools that are required in any app so let's look at what the boilerplate code has to offer the routing and navigation has been done using react native navigation we'll see more details of this in upcoming modules for state management we are following the flux architecture 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 we'll also integrate thunk for side effect handling the boilerplate code also has basic setup done for typography some global styles for building elements and widgets these will help in defining a design system for the app and it also has code length using airbnb lending now these tools can be replaced as per developer's choice so next let's look at the project structure before we jump into running the code the project is based off react native cli so the structure that we see here is actually quite similar to that now there are four major folders android ios shared nsrc 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 you want to run code from android studio or maybe from xcode apart from that in android folder we can find our apks that will build so it will be under android app build output apk and then debug so we'll have the apks here so it'll be either a debug folder or a release folder based on the kind of app that we have built these 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 uh for ios unfortunately there's 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 maybe firebase now if you want to open the ios project remember to open the app name dot xc workspace file do not open the appname.xcode.file that will not work so remember you have to open the xc workspace file we'll see how to run apps from the android and ios folder in the next lesson the shared folder is where we have all the business logic of the application and the src folder contains everything related to the presentation in the shared folder we have our redux and our services we look at redux in in detail in the state management lesson that we have in this course the folders action reducers and store are actually a part of it in action we have all the actions of the app we define all of them app.ts has global actions for the app as we keep building different screens like home screen or card screen or something else we keep adding to it the constants has all the constant types will build objects to access strings will never use hard coded strings in the application reducers has industrial tx it combines all the reducers of the app at a single place for the store to consume the app.tsx actually implements the action that we defined under actions that is the splash launched and similar to what we do for actions we will also keep building different files for different reducers and that we go forward in the as we go forward in the app store this is where we actually initialize our store and we add all the middlewares uh as you can see uh we are actually adding the logger middleware and and the thunk middleware yeah it's there 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 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 finally we pass the reducers and all the middlewares to it to the store to create the store and we exported so if we need any other middleware like analytics we may require we can add them here so thunks are basically action creators they are great for side effect handling whenever a view fires an action uh thunk will thunk is the place where we need to implement all the business logic we need if you need to make an api call if we need to store some data in application storage 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 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 now the core folder is what i like to maintain as a low level 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 xcos or api source 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 exiors to api source or to something else or we want to change storage from async storage to sqlite or again icloud or something else so this kind of abstraction really helps out for a long term maintainability as uh the services don't really care whether you're using what kind of technology are you using at the back end to make those calls really next let's look at the src folder so this one contains everything related to the presentation of the app the screens the views the styles and everything else now config is basically the config that your application boots with it can be all the apis that your app will need uh to make calls to the base url of the default local in case your app supports multiple locations then if a user has not selected local uh up till now then what's the default local that's supposed to come so basically this this this keeps growing as the app grows constants again very similar to the action types we had so all the screen names are basically strings so we just try to define constants for those to be used across the app in navigators we have index.tsx this is where the application boots from it listens for a particular event 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 but as in uh 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 this is where we define the base navigation of the app like the stacked app versus tab navigation and then we have our router.tx so router.tsx has all the methods that we will call in response to user actions that that are performed in our applications so for uh for clarity i just like to separate them out as navigations and routers as we can see router would be a let's say show card screen or or maybe show model or something like that or maybe go go back to some screen right or pop to pop to root is basically if we have open four five different screens then going back to the base screen so router is basically more towards routing logic next let's look at the view folder so this one has uh assets elements screens tiles and widgets 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 styles is where we'll define the global typography of the application now global.tsx is is the global we'll talk about building a design system in the application which really helps in maintainability and consistency of the app and global.tsx and typography these two are the fire these two are play a very critical part in in building that so globals has uh 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 the title size how what should be the button fonts colors and and these types of things typography is our uh applications uh let's say color palette we can call it color palette or theme so it has a few things like colors fonts so we define the colors over here like like i said we don't want uh 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 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 sense all we need to do is we need to come and make the changes over here and it should reflect throughout the entire application now i left the elements part on purpose as as it plays a critical role in in building the design system the elements and the widgets we look at them in detail in our design system uh lesson but in short elements would be our most native uh building blocks of the application like buttons and text boxes will uh 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 so these will be like headers like carousels uh product widgets and all the different components that will be required to build any particular view or screen on the on the application that was the structure of the application next let's look at the flow of code so index.js is the entry point of the application it's calling an app function which is inside our navigator now our navigator is listening for a registered app launch event and once that is done it will set some default options like uh about the top bar do we want it to be visible or not what theme should it be and then it says the kind of application we're looking to build so this shows flash method over here it's trying to do a stacked app with the side menu now if you wanted to do a tab navigation we have already defined that here all we need to do was call that particular method instead of the shows method and our application will boot up with a tab navigation now 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 state management and all it does is it adds the provider 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 the splash screen 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 this is basically broken into three parts one is the component.tsx so this is basically the entire component that we define it can be a class it can be a functional component next is an index.tsx we are defining our map straight to props and map this map dispatch to props over here it's very similar to react so basically what a map state-to-profit does is it would use we would use it to provide the store data to our components like the splash page over here especially over here whereas the map dispatched to props is something that we will use to provide action creators so any actions that we dispatch will be declared over here and and from here we'll call the methods from the thunks that we had defined earlier and the next is tiles.txx 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 which 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 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 while we're building them but you can definitely choose to keep all the styles together so that's the entire flow of the app and it has all the basic uh basics that are required for building an app using react native and it also has typescript 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 so it 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 like we have the command for building the android app in debug mode or in release mode or we want to start uh the android through our terminal so we just need to do react native run android the variant over here and this is the device id that that the emulator the id of the emulator that needs to be in your system just change it and use what you have in your system and very similarly for ios okay so let's jump into some coding uh in this module we'll build the boilerplate code that we talked about in the previous lesson and we'll run it using xcode and android and we'll also run it using terminal there's no specific uh benefit of using either it's just that where people tend to have preferences and all of them work fine so let's get started the first step is to clone the repository we could also download a zip from the boilerplate github repo we'll be loading the repo so let's do that next let's get inside the repository and if you follow the instructions it says we need to do yarn install or npm install so let's do that this is a command just remember this every time we do development we have to start the metro bundler and the command for that is yarn start so as a first step we'll try to run this on ios and we'll need x code for that so let's launch xcode uh and then we need to go into the ios folder remember the application has ios and android folders at the root location just go into the is folder and do power install this is the one time step so let's just go to the ios folder and do pod install and then we need to open xcode and simply run the project from there now let's look at a few things while we are here so this is your xcode interface will not need much of it unless you want to run your react native applications through xcode it's totally a personal preference this is basically the project and if you want to change your simulators you can do it from here if you want to add any additional simulators it it we can do it from here then if you connect a real device through usb that will also show up over here it says no device is connected but if you connect it'll show up over here so let's see if our pods are installed uh yes they have so we'll just build the project and now doing this for the first time will take some time to get this done so once the project is built uh let me let us continue from there okay so i'm back the project is built let's just run it and it should open the simulator while that happens let's also start our bundler remember we need to start the bundler before the project starts on the simulator as we can see here the bundler has started and we can press r anytime to reload the app and we can press d for the developer menu that that helps in debugging the entire app i will go over what are the different debugging options in react native in one of the later modules we'll cover it extensively again there are multiple choices and not one answer now as you can see it was trying to load the bundle and it has loaded so there we have our app this is this is the initial splash screen if you want to reload the app just press r twice once this build is selected and it'll reload the app so let's continue to the application and we have our home screen so this is the tab bait navigation and we have two screens over here so let's try and make a small change and see how the live reload works so this is the splash component and we have the button that's called continuity app let's just say let's call it just continue and save and that should reflect immediately that was quite fast right yeah so next let's look at the same using android studio [Music] so in case you run into any issues with ios or android setups i've tried to add the common errors over here like for ios one of the most common ones is pod not found that means you don't have cocoa pods installed in your system so just follow the steps for that and remember to do pod install that's just one additional step that's required for ios for android the initial steps are the same we clone the repo we do npm install and from there let's do it from the android studio so it's quite similar to how we run code with xcode we just build the code and run it we can keep the bundler running as it will also be required with android so we have our xcode android uh sorry android studio and all we need to do is just press this run button the app is already selected now remember to load the android folder from the project as you can see here at the root the android folder so that needs to be loaded in android studio and all we need to do is press run [Music] and it should start the simulator that we had selected over here it's quite similar again to xcode and we have our devices here and once we connect a real device using usb will start showing up here now one additional thing uh once you connect a real device it sometimes it might not show up the reason for that is we need to enable usb debugging so it took some time to build the app for android studio and install it it does that automatically and launch so i've skipped that part but it's pretty much the same just press the run button and it should work and we can see a very similar experience so let's check the live reload over here let's again change the text to continue and it should reflect in the app and it says refreshing and there we have it so yeah pretty much the same right so again for android 2 i have added the common errors here so next let's let's look at doing the same thing using cli i find that to be the most uh of the the most preferred option that i use because i don't have to launch android studios and x codes because uh working on react native we practically don't need to do anything there and they take up a lot of memory so using cli is also quite straight forward if we move to the ios section uh using the terminal all we need to do is we need to run this particular command react native run ios for android it's on android and then we're passing the simulator name so let's just do that we need to have the bundler running so i'll just open a new tab at the root location remember and just run the command now remember this the name of the simulator that we pass in that should exist in our system otherwise this command won't work so just check for that now one way to find the simulators installed in your system is by running a very simple command x run sim ctl list and it will give you all the simulators that are installed so here i picked iphone 11 and the first time this one may take time and remember us we are running the code using cli but that doesn't mean that we don't need x code installed in the system we do need x code in the system so do install that and update it and as a check just run xcode once what i'm saying is we don't run the code using xcode once but just run it launch the xcode application once the first time we launch xcode we'll try to install additional tools that are required to run these commands and then build ios build mac app and ios apps using cli so that is required so there we have and so this is also a preferred way you can simply run one command from from the terminal and it works let's try the same for android so it's quite similar for android the command just varies a little we again have our react native and then run android now here we have a variant if you want to run in debug mode or in release mode and instead of simulator we are saying device id this is again a device id and it it's some it's a simulator that needs to be installed on your system again and uh one way to find it is using this command it will list down all the simulators in your system so let's try and run this command the one difference between android and ios using cli is that when we launched the command for ios it launched the simulator installed the app and then kick started the app uh in android we have to launch the simulator separately and then run this particular command so let's run the simulator first the command for that is quite similar to this one so it's basically going to the emulator folder and then hyphen avd and then the device name so that should start the simulator for us next let's copy the command we don't need to copy the device id because we only have one simulator running so it'll automatically install our app in that and launch it it's quite similar to ios except that one extra step of launching the simulator first so again building this for the first time it'll take a little longer so let me just jump to that and i'm back it does take a little bit of time the first time we do it though this is all also a lot dependent on the kind of machine that we are running we just saw the different ways of running the app either through xcode or android or terminal to summarize if you want to use xcode just open the appname.exe usa project in the xcode and run it don't forget to start your metro bundler for android just open the android folder and run it again quite simple for cli start the metro bundle bundler and for ios just run a single command that we can find here and for android run the simulator first and then run this command as i said earlier through the rest of the course we'll be building an e-commerce app now we'll not be building the entire app but major parts of it like the home page pdp and a little bit of card and i'll leave the rest to the students to complete as we have covered we would have covered most of the aspects of building app using react native the important part is to understand how these pieces fit together and it's not just about extending our javascript expertise now that's an obvious goal but it's also about how do you build an app how do you start from a blank slate and take the journey of building a production app as i like to call it uh from storyboarding to production and with that goal in mind i'll see you in the next module we'll be using react native navigation to build our app there are a few other solutions available too and also very popular like react navigation is one of them though from my experience i recommend reactive navigation as it provides a 100 native navigation on both the platforms so what that means is it doesn't take up those extra event loops on the javascript thread most apps have two types of setup either they are a single screen app which are also called the stacked apps or a tab based navigation the choice is totally dependent on what we are looking to build in this lesson we'll look at how to set up both of these the stacked apps also tend to have a side menu or a drawer and react native navigation provides out-of-the-box support for that too these types of apps are generally called stacked apps because the screens that are navigated to are pushed onto the base screen creating a sort of stack the animation on both the platforms are configured to have the familiar native experience that is the new screen slides from the right on ios while it fades in from the bottom on android tab navigation are very popular and are seen on most of the apps it provides for easy access to different sections of the app from a single location the tab bar the boilerplate code starts with a single screen app a single screen setup it is called the splash screen in the code and then it moves to a tab navigation now this kind of setup is great to have some initial marketing screens or load user data or ask for login and then take the user to the main experience the drawers on the side menu are like partial screens that pop out on top of the current screen from the left or the right depending on the configuration not fully covering it this is very similar to what we have seen traditionally on mobile websites it can be accessed by either swiping from extreme extreme sides the left or the right or we can have an accessible button like a burger menu so let's jump into the code and apart from the two navigation setups we'll also look at using models okay so let's start the metro bundler and we can run it on ios or android using the simple code that we have it's already configured on the scripts so let's just do yarn ios now if you remember from the navigation index.tsx uh we were listening for a launched event and then we just showed the splash screen now right now it's just showing a simple screen as we will see once the app installs and runs let's it's already built so it shouldn't be long yeah and we have our bundler running okay now this is a splash screen right now what it does is if you click the button it takes us to the tab navigation but let's say we don't want that we want a stacked app so uh the first thing that we need to do is we need to go to the navigation and then right now it's just a simple screen we need to tell it that we need we want to build a stack app so what we'll do is uh instead of passing the component directly we'll say that we want stack and then as children will just pass sorry just pass the component of the splash screen so id screen start splash and name [Music] okay so now this is a stacked app let's go to the splash screen and try in and instead of moving to the tab navigation let's try and move to a different screen we just call this function and we need the component id for this and we can get this from it's uh it's available in the props for every screen so we'll just do navigation dot since we want to push screen will do push we have the component id and we'll just pass what screen we want to see now for now i have a dummy screen created let's just do that and okay giving an error because i have not declared it in props the boon or the pane of typescript and let's just click yeah so now as you see what's happening the screen is being pushed on to the base screen now if we move to the second screen and now push more screens over it we can see how a stack has been created right so that's why this is called a stacked navigation if you directly call the navigation here i recommend moving all these routings to the router that we created so what we'll do is i already have a route defined for pushing the dummy screen so let me just call that from here instead of doing this so we'll just do [Music] router dot so push screen and it needs the component id so we'll pass that and that should do it great so it also keeps our component really clean right so let's add a side menu or a drawer to the screen so for that again we need to go to the router the navigation and in root we need to say that we'll add a side menu and side menu will have a left or right and in a center so we'll say it's a left and on the left the component that we want to show so i've already created a simple screened name drawer so if you go to it it's nothing it's a very very simple screen just shows two texts and let's add the id and the left is the drawer and what what do we have in the center we need to delete that so we'll have center and we can simply copy that we will need the entire stack and if we save yeah so it's not visible right now but if you pull from extreme left there it is the drawer menu now we can also add an icon to access this let's just do that very quickly let's go to the splash component and let's add a button uh we will add a burger icon which i have already added to the assets so there's a burger menu so let's just do that it's a simple [Music] burger menu image and principle is basically the new version of touchable opacity which is basically we can use to handle any kind of touch events so what we'll do is we just need to add the on press event to it and we'll say that we'll call the showburger menu that's the method that we have already declared so we just do navigation.merge options and this is the id that we need to pass it should be the same as what we declared for for the draw screen so let me just make it same once i save it it's taking the space but it's not really visible that's because the image we need to pass some kind of height and width so let's just call it menu let's go and declare height let's say 44 width let's say 44 and save it oh you need to save this too and there it is it's coming in the center because the container has a align center so let's just put it out of the container yeah that does it and let's add some space [Music] so that looks better so we have our image and it should work now there yeah so that's the side menu the drawer the drawer is actually just a screen we could we could build anything on top of it we could build a list of navigation menus we could build profile user settings so yeah it's very extensible that way next let's look at tab navigation so if we just go to navigator and index and instead of doing shows bash let's just call the tab navigation [Music] now this is a method that we have defined that sets up tab navigation using react native navigation it's not something that comes out of the box and if we just save it our app now boots into a tab navigation this is also great though i do recommend keeping a splash screen and then moving to a tab navigation the reason for that is sometimes we need to fetch user data from an api or do some kind of loading from async storage or sqlite and that may take a couple of seconds which doesn't seem long but from a user expectation for an app two seconds is a long time so the splash screen really helps in putting some kind of a placeholder like a gif or a small video that can keep the user busy and while the data loads and then we can move to a tab navigation so if you look at the setup of tab navigation it's quite similar to what we had for stack so there's uh so we are still using a side menu but let's just if you could ignore this for a second uh there's the bottom tabs and then it has children and now each children is actually a stack so we're just putting two tabs right here like home and settings and each of them is a stack because on each screen we'll be able to push more screens so we can push screens onto home tab push screens onto settings tab that's why we have a stack and then it's all very similar to the earlier one we passing the component id this default prop if you want to initialize a screen with with stored data we can do that or if you want to pass props from a different screen like when coming back from some screen to a parent screen we can also do that and these are some of the options like the top bar do we want it to be visible do we want to draw behind it and these are the bottom tab options that we see so there's the font size the text that we want and the text color that we want now if you notice we are using the typography here we're not using any hard-coded text strings and if you want to display an icon we can pass in the icon generally this this is generally two sets of icons one is for home and one is while it's active that's that's selected but we can also do that using these attributes selected text color or selected icon color and that ways uh the tabs will get highlighted with whatever we pass so like i said we'll be building an ecommerce app so let's add a couple more tabs to it so we can simply copy one of these and let's say that we'll call we'll have a search screen but for now let's just pass the setting screens because we need to add that screen to our views and register it uh in the navigation if you remember so we need to register the screen so we'll do that but let's just add two more of these and call the third one search or let's call the second one search third one can be let's say card and we'll have a fourth one for user profile or let's call it settings and just save it and reload and there we have it so we have a home search card and settings so right now they are sharing the screens but we will add these screens so that was easy right so we've already seen pushing a screen and it automatically provides a back button but what if we want to go back manually how to do that so this is the dummy screen let's just open that dummy component let's add a button to it now we'll be using an element that we've already declared and it's one of the basic elements we'll talk about elements and widgets in our design system lesson but let's just say for now it's the default button that we have configured for application with some default styling and the text free path is shown so we'll just say title equals go back and on click we want to call this dot back navigation so let's just declare that so we again do navigation anything related to navigation supposed to come from navigation dot this time we do estimated push now we do pop and we need to pass the component id this component is id because we want to pop this right so now if we do go back that works let's say that we have pushed three four screens on top of this base screen and we want to come back to not the root screen but probably the screen one or screen two so how do you do that so in that case you just pass the component id of the screen that we want to move to so let me just add a couple more screens and come back and show that so i have added two more screens let's just call this dummy screen one and we will push the screen to i've added dummy 2 dummy 3 so let's just push navigation push we'll pass the component id comma component sorry p id screens dot dummy two and let's call it push to and we need to pass in the name which is screen start dummy to save it so yeah that pushes dummy too but damn it hasn't go back let's just copy this entire thing go to dummy two and let's push three so dummy three and it probably needs the screen variable and id let's just do that it will push through now we are at three now we want to click this button and we want to go back to the first screen dummy one now right now it's taking us to two but we want to go to one so all we need to do is let's just go to dummy three and this is the back one so we'll just go to navigation and it has a method called pop2 and this will pass the id of the first screen the same id that we called it with so it was in home dot component and the component id that we passed was this one screens.dummy so let's just go to three let's say two screens dot dummy save it and now we have gone back to screen one so this way we can control the navigation in us in a stacked setup [Music] so we can go to let's look at that again we go to three and from here we go to one but what if we wanted to go to the base screen let's say that we have completed our journey and we don't really know how many screens are there we just want to go back to the base one since the journey is done how to do that so for that there's another method that's called pop to root and it takes the component id and let's just save it and get back to the base screen next let's look at switching tabs users can always click on these but what if we want to do that programmatically let's say we have a card icon and we click on it we want to go to the cart page let's just reuse this push button so let's go to home component and on show push screen we're using using this we just need to call a navigation method let's do navigation dot we need to use merge options now this will take the component id and we need to tell it that we need to switch to one of the bottom tabs and make the new index as so it's called current tab index and we want to do it too and just save it so now when we click this it moves to the card screen so i've just we don't need the burger menu here so i just added a cart icon and let's just make it cleaner so the images on the left let's go to the style and let's say alliance self flex and now this works because uh the parent container the touching opacity has a style called card container and which already has display flex so it's pretty similar to how css works and that's the beauty of react native to so next let's uh on press let's create a function for this and so we will say show card screen and we can copy this over here the component id you can just copy it over and we'll say show card screen just save it or not clicking this we are going to cut page okay so one last thing let's look at models models are also components we can render any screen on it so let's try that let's add another button here and it says show model and show model so let's declare this so now again the navigation object it has a method that's called show model and we need to pass something very similar to what we did navigator we need to tell what we need to show so we can say if we want to show us stack as you can see it supports stack right so it's very extensible that way we can show a single screen we can show stack what that means is we can show a model and then again push screens inside the model if the flow asks for it right sorry children will take an array and then we just pass the component that we want to show let's say we want to show screens dot dummy two and let's click it and there we have it our model now since we said that this is a stack the push and also should still work right so that's the beauty of it and if you look at that the animation this is very native right the models in the native ios apps they behave this way when we push the screen it slides in and when we go back so the animation is all very very consistent so let's look at we we saw that we can dismiss the model by sliding this down but what if we wanted to do that programmatically so let's go to dummy two and do that dummy two component and instead of the go back we'll say dismiss model and or let's just create a new button it's quite simple and let's do it right here navigation dot we have dismiss model right and then we just need to pass the component id just save it and once we click the model is dismissed so to recap we saw how to do a stacked app how to push screens add a drawer to it and that drawer is a simple component a screen and then how to set up the tab navigation push screens go back to a particular screen [Music] and or come back to the base screen and how to use models how to christmas them there's just one more option with models there's also an overlay so overlays are actually full screen so whenever you use it you have to be careful because it will not have that default option of dismissing it so let's just do that and so we need to have some kind of a strategy to go back to the previous stream and there are a couple of other options with navigation for models like there's a dismiss all models and there's also a dismiss models uh which we can use if we pass an array of model that we want to dismiss and similarly we have dismiss overlays so that should cover the navigation of the app for the purpose of our app the e-commerce app will be doing a tab navigation and will continue building on this app [Music] you

Channel: newline

Views: 830

Keywords:

Id: 0zVJk_foHtU

Length: 83min 23sec (5003 seconds)

Published: Fri Dec 17 2021