Hello, my name is Anton. And you are on the channel. educational platform Purple School And Today I want to share with you several sections of our course on Rene so that you can start studying it on your own and write an application if you are interested full course then link to it as usual will be in the description And we will start with you studies Welcome to the course and in this In the introductory lecture we will talk about what it is react native how it works and what m need to know in order to we will effectively complete this course with you got used to writing an application web app on react But in reality when we say that we are writing an application on react we use several libraries so that as a result our the application worked we use react js as a framework that doesn't know Directly how it will be displayed our interface and react House which already works directly with the house tree browser and as a result we get react native web app works in a similar way we can use all the knowledge you have accumulated with the recto but use it for development mobile applications react native as well as reactdom allows us to bind that business logic and, in fact, that the display we want to make in react with real components on device and a big advantage comparison with other similar solutions this is what we will work with you with real native components without additional just canvas on in which the UI is drawn it will be real components on Android on iOS on the very in react native At the moment with with the help of which we can build the application and on the Web But in fact we are with this part we will not consider you in the course after all, this is a course about mobile development So focus on you and Android and accordingly react native is actually not just a UI components that automatically are laid out in our application when we describe with jsx but also many additional APIs and Actually, business logic is actually case And we will talk about it in more detail react native device is already in its second In this section I would like to point out that react native is a set of special components that are converted into native UI component that is when we we use some inp accordingly we will display native Input and it will be different on iOS and on Android is an API so that we can get access to the opportunity operating system Well, for example, to gyroscope to camera to media library files this is We'll also look at this course. Well and actually this interaction is logic java script work with applications and again about devices and various features of react work native we will talk a little further what actually, you need to know what it is first of all, the goal of the course is you and me must disassemble all the main components react native for building UA for that to style this UI and do animation, that is, in essence, you will be able to create any layouts any applications absolutely with any layout and without We will also learn to overcome all sorts of difficulties use native device APIs as I already said we will work with the camera let's work with the media library and other things let's see how to work with them as well we will make a full-fledged application not with one screen A with routing with additional pop-up side panels with different layouts in various authorization screens all this we will achieve this with the help of exp router and also the yt manager that we will add in our application And of course we let's learn how to build this application with with help and without the help of Expo on iOS and Android so that in the future we can publish your application but to come take this course for you some basic knowledge will be required In this course we will not focus on react That is, I will assume that you you know react and can write in it I will write in react with typ script to show you We have yet to find the most correct approach we'll even touch on architecture a little bit in that including design But the most important thing is that you are well know react and typescript with us accordingly, there are separate ones in the school full courses on react and type script If you haven't gone through it yet Well and I also recommend knowing CSS because of course we will use it not CSS because CSS in react native is not there is a style system that is in react native very similar to CSS both for flex work and for standard properties that we will I won't use it again stops right at each property in detail because they are similar to those what we saw CSS So if you are good you know CSS then in principle it will be more than enough to style your components in react native now let's talk about how the course is structured What modules does it consist of and how do you It is best to go through it in order to to master the course material as much as possible consists of modules and some logical parts in each module We have a lecture there are exercises there is also a test at the end to consolidate which will allow you to check your knowledge If you pass the tariff with Of course he will be a mentor here more additional homework So we start with some initial introduction environment settings Where in the first module We are currently looking at the module introduction we will talk about Rea native How to take the course and then let's set up our basic environment for that so that we can create our first app on react native and start already write code in the second, in the third more accurately modules we will talk about creating a project about different ways of working with and without Expo and also Starting Our first project Let's take a look at the components and basics styles that we will apply even Let's take a closer look at local flexes if accordingly you are not yet completely once you've mastered CSS flexes, there will be more here one chance in them dive in after we'll talk about the events which ones create a user for us and how we can create full-fledged components and we will move on to separating them to the animation we will make an animation of pressing on button so that we have a smooth gradient transition let's talk about debugging our applications what tools do we have there is and we will also add nng in order to get the most quality from our applications then we will move on to the KK SPO router here we will analyze it directly creating more than one isolated screen as we did before this and full-fledged applications with different layouts on mobile devices we will enter here we need medical care to work we will use a fairly simple one mer J but in fact you can use it here at your discretion Any but we for For this example we will use J because for example, my redax is completely covered in another course after we do it authorization request status processing errors and the sidebar we will move on to native capabilities of our application here we will look at how for example select a photo from the gallery a let's work with loading an image on the server handles all of this and other things things that are required for natives Let's see the API as our application looks like layouts on iPad and how we can adapt depending on the device on which we are looking to make sure our app is Well in some way adaptive of course not in the sense that it is adaptive on the web but looked good as on iPad accordingly in portrait mode so and in landscape mode we'll talk about lists about virtual lists How improve application performance for large lists we will also talk about for example, the gradient style which boxes are not provided about masks Well and basically with what you can encounter in full-fledged real applications and finally in the last part and in the last modules we will already see for publication and notification as we can send local notifications deferred as well as via pushen and respectively assembly and publication our app in upstore and google Play I'll tell you right away that we publish We won't be directly using the application, but we will be compiling it them for publication Of course we will further what is provided to you as you go course you will have a repository with my project and source code And I in In the next lecture I will show the actual speech how to navigate by komita in order to find the lecture you need That is, if you have something is not going something is not working you can always decline my project go to the required lecture and there fully find the required code accordingly the required component and compare your code you will have layouts layouts including icons splash screens everything necessary to create that the application that we will be making in This course will have 12 exercises where accordingly I show and give some I then show the task how I would do it Well, and actually you will have an API which you can interact with there will be a ready-made KND on which we we will fully create applications there are not several lessons, there are theoretical ones lessons where accordingly I will be tell more about the theory How Renev works under the hood And what's there the main thing is happening here It is important to perceive this theory in our Our platform even has automatic ones notes to return to later to this material but there is a lecture writing code here too I recommend take repeat at least repeat for I do what I do. And it could be better. somehow modify improve that code which I write in order to better repeat and remember what we have created Components and applications will also be exercises pause the video you implement the exercises and compare even if you didn't succeed the first time or it didn't work out that way. This is absolutely not true. it's scary because you're studying Well and in At the end of each module there will be a test where you consolidate what you have covered theory If suddenly you have If you have any questions, we have a general chat students who are located here if you have a course with a mentor then you have there is a separate chat with a mentor Where are you you can ask questions Well, and accordingly our social networks Telegram YouTube and VK all links as will usually be at the bottom of this lecture. And here In the next lecture we will move on to review of the project that we are in result let's create it now on the project that we are actually working on speaking with you we will do it again let's talk about how you can watch The source code for this project is all links to The source code will be in the previous lecture. You can download the repository for yourself repositories have commits each of which represents a separate lecture tagged for your convenience marked sections For example if you do you want For example, see the work with SVG in our application which is located in the section p then you just need to find section 5 and a little Find the lecture above which is called work with svg in order to move on this commit you can click twice i I will use it accordingly for demonstrations for You can your respectively git or do it through git console Clint also Here you can see all the changes that we have made added in order to work respectively with SG and such exchange you can always look at the source code and compare it We will also have a project with ours which we will do it will be mobile client for our MS platform within this mobile client we must have a login screen screen list of courses side drop down panel profile screen with the ability to change avatar name error handling and proe th which will be included accordingly in layout and in our application conditionally here is our application live accordingly I can for him log in and enter your password here having access to the list accordingly courses And here we even added notifications and in short the profile is loaded Avatar side menu and all this is complete works on native components with with the help of react N So we move with you Next, we begin to set up the environment We will start the course by setting up the environment and In this course we will use an unusually large number of different instruments which we will need in order to write code in react n Well don't worry we will get to know most of them come closer and install it together and let's start with parsing from those that you can install it yourself without any problems These are the top three code editors Clint and the browser let's start with the code editor I I will use Visual Studio Code and I will show my settings in a separate video Why Visual Studio Code And Not Webstorm a or something else because he completely free and satisfying to the maximum of all those needs which we will have within the framework developments on react And in particular on react native so visual studio code you will get a completely free editor always available You can download it at On the Visual Studio Code website it is available under all platforms including respectively macos ARM and non-ARM Linux and Windows as a git client which I I won't use it that often But after all, it will be Fork accordingly this is the Clint you will need if you you will work with a mentor for that to send your code to code review in essence Why I use forg it is the most user-friendly enough simple easy to use good beautifully displays the entire tree of ours Kotov A very fast in work native for Mac and for Windows Unfortunately on Linux it is not there If you use Linux then I recommend looking away other git clients for example gitkraken Although its version is for private repository paid But for public repository you can use absolutely free of charge it is also for you will be needed in order to compare you can get the code from my repository download My repository and view e each lecture as a kamid and quickly go through them to understand where A is you get an error Well and of course browser browser we will need exactly Chrome to debug our the app is therefore not similar to Chrome browsers namely Chrome itself to us will be needed Despite the fact that I am now I am demonstrating this presentation in a browser Arc and I will have Chrome installed separately now regarding those things which we need to launch the project first of all you definitely need noj this is J R Time for the end which allows us both once to assemble the whole project and without which react native won't compile for us neither for Android nor for iOS separate There will be a lecture on installing Note JS and methods of this installation Well and also for us you will need two environments in order to in the future, launch and collect our applications and also use emulators of devices for Android and for iOS here already depends on yours operating system if you have Windows or Linux then XC you run unfortunately you won't be able to, so it will be enough for you one Android studio that will allow you run your application and If you have you have an android device to debug in in principle we will talk separately A what can you do if you don't want to install neither xcode nor Android Studio but I want to debug the application on a real one device it is also possible if you macos then you can install as Android Studio and XC in separate we will install the video and configure both of these tools and let's talk about some features associated with the latest versions for example, assemblies on xcode X code allows we just need to collect it in the future publish our app in the App Store and run emulators of any devices iOS is basically all we need will be needed later in the lectures We Let's take a closer look at the node let's install Android stud together and let's install Now let's talk a little about installing JS and what are the options, which are better there are actually two to use radically different approaches to installation nodejs First - it's just with ked which you download from the official website the second is nvm not the difference between them is the following from the point of view from the point of view everything is simple you download it install and get the required version nos to do this you need to go to the nodejs website and download lts Long support version in this in case of current version with latest features 21.4 but all odd versions of the node are not are lts they will not have a long term support so I always recommend use stable lts version in which everything should be work at the moment the recordings are version 20.10 If you are watching this video then maybe it will be accordingly version 22 is stable or then by downloading this version you simply unpacks vetily You can say download it for windows as well for MAC and accordingly for Linux there are versions for macos accordingly Intel processor on the processor here under you need to install your operating system from nvm's point of view it is actually separate version Manager which is available under Windows nvm Windows and there is under Mac Linux which Just nvm it is installed if with using the homebrew utility or manually accordingly with from binary and project nvm which you can find on github all links will be attached in the description But in this case I always usually in my I recommend installing it in the courses from nvm so that you have accordingly the ability to quickly change versions if you already have it, that's not bad. If you if you're a newbie, the easiest way is to download this from with the help of a keja but there are several additional pens with what with nvm there are problems when he can't find the correct version of the node for due to the fact that it is not in the right place place Therefore, in order to get rid of problems if you don't have any special needs for this stood accordingly and you didn't if you use it, it's best to use it anyway package To avoid additional body movements When you have a project not it will compile with an error that it didn't find JS and errors Unfortunately in RE native not always informative enough to quickly do this understand Therefore in this case probably my recommendation is to install it as a package from not JS download it and install it accordingly if you need to update download again and accordingly, you install all of this after you put it in your place the environment will be ready and accordingly it will be possible to execute Note commands and npm is what we need for further work now let's talk about the settings Visual Studio code for you could reproduce my environment or maybe be something useful to learn from my configurations you can actually just install Visual Studio CDE and that's it he will be fine because he is real supports it out of the box and so accordingly and react native therefore here I will tell more about configurations which are more related to visual component and a small simplification working with react native in the beginning Let's let's look at the settings that we have applied I have applied Visual Studio code for this we click here and we press changed he shine all I have quite a few modified ones big font this font will allow you it's easy to see what I'm writing even from small devices as a font for work I I use SH jetbrains Mon N Font NF realized because I have a separate nvim config visual studio code not is my main editor But this main editor for teaching because i want you to use that environment which is simple enough for newbies and not some configurations with their own mons by default we will do accordingly Space instead Tab I have Mono formatting everywhere and save formatting accordingly for insertion and for saving added inl adest Got it, theme enabled the one I have installed is beard them vivid purple you can too install and additional icon theme material icon them in principle of all configs That's probably all that's needed Well and small font for console from extensions that I have installed there are actually a lot of them some of them you it won't be needed so I guess I'll only tell you about some useful ones So the topic If you want the same topic like mine or its variations it's bir of Theme that is installed respectively from the Visual Studio store code and there are a lot of different ones here variations including the one that will be I will use further useful things which we will probably need. This elin to lint our project to highlight those places Well, just like any other to projects point F in order to highlight f we it with a capital We will not use probabilities here no way but also a useful plugin that you can have further material IC - this is how once the theme icon that we have will appear in panels of the list of our files when we let's open the project So if you want so that he would look beautiful and rest with with the right icons then you can do it too add install Well the only plugin at all which relates directly to reactu is react native tools here sets of additional commands that will allow us to quickly launch from here various devices using Expo Well by in essence react native Run we actually for that so as not to be tied to Visual Studio Code as an environment we will not use them we will use the full console But if you develop a lot on Rea native then this will be a useful plugin in principle, everything else is already plugins not related to the course which they won't help you much Well, accordingly from the Visual Studio Code setup we we will move on to the setup with you other parameters that we need will be for work c So let's start installing xcode This step You only need it if you have macos and are you going to launch in the future your app on iOS emulator or collect the final score that you have it will be possible to launch a publication there App Store or launches on your real device and its corresponding debugging Therefore, if you have accordingly Windows Linux Unfortunately, put the CD it won't work, so you can move on straight to Android Studio setup If if you are Mac then first of all the first thing I I recommend - this is to update yours the operating system in this case I am now standing Ma Soma I have encountered with such a problem that maona was not the latest version and after installing IR the code he did not collect the project requires additionally xcode updates so First of all, install the latest version. accessible to your macos even if she's not the last one, it's okay current latest version for your operating system if you don't have it there Samona and some other It's not a problem he will also put together the project but still having the latest available system is important the second thing i will need to do is open App Store accordingly XC How any other application that officially supplied by Apple distributed via App Store search we write X code together and see the first thing here just X code tool for developers you will have a button I have a download button update because apparently she updated from his last and my last installation you will press load and after that it will start download like any other application e X code is quite large, so you have it will take Well, about 30-40 minutes, so Make time for this too X code will be installed next step which you will need to do this actually run it in this In this case, a window like this will appear will say something like create a new one project plan project open existing repository and previous your repository will be empty from here you Additionally, you will need to download image for emulator for this you go to the top menu X code Developer Tools and here there are simulators by clicking I have simulators open now it was then you you will need it install from scratch, or rather download from zero and in this case you can then additionally change those simulators which you will have installed again, the initial download is still for in order to install the emulator too it will take some time as a result you should get a working one like this the iOS emulator on which we actually speaking and we will launch our application now about installing Android Studio and Android emulator that comes with him in order to download it instead astora if we are talking about Mac or just about Windows and about Linux here already any operating system will do go to the Android Developer website You you can just type Android into Google Studio and here we have the opportunity download Studio we press what Yes I accepted all the Term accordingly and in in this case, since I have a Mac, I I choose Intel Chip or Apple chip if It will offer you Windows or Linux. accordingly download the necessary version and this thing weighs Well, it's pretty decent again in terms of size so it will take some time too wait and then I'll move on together with you to install all this and so on I downloaded the dmg image as a result which Nako I just open and then of course you will have to do something extra do the installation via shnik on Windows or, accordingly, other manipulations on Linux copies all this quite well quickly but this is only the initial stage which we will download Android Studio But it will be necessary to download more to it I will open Android accordingly Studio in the middle of everything bends about me that unknown source I'll click open and I have the standard dj will open accordingly and I will not import settings none settings please can you send statistics and Welcome Android setup Studio which we will now walk through So I recommend using the standard installation is more than enough to use is necessary it includes Android emulator sdk bu version itself Google platform API and sources Android, we press next and now we have I'll have to accept everything again from the beginning Android license agreements and Android sdk Arm licenses and after that as we are here and here Nali, click Finish and it happens big big long download all necessary component on which we will have work android again i'm here torn and I'll be back when it's all installed So install Android studio all the component is completed we click Finish and We have the same one opening android stud welcome screen here I would also like to stop a little on virtual devices, click More Action and Virtual Device Manager now by default we have Pixel 3a with three whose API I recommend adding more fresh for this we press the plus sign we choose what we want, for example, a pixel seventh A and accordingly here icon from there API Well I usually put pixel se it will be more than it is enough to press next Next next we need to choose operating system again We can install upside Down Cake same which we have and after he downloads again the required file we press fish and after we create a virtual finish for this I'll pause the device again when we have everything downloaded It weighs 1.4 GB I I will continue the lesson So the installation is complete we press we we press the t mode, we'll call ours somehow virtual device and click Finish Everything we create is virtual. Android device is now in device In the manager we just need to choose this device and press Play accordingly You can also, in principle, stay on 3 pixels here is not a critical issue for me I like to run it on pixel 7 more we press Play it starts accordingly virtual device and I have it now will appear Here Directly Pixel semo is again virtual and we are on it accordingly, we will also do everything virtually it will require some kind of launch time to get going after that how it will happen accordingly turning on the interface will load and we have Android will be available to run everything what only also need additional I recommend install on your device on which you will already be watching the application in reality is not just on the Emulator also Expo Go is an application that allows you to view your current B assembly Connect via QR code in this In this case it is my real Google device Pixel 8 Pro so on it We open Google Play and here we look for Expo quality the broadcasts are not very good because it is application for Ring devices after I click this to install it for me Go is installed it is 0 MB but in In this application we can work with you connect to our device to our computer if we we are on the same local network and debug the application see how it is works on a full-fledged real device as soon as it is ready we we click open and accordingly we have the xg application opens which we will be needed already in further we will begin the discussion with you What is native and how exactly he works in the next lecture we Let's take a closer look under the hood of react N And here at least let's talk about concepts and in general why did it arise what problem decides and what does it have to do with it? Of course react if you are familiar with recto A I hope so you are familiar because it is necessary for in order to take this course you you understand that react is a library written JavaScript which provides work most web applications that you can meet this one of three largest frameworks on par with sar viw or maybe even more popular than them in fact react is about the browser he himself doesn't know anything to react knew how to work with house wood is on the web library react house which is installed in all projects Where react is used and where required support accordingly web browser additional library which allows just the river to come into contact with the house tree react itself doesn't know anything about it where it is performed it is performed in in the browser it is executed for example on server if we are talking about senn in applications or even react can be executed internally on the device when in this case, react native essentially does a similar function that This is accomplished by some bridge between the stems logics that we described in react and native devices But this is simple in fact there is something under the hood several mechanisms that just provide us with exactly the native ones components on different operating systems systems as well as its efficient operation We'll talk about this in the next lecture in this case, naive is not just the interlayer is some a set of solutions that just allows the usual react that we are used to you write works with native devices first of all it is specialized components that are converted into native UI components if in normal react we write div and div appears in our browser then in react native this is not so we can't write div but for example we can write View which will be on different devices transformed completely different but native components and this is big difference from other mobile frameworks that It seems like we write on the web and in reality In fact, inside it is displayed as webview or for example canvas on which these components are drawn react native works just with native components and with the native API it is therefore achieved high performance and quality applications work therefore react native - This is a set of special ready-made component of the transformable mechanics of this additional binding transformations to interact with them there is also an API which gives us the opportunity to reach out to native operating system capabilities systems access to camera gyroscope geolocation to anything as well as we have a browser API that we gives the opportunity in the browser for example Reach the same geolocation as well react native with special additional binding allows us get access to native things that otherwise we would have to implement directly to Swift objective c there or Similar on Android Therefore in this In the case of API, this is one of the possibilities Well and of course react native contains additional engine which processes this GS logic and work this engine with all the others the strapping is a simple picture it is clear that we'll dive a little deeper into that now how it works under the hood but briefly react native - This is a layer between original react frameworks capabilities of your devices in the form of API components and calls accordingly Now let's dive a little deeper in general, in the architecture of how it works react native to understand what what happens under the hood when we draw we press the button on it and what happens Next, why does it work at all? what are the approaches to architecture because what we will consider in the lecture as I will call it the current architecture old architecture as well as new architecture that is still on the current moment is experimental but I I hope that in the near future she will will become the standard for creating applications at Expo and you will be able to freely Let's start working with that with UA and that I gave the last lecture mentioned that the UI that we will have be drawn as a result in our The application is there is this is not the cavas on which we have some components are drawn, this is not in which simply displays the Button full-fledged native UI components are We'll see when we start using them use it like this when we are with you write any component This is an example real component which we by the way with we will write to you We have some function chip accordingly it is a component chip koto accepts Kato pro and in normal rete and return in this case, instead of writing everything on We use P and other HTML elements we will use ready-made UI with you components that represent react native for example View text and so on with a certain set of rules, of course which we will allow us after This component will be converted to native platform it automatically It will change It will be there will be early time no longer jsx but native components For example, if we wrote in jsx View then after we compile it all for the iOS platform it will be iOS UI View component for Android is there will be a native View Group A component if we suddenly compiles exp then it will be div Similarly, if we write text, then this there will be UI Text View for iOS it will be text View for for androids for a regular browser this is will be P Therefore we need jsx exclusively within the framework of our development because at the end jsx will no longer be there When will we have a native app? there will be a native UI But this concerns It is the user interface that is the whole point logic all business logic that we we will describe our components she remains to be executed in JavaScript and then the question arises if we have there is a native UI but all the logic is not ours is transformed into some kind of kotlin or objective C how is this JavaScript logic interacts with compile it like this I will be under the old architecture again understand current architecture We by the way we will make an application on it from a development point of view you won't feel the difference between the current architecture and new architecture which it's still in experimental form at the moment implemented Well, actually speaking understand what is at the current moment will be will be a plus So there is react which is actually like Library We have a J bandle which contains the necessary BC accordingly for work this is our to the library this the logic that we described to the component and this whole bundle is spinning in a separate one re now it runs on JavaScript Core this is the engine that allows you to work JavaScript, that is, within the launch your application on react N rises a separate thread in which it is launched JavaScript Core and inside your dashboard It is performed as if it were regular JS Well in this case JavaScript Core You can even use it on a band with with the help of Ban so basically just JS located in the thread here everything is simple further on the other side we have Native components and native API which works so-called native Thread or UI Thread which is in a separate stream which displays accordingly These native components allow get access to them via native API But we somehow have these components compose That is, we have for example View that has multiple inputs texts and for how it is necessary display on each device additionally answers Yoga layout Engine is the Engine that processes ours is actually what we marked as GSX and builds native components a also reacts to these changes hide button show button respectively some kind of transition between our different stack all this all this answers yog layout Engine which is in Shadow thre so-called But what is most important how they communicate and communicate they are through Bridge - this is essentially some The bridge that receives the request from JS ball accordingly dese zue it and converts this into a native call already native component or transfer information for Yoga layout eng that is basically what is happening with us the user clicks on the icon our native thread applications are here downloads all available dependencies and modules This is the first minus we get such a big load of everything that we respectively we may not use it even within the framework launch this applications after this native Thread this G is starting us, it's starting after we had all the UIs components and ours is already loaded there compiled JS bandle as soon as we want to perform some action, for example, we click on jess thread button this one sends message sending message via Bridge and he accordingly Message serial then de serials and transfers here for in order to draw it already in the UI on corresponding side and at the same time how about on these components are located here Shadow thre yoga layout answers exactly Engine which layout Engine says How to position native thre has and we get draw and overall the idea is not bad but There are a few downsides here if you have there will be a large number of messages which will pass through Bree which requires serialization deserialization then this will be the narrowest place of your application and it will be affect the performance of U accordingly, this is not the most optimal approach and you may encounter that you for example, they pressed some key there and you need to have something the search has happened and it will continue to happen There may be a delay if you have a large one. number of events that are needed through Bridge it is clear that the usual small ones applications It's not a problem if you take like Facebook that works on react native it is productive and fast and this is not like the biggest problem but this is a bottleneck that when loaded applications can give about It is worth remembering that this is the one that works, it works asynchronously and this means that we do not we can effectively use synchronous native components which for which we don't need any asynchronicity needed None accordingly postponing events We just need synchronous call unfortunately this bridge completely asynchronous this too do it is impossible and accordingly as here after all, everything happens through a message J cannot effectively manage how we have a place where they should be exchange messages that is, J does not actually represent how it looks native here and yay Engine does not represent Shadow in any way has no idea about it, actually What's going on in JS is just some a message broker that relays messages from our J to native components And for this in the eighteenth In the year they began to rewrite this architecture and now it exists in some experimental mode updated architecture that looks like this so here are many components from that what we watched remained the same react trad Shadow Thread Yoga layout Engine and UI Thread but changed interaction now instead of Bridge U we have JavaScript Interface this is it jsi and with its help we can directly interact with native modules without any forwarding of messages, that is we can call some separate pieces of our UI using bidins directly on c+ Plus and accordingly without asynchronously And what the most important thing here again is jsi he can be both synchronous and asynchronous is a big advantage compared to Prim which could only be asynchronous due to this is achieved high performance U further there is Rick This is a new rendering system it was r Now we can easily keep copies tree JS and Shadow and easy synchronize by manipulating these actions directly without any additional message forwarding To there is direct manipulation of the tree ours component that is in U well and accordingly there is a Turbo module module work with Nate functionality Bluetooth camera everything else which may not be loaded at the time application start and, if necessary, connect, that is, we needed We connected the camera application the corresponding module on the fly and again this is optimization as productivity and speed downloads applications Well, actually here there is also a new component cgen - this is simple simplification of creating native interfaces for working with turbomolecular development of native components therefore thanks to this new core consisting of gsi and turbo module we got the opportunity to directly synchronously interact with UI With native modules avoiding this bridge But even if you are watching this video for now DT is more precise already in d than year To in in principle this is not a problem as I already spoke big set of huge applications work architecture and has high productivity at the same time A theoretically migration from one architecture to another in the future for apps shouldn't be a problem because it's essentially like under hood the application is implemented accordingly react native from your jsx perspective code of your business horoscope Well, finally, before the start of the project I I would like to dwell on the question of how we we will create a project with you because if you go to react native site After that, click on it and you will see what is there there are two whole approaches to how to start our project exp And what is it and how are they different? in fact these are two different utilities that allow us to quickly create a project and in later on launch each one accordingly with its own approach with some overhead now exp is the default default for recta as well as for example for react native also How now for example Next is recommended as framework over ret so accordingly and Expo together with its router further Expo router is some kind of default solution so by default When you log in On Quick Start you will see that this project with exp What is it the advantage is that it is quite simple sortova project in 5 minutes in react native but unlike the usual ex it requires Additional installation settings and configuration which is less convenient So if you are new to the job with react native then boldly it is more convenient to use for work especially for beginners because you have all the components ready which you can use everywhere and it is extremely convenient, unlike Rea native where the advantage will be just an opportunity to get in, roughly speaking inside our components make custom write them on the already native code and further integrate Although Now Expo also allows you to use and write native components integrate them with Expo ban at the same time - this is a commercial project This is a third party solution with a common infrastructure that allows for make a pipeline of builds on a paid basis your projects store them distribute update Well and so on That is it some additional layer when for commercial work on projects but Moreover, expo is completely free for so that you If you will accordingly, locally develop even if you are there collect there are free tariffs and it Very good covers everything necessary for work development bu plugin configurations debugging and Expo doesn't have this either some disadvantages on the contrary one advantages of this, what is most important you You can always switch from Expo to React native with the help of ect you actually put it there and you have a project re-conversion to work with react native C so there are no problems here you will be limited somehow you will always you can maybe start at expo and that the moment when you will feel something just not right to grab something to get into guts write native component or whatever else you can do without problems to switch from exp grat native without any losses and this is a big advantage Therefore, my recommendation is in default decision to use expo in case if you will suddenly encounter something like that with Expo there is the Balero metro and what we have there is something inside that is not working and it hasn't been decided yet. I'm honestly not sure I have not encountered any problems in my general work so you can go back to react native with just one command on the contrary Unfortunately it is not possible If you already were either originally written on react native then all features are native components that epo a provides also his Expo routing is already available to you there won't be. That's why I still recommend it. use default Expo which will cover all our needs Therefore in further work and in this course we we will use Expo Go entirely and create our project accordingly through Create Expo App and learn at the same time new Aaron So let's finally start creating application we are with you from the previous lecture we determined that we will use exp cli instead of react native cli Because always later You can go from expa to react native plus we will be in this course use fresh exp router which provides us with the opportunity create layout tabs and generally very It's great to work with the transition between page and structure routing is very similar for example to Next How to start our the project is the simplest now I am in Expo documentation is to take advantage of Quick Start and we can do it with npx create our App Well we'll go a little another way because we want anyway a project that will initially work on typescript because it's a big project without typing it will be difficult and we will be together we will study with you how to type those parts react native which we will use that's why we immediately we move along menu A and here we can find typescript using typescript here we are essentially the same We will use the team. The only thing what we are passing is the exp template template Blank typescript is empty template accordingly Tap script where we will have one page with one component actually if you create a new application with routing then an even simpler solution would be using a template that exp router provides here in this in this case we have an installation where we can build an application with a specific playlist for example with tabs or something else But we we will study routing a little further with you Because before How to work with routing needs to work at least with the simplest components of react native Therefore, in the future we will be using routers add by hand and at the same time we'll see how this is done therefore returning to type script I just copy the quick creating a project on type script next I need a terminal terminal I will be raise the screen down a little bit to you always had visibility of the commands and not the player's runner got in the way and I'm in to daddy iOS here I want to do something important comment my folder has the following path User solary Code Doc iOS I work on Mac needs your path to that folder which you will work did not contain spaces are a bug now is present in the X code during assembly and this will cause a lot of problems and questions This is the first time I've encountered this bug spent somewhere probably a couple of hours on then to read the github documentation and I have no idea what happened at all there were gaps this bug hasn't been solved yet Maybe if you watch this in the future there is no such Bug anymore, but still I am I recommend using it by default folders without spaces For example, I have in folder which was named one space more precisely three def space hyphen space code it didn't work so i will use iOS folder and here we are we use our cre exp I already have it installed if you don't have it installed then it will ask you whether to install Create Expo App we indicate the name accordingly let's call our application his native App we will call Enter and now it download the project template accordingly and will immediately do npm install installing all dependencies Thus we have will a fully finished project which we we will consider it in more detail in in the next video after installation everything that what we need to do is go to the folder and open this folder in vi studio Code So everything is installed, I go to the necessary folder in the native App I have it by default I have already created a Get repository I am in the First Office in May and now it can be opened by visual studio CDE for those who do not have Visual stud Code there is a quick command to open I I recommend opening via Shift Ctrl P or Shift comm P respectively exec The command is called more precisely Install code com PA click Enter and now he told me that I have the code command is installed and now it's simple in the terminal I can open any folder by entering the code Space Point Point current the folder Everything is now open for me Visual Studio Code with a full project and Yes I trust this project atom now let's see what we have this the project is very minimalistic here no routing If you create immediately the template with routing will be much larger there folders and everything else but I want start small so that you and I gradually figured out react native So what? there is further vs code some default the folder that was created before is ready assets that are responsible for the spsh screen iconic zav iconic When will our application be published? NOD modules and then we have App json this is an additional description from the point of view view exp Where can we get our SS screen Where to get our icons What is the default orientation What version of our applications accordingly supported T Well and so on. In short, a huge number. settings for e providing us correct assembly of applications at once next this is our main root the starter app which for now contains some default things and about them we'll talk a little further and well accordingly for in order to collect Let's see bridge 49 Bar is additionally installed this is one of epo packages adding status Bar react version 18.2 and react native version 072 If you watch the video a little later, then Your versions may differ nothing there is nothing scary about this at all, well and good dep dependencies B for assembly is set to strict True And this it is always right that we work with you in Rhythm mode Oh, let's move on to let's see what we have written here and Let's try to run this next the application is essentially a standard rect component of our application which returns GSX but as a component jsx is not our main function, but rather our basic one elements VI stus Bar and here are more some of them We will also talk a little further in this regard our project is ready Now we can try it run on different devices by by default we should see accordingly, here is this text and extra status bar all that all two things we need to see with certain styles on our application Let's try it now run both on iOS emulator and on Android emulator and on the real one device So what do we need? to launch the application Well, let's go let's open first the X code that we installed earlier and from and code to us of course you will need an emulator so I immediately go to XC de Tools simulators on the left menu even as we did it and here I have an iOS device appears that it also loads I'll open Android right away studio in which we will also need one emulator this time accordingly Action tulle Man and from here we launch our pixel 7 excellent iOS has loaded for us Let's go him here too drag and drop now we have it running too additional pixel we will have them right away display on screen for both to see comparison of the same native components is it will be an order of magnitude more effective here Piel loaded accordingly everything works, click, browser opens Here we have everything fine too browser opens both devices work super now we need to launch it already our app for this Let me do this I'll close this I'll close this this will be we go to the terminal and do the following npm to be more precise let's see the scripts are called npm Start just npm Start npm Start after after we made npm it starts our Metro bundler and now E let's see what did he give out first of all he gave out a QR code if we have an application or more precisely you have one there must be an app that we installed on your phone then you just scan it and you get this app view on your smartphone on a real device accordingly I will try now scan this and it will open for me link and OK, sorry about that it is not visible, that is why we are with you now let's do it on emulators So that to do this on emulators there is quick commands A - this is to open on Android I respectively on iOS simulators And if this application already assembled ready for Web here allows you to collect You can press W to open under We are in in this course assembly for the Web we won't consider it in detail because Well actually when we write the app is most likely what you have it turns out on the web Well, it's not very suitable with points of view Well at least it's personal my opinion So let's start with iOS I I press I and I have iOS running on the Mom emulator loading at this time in the console we can see corresponding Progress and I have in as a result, as soon as it will be completely sln will open everything is super In this case, our application launched and the text that we made is it displayed Let's do the same now we will do it for Android accordingly Let's press this time to open and it is not worth here yet xg Because it's not I have never run it on this emulator and after he will be fully downloaded to our We have the device accordingly it will run the same on Android emulator Let's see everything is ready sets And 100% It started up perfectly and here too Now it works like this X Go Up is installed, this is also an application which were on the actual device and in this X Go it connects with ours Bundler which directly does all this did everything, collected and broadcasts in the resulting bundle here we can see all our application is here it is we can always reopen if we we open it again it shows recently Act previous applications that are here were opened in this case if for example, I'll kill it the same way on iOS Let's go with the mouse, it's not very good comfortable oops if i kill him again i will open exp go then here it will also seem to me that native Up and when pressed it is again accordingly it will be collected if it is not collected or just open ready-made ones knocked down applications All of us are now in both emulators launched our application here in such a lieu we are with you and we will continue to work comparing both it is displayed on different devices So let's look at those components that are provided to us react native and what does E mean anyway working with default components if we are developing for Of course we have web here standard elements such as div such like P and here if we try to write for example div then we will immediately see in console a bunch of errors accordingly VI config gets a div that is not the necessary components and accordingly we get an error here and accordingly if we open the same The most we get on Android we can work with any application use only those components which provide us natively what is this accordingly components for this we can go to components and see component sets which are actually available to us the list here as you can see is not very good big but these components are more than enough for Reva to be static an application of any complexity is clear that here will be additionally there for example in some cases will require work with camera work with video and other stuff is also will be implemented And there is for this a separate component that we provide already in this case epo and no one bothers us install and other ready-made components for react native that developed by the community but now we concentrating precisely on the basics components let's see how they differ and what are the most common ones for will use it oddly enough View What is View essentially it is some a container in which we can place other components exactly thanks to View and styling we are with you We will be posting ours in the future elements so that they look A well that is instead of use div for grouping elements We will use everywhere View View can be nested within View and accordingly inside can another vue will be located and so on at the same time, it's a shame that we are with we can combine these vu and we will have a View for styling them the main design element of all our interfaces the second frequent element which you will also have to work with Of course - this is text, essentially text allows us to place text a For example if I try to write here hi vo viw and save that again i I will get an error on the devices that will be say that here accordingly flowed string should be rendered inside text just place the text as if we were as they did on the web We can't either we need to explicitly state what will happen here the text element is located in this way by inserting the text VI we get the location new text appearance Hello Well here we can do something too change My first application it is important that all components which we add they should be explicit imported that is we can't how how to use just div on the web we can't import it from anywhere also use View we explicitly we specify a specific library in this in this case it is react native itself where we are from we get the component View and component text besides them there is a huge number of other components Well, for example Switch which allows us switch from True fse model windows image which we will also be with you use sheet to display list virtual sheets for display large lists Activity indicator which we will use for example to show that we have something loading Well, let's take this as an example let's add some I don't know Text Input and Button to add any component we accordingly as and we import it in any react application tek Input and within this text input he's actually Self closed on us component we can describe nothing we just indicate what we will have here additionally KST Input Let's go in it probably only has some meaning original Text Input value Hello, We have saved everything accordingly. Well, it seems like everything should be fine. let's move on, here we have some text Input it doesn't have any now style So when we press we can we can even see the cursor by it move but it is not highlighted in any way because it's just not stylized input located at our place inside but again it's already full-fledged input with which we can interact And the most important thing is that it is native component to clearly show the differences let me add more here and But from which it works a little differently than koto came inside our usual htm we owe him clearly add title I button I button saved and now we can see that we have a button and here we see the first difference between us in fact, the components that we we add you because they native they look completely it looks different, for example, like this the native android button will look like this look like a native button on iOS And this no problem because we can actually in fact, stylize A those components that we will be provided with We will even be make your own costume button with animation so now it's easy some set of components that is the default and is broadcast in default components are always important remember because we get native components with which we interact This is precisely what determines their differences here we have will be here we will have accordingly another And this is the difference we must further leveling if we want to make apps look the same If we want to adhere to the specifics systems are great We have it by default there is a mechanism that makes it possible we get native components from them native view button I understand now nothing does because we actually division of functionality But first of all we we looked at what sets we have ready-made components and we are the majority of we will get to know you so that in further see how from them combine full-fledged applications but the question remains how do we style it? these applications and place our elements within our View And for this we we will move on to styling with you later our default elements Now let's talk about the stylization that will help us make our components as we want from the point of view visual and it is important to remember that in the rivers there is no Unlike the Web, we don't have CSS. That is, There is no way for us A style our components with classic CSS but that's not a problem because react na has special objects we will call them Style object which describe the appearance of our components very well similar to CSS but this similarity should not be to confuse you somehow Despite the fact that you you will see a lot of similar properties on CSS Unfortunately this is not CSS and accordingly all innovations I most of the properties you are used to It won't be supported in CSS For example, you will not have support Grid but there is a replacement in the form of support flexa is very similar we are used to talking about us separately further essentially inspired by CS but is only a part of it and of course some properties are called differently or broken into several properties at the same time everything that we will be with you to do will be described by objects with key value where key is name our property as we will pour a values available values and again all those that we have with you mean accustomed will be available Well from the theory Let's move on to practice Let's Our text which we have here we stylize well the first way we can write an object Eli Well, how do we do this? Let's take Style we indicate the tag, that is, everything that is here is specified in the Style tag and is our Style about that is inside I pass another set of brackets because i want I want to describe the object and here for example color our text blue for I start dialing Call and I have illuminated accordingly and Color the backlight of all appears immediately available properties for example there is Shadow Color Border Color Text Shadow Color properties that are also present as we see some of them are similar to CSS that is, the Color properties are also in CSS, but for example, a Border Right Color in CSS as There is no such thing, we usually do accordingly we describe there Border further there one Pixel Solid and so on here it is broken down into several properties but we'll come back to our color We want to paint the color in blue that's why we say color colon and here we must pass the value Let's put it in brackets here, we can indicate for example the lattice [music] pale blue but accordingly we can specify and standard named colors same as in CSS for example Color Blue we get our blue accordingly text My first application and My first application So we are here We can easily pass everything directly to Eli necessary styles but it's clear it's awkward because we're starting mix stylization with GSX components themselves, so good this is obt outside and here we accordingly let's we will make an intermediate solution in which let's say we announce something text just constant and here drag the object We can do it to do it anyway [ __ ] is more accurate of course we can also hand over the delivery it will be the same as before, that is, in essence we can describe our li separately do moreover, we can for example, just like we have here below I now I'm just bringing you to this which one below let's do will have col value so that we have one style accordingly Our style then again if I move on to with the emulator everything will work the same there won't be any problems The only thing that is inconvenient is that approach that if I want here for example put I don't know any Sai I won't see anything tips Exactly for A special sty sheet is provided for this which has a Create method which provides us with syntax highlighting that's really the only thing he has we can do everything without any problems the same as described inside sty She Create describe and simple object AND it won't be a mistake but stylesheet Create adds a handy backlight for us our methods And this means that if I I want this Style accordingly I'm creating another one in our te tle property and I pass col Blue there so if I now delete Our style and I will put the yl that was here everything will work the same way our color turned blue at the same time Now let's do I don't know Let's put it here Well, let's put more let's put 24 we will have a big text here we have a big text My first application Here you can see immediately the difference in the values that we will use from classic CSS if Color Blue is completely the same as usual fn size we write there 24 pixels here it's just a meaning by the way if you used some from the stylization libraries that exist and for then there will be a very similar approach Well and For example, if we we want to, but we can't accordingly make Border Because it's easy here There is no such property. By the way, I can write Border about pixel Solid too BL save it but then I'm in the emulator I will receive [music] if I go back to the code then in order to add Border I will need to do First specify Border accordingly width o again not a pixel further I need specify Bor col and here you see we when we try to immediately provide us with a bunch all sorts of things are possible, that is, we can stylize separately I know some let's do the same And now I have the necessary one appeared Border is the same with us with indents we have margin but again if we want ask it in different directions then we have separate margin properties Button and horizontal vertical Right Start and veral that is the possibility of not so comfortable shorts which we are accustomed to doing within the framework normal C type for example 1 pixel bore space word space this we are forced this individual properties but most you will have what you are used to be present So the most optimal the option is to describe special ones with the help of sty Create which adds us typing inside we describe the element and accordingly properties to it and further using Style we apply the Nemov class as usual of course we don't have it here everything is applied using the Style tag either Eli or directly through sty Create Now let's start to understand Flex which we have in react na in order to arrange the elements and to make whole layouts essentially Lex - this is our only option full location elements of creating some layouts with from the point of view of their layout it is clear that We have both standard height and width what we are used to CSS Well accordingly Lex is the main tool for the layout of the leau if we talk about classic CSS is there of course there are also grids here gridon m status bar Let's remove the text Input let's leave it Let's leave the text button basically everything and we take this one text That is, if you ultimately look at U we will now have e text my first app and button How do we do it now? let's say place the button to the right of of our text and right here flexy m comes into work I will remove stylization of our top view containers if we keep them with us now all this will fly up here we have in fact, the possibility to avoid here such guidance using Safe Area which we will talk about further now we see that we have a little bit on iOS everything is going so let's leave it container but we'll make it some Mar marg top indent 30px more precisely 30 will even be necessary more Let's decide 70 then fully with the help of SA are at least for now let's see how we can work with flexes inside I will create another one in which will be the one to compose text and button If I just lay it out now you will see what is my default They stood next to each other for a friend respectively text and button stretched across the entire width If you are already up to this got acquainted with flexes then here you are you will immediately understand that by default already applied Fleck to our vu and our element Shoot under each other across the entire width just like with classic flex we here we can set additional parameters A how we want it to be positioned vertically when horizontal and also the location element to regulate this we will add to our new VI ST and call it Let's go with her top so that we have a top we we add the properties of our object here styles and we can already write code according to by default everyone who is here we add he already received in fact, if we wrote in CSS then in CSS we would have to explicitly set top element display Flex what it behaves like Flex in the south of us default on-board as Flex And despite that that there are additional properties here display which is either Flex or N by default it's F Flex Well it's clear that property n we just hide our we won't have anything in the container, but Lex and is some value by default That is, we have all the elements flex dampers now with the help of since we understand that now this is a flex container we can set its direction when we are with you working with flex We are in the next lecture let's talk a little more in detail about axes To remind How Lex works or study If you haven't done this with him before encountered here we are Let's talk at least about direction So what is it direction is the direction of location eh inside the container by default it is does col matter it has three values by columns according to R one after another and here this is Flex Direction col by default then there is in essence play Flex and Flex Direction col these properties applied Your VI has by default, that is, we he behaves as container and has vetika That's why we see the button on the whole width and we see respectively the location of each other friend but this situation we can fix accordingly FX Dire has a few more meanings When we have everything arranged by column but in reverse order as we did we see now my first application moved down essentially Dat us the main flex axis where the elements will move accordingly if col then from top to bottom if rever then from bottom to top and similarly we can set R and accordingly rever Which will give us a location like this horizontally one after another My first app and the button behind it Thanks to Flex Dire we know the main axis and the main axis says Where the elements are arranged How they go with each other for a friend and accordingly R If I am correct I will write to you and give us the opposite location accordingly Let's let's leave the button to be located on the right after we have determined the main axis is ours. Then we can set about how elements behave within the framework this column and just the next lecture With perez is present on flex from the point in terms of location A and let's try make the display more beautiful text and buttons Now let's talk about parameters align justify and how they are related to the main and auxiliary the axis which I mentioned in the previous one we'll have to do lectures for this a little bit of additional layout and which we will not be treated as a main application, but on the other hand, we can use its example we can understand all the mechanics of the work well flexes at native If you are familiar with with regular flexes in CSS then all these themes for you they will be more or less familiar but there will always be layout practice useful So let's remember about the main axis I auxiliary main axis is the axis our default flex directions We remember that Flex Direction in the direction of whom that is, by columns a this means that the main axis is directed from top to bottom with the auxiliary axis we will have it directed from left to right the auxiliary axis allows us to then arrange the elements according to horizontal even if the direction vertical When will we change? For example, we set our axis to Flex Direction Room then we have the main axis rotates 90°, that is, it will be look in the same place where you are now auxiliary and auxiliary will be look just the opposite side up thus auxiliary the axis will be vertical main horizontal This is understanding auxiliary main axis axis will be help you in how Al is perceived justify at different Flex Dire Well, let's do it again now. then let's talk about the concept of a container and actually Flex it as such Understandable containers and items in flexes these are conventional names but container means that element for which Display Flex is applied since we have for all View which we have we are located within the framework Flex is applied by default as we do we speak with Flex Direction col then in fact, any View will be Flex container a Each element The one inside will be Fleck item that is for this View accordingly we have View This is it will be a Fleck container and the text and the Button will be Flek ait moms in turn For the top container Here this will be container A for us this View will be Flex it and all the properties that we will now we will apply exactly container which should describe as we are located separately items and to make it more clearly I will change my our a little We will make the layout of View which will have nested some more vue And there will be three of them and we will paint these vues in I won't even bother with different colors for this additionally describe the styles in our state because it is a temporary part of me I'll set it accordingly Back we will have Let's [music] let's do it width 100 height 100 This is how we set it just the height of our VI because there is no content there will be some internally located part absolutely We will do the same here, we will put it here color Purple And here Let's put color Green and that's the default for us some containers appear Let's Let's see what they look like Here accordingly our tomato color is Purple and then Green Why did they settle down so let me remind you that viw is already our default Lex container And this means that everything the elements located below it too is amami and applied to them by default Flex Dire that is here we see how the columns are arranged one after the other our our T settled down Now let's have it with us there was a little more understanding and what this Fleck container has borders we give it to him let's also add background Color and let's go let's make it some kind of lgm Well, for example some Well let's orang Yellow Yellow Yell color so if we let's see, our container takes up everything space allocated from the beginning to the end of this elements due to the fact that there is no limited width they have us have a width of 100x100 if for example here here I will remove this width then we see that it will of course take up all the available space element that is, by default it is is located for the whole space if we of course Let's limit ourselves to it was more convenient to read Because that I will not make a separate style we we will set Flex Direction already more or less figured it out That is, if for example, I'll switch, well, let's do it again Let's go over Row Flex Direction Row I don't care that it will be located horizontally instead of all our blocks followed one another verticals They are sent along horizontally and accordingly by default they are vertical now let's look at the location of our content by axes if we are talking about we have the vertical arrangement several properties are Items location our elements that we can try to make L Items center in in this case it works auxiliary axis if jy will be work on the main axis then Al by auxiliary that is Al it prices in this the case says that all our elements which are located inside should be the center it is clear that I will remove the width here None of us will be displayed the first block because it has the default will be zero and since it is in the center it happens that way everything will be bad for us, he will simply not be there what other meanings does aline stretch and this is what is applied default default They stretch that is located from edge to edge of them stretches from the beginning of our container until the end That's why when I clean I see the width completely filled tomato block he took up all available space place also when we in the last video with you made the button placed under My the first application also took up the whole width because it is the default value minor axis position atim STR further there is Bay if we speak text relative position and Flex Start respectively Flex end When we are located either at the beginning of our container or from the end in this case again So since it has no width it will disappear Let's bring the width back 100 of our pixels we get display and accordingly Lex Start similarly places it by by default, despite the fact that it looks the same as now speech is the cardinal difference again if I remove width then instead of be located in full accessibility space o simply won't be because that he will nail it to the left edge as much as possible and its width is actually zero if I go there Of course I'll put some text in letters let's do this by the way text and Let's put a unit here. Let me remind you that we we can't just put one without text So we remove the extra text then we here we get the mapping unit a at the account which is the default if I delete we will have a unit and he will occupy it all available content is align Items Next we have the following parameter - this is justify content so that it show we need to ask additional questions parameters to our View let's do it height of 500 thus our container will become more than available if we do not we specify the width, which is our default The fleck container wraps all our elements A means its width will be equal 300 How come each of them has 100 and here then we can apply it with you justify Content with the following values J Content prices as stated name center et our content inside our Fleck container as well as item tells us how to arrange ours items on the auxiliary axis as well as jf Kitten says And how to arrange it there all our content on the main axis accordingly content center center Flex end Ista is the same as in the first case places them at the end or at the beginning then there are three additional properties Around between evenly Let's get started first between between arranges them so that the outer elements are nailed and accordingly to the bottom of our container And all the elements that are between them are located at equal distances from each other friend so Here is only one element Here this is the distance from one to ours container will be equal to the distance from here this part to the Lower container well and accordingly Space Around makes Almost the same thing except that he provides a uniform distance between our elements and boundaries in this in this case here is one unit here between them there will be one unit plus another one unit because of the distance there should be something around this container be identical Therefore if with the edge there will be one unit But in this case for example, some amount there Well, let's say 50 there are pixels or 30 pixels then this the distance will be 60 because Around each element must be uniform distance well and accordingly Space evenly is just uniform distribution where always distance between elements between edges will be identical So we are with you now looked at And how can we arrange elements volex containers what is auxiliary axis What is it additional axis I as J and allows we need to arrange the content Now let's see what changes inside if we change the direction of our flex and also how we can regulate individual elements before this we are all time we worked exactly in the shadow that we used it parameters in order to arrange them accordingly auxiliary and justify Content to place it along the main axis what about what will happen to us if I change Flex Direction which is the default column on Row that is on the line if we let's move on then we will see a similar picture but now located exactly on horizontally, the whole situation is ours we have left with distribution respectively Space evenly which we asked before and the location remained Flex Star from the other axis' perspective so once we replaced our Flex Direction to Row is essentially simple for us the axis has turned, now it is the main axis looks there and the auxiliary one there and this means that if we are for example here we do Flex and then we have them are located at the end of our flex if we will change this here and Space for example between between then they will be be located between each other and this the behavior is quite predictable because Flex Dire is now changing for us only the axis the position of this axis is all the rest remains the same for us it was therefore important to understand that our for example there justify content - it's not vertical arrangement is location along the main axis where it is looks depending how do we redefine it now behavior of a single element for example We want this purple one We had a square at the top and that's it possible with the help of the appropriate properties for this we go to AND we say that us and now we can set its behavior for example it will be located only AMM Despite the fact that we have completely the container described is what each of these elements should be placed at the end of our flex along the auxiliary axis we we get the opportunity to adjust each of these elements, that is, this For example, Flex Start is located there we can do the third one at all, let's do it align Self center so that it is with us was located in the center and that's how we redefine each of these elements overriding is useful when we want arrange inside some well define one an element that should stand out from the general Fleck container is important understand that here we can work with just with the help of a position by additional axis So after that we looked at how it works with from the point of view of the axis rotation and overrides of a specific element it's time to talk about what's on in fact ours This is the grid that we Now she was looking at Neo one and the same there is when we have these elements one after another while we arranged three theoretically So maybe it will happen that we won't be able to fit in some element and then we get to help transfer our grids so that to simulate some of our content does not fit me I'll stick with FX for now Let them go one after another for simplicity so that we can just see elements arranged one after another and for each of them I will ask width 500 Well, let's 300 pixels 300 Here too 300 Here too 300 As a result, we see that we have It turned out to be such an incomprehensible thing. there is the first element 300 Well let's go It's more visible, I'll probably put it anyway 200 now we'll check how much it will be get in here 200 200 and here we have more Some little thing appeared like we see here a display of a little bit It's different because it's completely different here different width of the device is two after all, different devices, so when we set absolute width absolute the parameters of a block need to be understood that they will look different on devices and therefore as if flexes more flexible and for example there which we will talk about further they will help us a lot with this, so now for example, here you can see a piece green And here there is none so these the elements didn't fit and accordingly if we were in the browser we would have scroll appeared but we accordingly you are not in the browser we are on mobile therefore we don't have any horizontal here the scroll simply did not fit the element view to the right we can also regulate And for this purpose our container which contains and to us need to pass on word property that has three default values they are not carried over this is the default value accordingly, it is transferred and when they are transferred but in the opposite direction Let's put it and see what's going on didn't fit, moved to the next line dots iPhone view Here you see a little bit different behavior here immediately two the elements didn't fit because this one plus this one is apparently bigger than in in principle the width of our displayed afo that's why two were transferred at once, that is when we say we say that everything elements that do not fit in the width must be transferred next string Similarly, we have a property passes by which says that everything should be be the same only in reverse in the direction of our green which we have goes at the end now moved not down but up Well, accordingly, all of ours the container is now also located at the bottom that is, the reverse transfer Well, you will more often nodding arises race and this is now besides the fact that we we set how we should behave and in this case in this case we can still ask how we are located all over content owner and the central location is not only one axis but also on an additional axis thus setting the appropriate position when transferred in this way align Content does not mix up align Items and Flex RP gives us the ability to be flexible manipulate our dispositions elements but here the question arises A Well, in short, everything is bad here for me this device two here on this device one how can I adjust correctly there are several here accordingly options Well, first, set the width not in absolute value of A in percent and this is something that you and I haven't done yet when we we say that here the width will be 50% our acceptable value and that too 50 and this is 50 then we will have completely identical leau no matter how much we have our device is exactly 50% wide our viewer will occupy exactly the width accordingly the second 50% the second is already 100% the next element no longer fits we transfer therefore in this way we can achieve unity in yuhi on various devices And this is extremely important because that we can have absolutely anything Android device having a completely different widths of our screen So having figured out how we we can transfer to the second line and positioning we move forward with you Now we will move on to the concepts of fxp Flex Ring and Flex Grow to make them demonstrate I will remove the extra width in general these concepts are often confused so I'll dwell on them for a bit more details I will delete Flex wap I will delete Al Content and I'll add text everywhere so we can see at least the minimum width of our content I will remind you that if we do not set width then the width of our block will be be determined by the content that is located inside That's why when I save I I'll see these 1 2 3 1 2 3 arranged in such thin stripes because here everything is determined by width content and accordingly indents if any are present so let's start with that A how For example, I want to ask my screen evenly distributed between the three here with these elements as we remember previous lecture you can do this with using the property we can set it to 33% Well, the problem is that 30 100% is not very good. is divisible by 3T into a whole, or more precisely, not at all is divisible by three as a whole so should ask something 33 and 3 in order to at least somehow get a similar width but there is a solution that allows you to do with with the help of the appropriate Flex Grow But before we get to it, let's talk about FX Basis Flex Basis is a certain The basic width of our container which we ask in this case Fleck base 100 means we shouldn't ideally fall below 100 in width and Similarly, we can set for all other containers for plastic and for g. No that's not all, besides how we have it the base width should be distributed to us after we for example for each of them were asked Basis Let's remove unnecessary commas remained some simple Here it is space is not filled and how it is free unfilled space will be distributed among our elements is determined by the Flex Grow property That is, how this element will grow FX GR 1 means that this element will take up the rest space If two elements have this will mean that now two elements must be equally divided along one he gets one share he gets one share divide the space Well, what if there are three elements will suddenly have the corresponding parameters mean everything three elements must divide the remainder space between each other thanks to this we can say that we have some base width that we don't we fall and the rest is uniform between them Even if I remove Lex now Basis Everything will work for me exactly the same because it's simple there will be more remaining space for each of the elements But if I I'll make the text bigger somewhere so we can see it that the green block became bigger for some reason Why Because by default it the width will also be larger if here there will be a thin strip a thin strip then all available content will be here means with a letter therefore all the remaining space of the BC will be equally distributed therefore When you see that you have set kg there for each element of the unit it Share still not equally This means that by default some of the elements has a large width so it will help here Lex Basis which will align Basis here this element accuracy Similarly there is works and which also accepts the unity of Dawa nothing will happen So what does it say Flex Ring Flex Ring says what how just as we begin to fall lower than available space which defined by the basics here is Fleck our basis will be this whole space should be distributed again with the help of share frx shrink if frx Grow we we distribute the space that is not filled then Flex shrink we distribute space that is, on the contrary, overcrowded fing is not used very often in leau but it means that it exists, it is important so in this way you can easily Organize your space with Flex Grow at the right proportion if of course you only have two elements It might be easier to do this with a certain width especially if you have non-deterministic content width which is located inside for example there My first app and My button to we can distribute it evenly use as a property I distribute them a certain proportion and just the width specified in percent Well, of course, where would we be without spacing between our Fleck elements containers this is done with There are several properties that can help with this. which determines whether this is if the indentation and there and there and the horizon we want identical to rocks and col G if we want let's make G 10 and by columns Let's see how this will affect ours you see in the layout between our containers there appeared a dot between the elements of Lex elements We now have an indent of 10 this way you can easily distribute elements evenly adding space between them moreover if we ask them now for example width of 50% so that we can move to next Let's remove this line Let's remove this here this And after that we will add another FX wap the transfer that we have already studied FX On wap and save Let's only then let's do it We have 500 50% here Unfortunately you see the addition they are transferred therefore Let's at least Okay, let's set it to 40 for the visuals. at the same time, let's look at some interesting things features so that's when we are with you we do a transfer then our p starts work both vertically and horizontals And if I use Row GAP then it will be exactly horizontals if i use col GAP then this will be an indent accordingly in this case vertically Well, we understand vertical and horizontal. of course the main and non-main axis At the same time, as you may have noticed, there is interesting feature if I put 50% of the width and accordingly p the total is 10 then my elements start does not fit why is this happening because the width of our element will be to be 50% and another 5% another 5 pixels for what we got this P and the next one element therefore moved So if we want arrange them in such a way that we have there was an even distribution between them This is not asked width, so we use it for indents G R G or col depending on what you want your element did Well, then the question arises if there is such a simple solution with a width of 50% it doesn't work for them either we don't need p and what to do then or how to deal with it as we do calculate the width correctly so that our the elements were still there in the end distributed one after the other in half having a certain P And here will help us additional capabilities of the reaction in the form receiving daina of our devices for that to contact Dan we are with you let's make some constants the width that will be it is from This is not this is some Object which has sets of methods adds to could track the change in size devices for example when turning receiving and installing in this case we we want get the question what do we want next get here we have some opportunities either Window or ours SNT we can merge on mobile devices fonts for convenient we can read these parameters general skeleton and also height in our case I'll be interested in the width of this one width if we see it in the console Well let's talk about bucking later, in short, here this width we store the width of our window and since we have these properties are the calculation we can choose not Just 50% we can calculate it correctly we can say that our width should be the width of our window divided by 2 and in this case we need to subtract correctly between them half a gap Well, more precisely Yes half a gap min 5 thus arranged in this way we will get the ideal tire position our elements regardless of the screen and this is realized just by receiving device sizes using react API native so it will be very good for us useful and at the same time we won't need it worry about the fact that 50% is no longer actually not 50% and this is one of those optimal solutions in order to calculate correctly And how exactly speaking of what width we have How correctly arrange the elements here -5 appear due to the fact that it is possible split between two elements neighboring at the same time this diens allows we get not only the width but also accordingly the height of our device If suddenly we need to do something equal and exactly the height of our screen more precisely, our window, then it will be accordingly Wi except for the Window itself we still have the size of our width of our screen in this case it will be identical because our screen is ours the app is open full screen but we separately we can get both Window and screen is best to rely on Window as the correct width of our windows Now we will finally start to lay out our first interface which stands for login form and let's talk about how first work figma in order to effectively transfer our design to full-fledged react native proe po default When you enter figma you Most likely you will get into de mode now Figma has a default mode that design mode Where can we move elements and de mode this layout will be for you available in def mode because it not created by you but available for reading and in de mode you can export graphics view distance measure all properties but by The movie supports multiple defaults languages and among which there is no stylization react native and that means you can inspect in CSS iOS accordingly SF UI UI Kit and Android compose and xml what neither is it nor is it suitable by default Of course you can leave CSS because basically what we are going to do it will be very similar to a full-fledged one CSS where we can already with you use some features of react native just for example hovering over this element We see that there is a Bord radius and it translates into borr quite easily no defi radius 10 is the grain which is actually speaking instead we will use a ready-made constant that we will create before Well and other things That is basically everything the same thing that you inspect developments you can also inspect for native projects too just translating it in my head from those styles that are available to us in CSS in those styles we need in the second alternative solution gin react native styling actually there are many plugins for react native even automates some translate your layout into some react native components but like any the code is not always optimal let's we will open this plugin now the plugin will also be available in Def mode so how do we when we go into plugins we will see ST appearing on the right accordingly we only need to press Run now this Lin inspector will be available and when we hover over the element then we can already get a full-fledged react native code Border radius background Color height width That is all the parameters we need n Family Font size and other things thanks You can't rely on that inspection from the point from the point of view of the work of ordinary CSS and running this plugin in de mode we get look at all these styles and just copy into our project that much it's more convenient to translate, so here it is already in your hands discretion How to use accordingly, checking the styling with from the point of view of Figma's work I'll go into detail I won't stop because in principle everything is clear here by clicking on element we can look at its spectrum then hovering over the adjacent element we we see the distance between them if i want bring the distance between elements and block boundaries in which it lies then I hold down Alt and he tells me shows everything accordingly layers are arranged on the left in a certain way the sequence here is not layouts are divided specifically into components because they are simplified for our layout but in In general, you can also see separate groups of button fields that have we are present with this model we are with We will work with you if you need us to export graphics then again we we press graphics we press ICT and here we get the ability to see it right away Our svg if we want it in the original format or export as png JPEG or SG about working with image and about work with SG we will continue to talk So, having figured out what we will do it would be a good idea to inspect here Attached is a link to this layout which we will continue to work on we can move on to our first an exercise in which we will simply do general layouts with the help of those flexboxes that we studied before let's finally do our first an exercise in which we will create layout We certainly don't stylize our entire screen is a login because what else do we need for this? create individual components then more add various animations that we are talking about let's talk but now our primary the task is to collect the leau what is included in this concept We have The central block that should be center in the center further We have in this block logo at the top with a 50 px indent down recover password 50px up and in the center respectively first input second input and button with with 16 pixel indents BC is supplemented by an indent of 55 le on the edges here this is how we should lay out our Leu Even though we don't know how now we can simply add an image write here sch just write here recover password because we Accordingly, according to link Again we have no clue but for all other functionality we we can easily lay out some components to center them correctly arrange them correctly in terms of flex therefore the key task is this exercise this is to consolidate the knowledge about flexes which we went through in previous pause the video during lectures Try to assemble you yourself without I don't have any additional styles there I know, without anything, just we shouldn't have any extra content we will assemble it completely from scratch and here we are there is a container that wraps around all our content and actually for This is the container we need to specify necessary centering for this Content cent and Let's put it here some text for now to watch behind it is the text on which we will write later let's replace this type with e exported from figs So here we have it there is J prices Items prices and accordingly we have it center height Well accordingly, one that occupies all content And it would be good for us to have the height was all that was needed maybe we can add something to it for this Flex 1 Lex 1 allows you to fill everything available space in direction our flex That is, we have one an element that fills all available space and that's when our inscription Purple school center is super with this Now we've sorted out everything inside ours We don't actually have any containers we have the text first VI in which there will be a logo, then a form, and then recover password so i do more one VI I call him ST I'll add the kitten here. Let's go. con The awning will be located right here with us first text then text restore the password will not actually be text but we will come back to this later to restore password and one more View which is exactly will already contain the form therefore Let's call it that Style Styles for and here we need accordingly will describe form within this form We have several fields are inp so let's let's make the text inp KST inp text Input we will then take this out of in I have a separate component for now I'll call it Styles Input temporarily Because then we will take it out inp so that he could be seen I immediately told him I'll add Well, at least later if anything let's put it correct in and some button while I I will do it that's why what's wrong Some people look like this now so accordingly what we have is not very good Well I really don't like the color BL that's why let me make it closer to to the one we will have, otherwise he will be completely It looks scary already. For this I will use hash and specified color And now all we lack is indents and correct centers first as part of our content wives I would also like to center it center A u form with will stretch and everything else will center super also we don't have enough for the content of the gap task indents and indent there 50 Here they are Between each other and at the form of p which is here 16 Well, that's all, actually. general leau without of course additional styles because we don't have any yet nothing else and now there is a problem that here these are the side indents they are not 55 pixels, that's all we have limited to the inscription restore password That is, if we had an inscription became smaller, for example, to restore with us if only this whole thing were scary that's why it's here there are two options. The first one we need set the width of this entire form which we have is located for example by calculating it minus 55 on each side respectively or just delete here Al it prices and we have this whole part will spread to the maximum extent possible edges but now we need to ensure some kind of lateral indentation Therefore container we add ding this internal indentation of 55 pixels and so on accordingly we now get the correct distance here is 55 here is 55 between them 16 between these elements 50 Yes, we have only done late stage so far. let's move on to the interior styling elements But even such a simple leau allows us to understand what we have the ability to make complex layouts with with different indents just on flexes and I hope you got something similar result now it's time from above down bring our screen which we only video leuta has arrived in already a full login page for this we will start with images in order to firstly start working with the image We I need to export it, I select it the whole group here is our group images choose format respectively png jp Well in this case I can work with pems k sgm calmly let's go further and click export I will export this here in advance in double quality because we have the middle of the screen which has a double pixel density so here by by default so that the quality is not ours it got worse on devices I'll do it 2x You can even have 3X the reserve actually Well let's at least 2x After that I go to our iOS native app assets and our logo will be in the ATA called Log png the rest of the Aty bye we won't touch it, we just added it new ones that we want to use in ours components now how to use this and in order to import we too we will use a special component which is called accepts multiple props The first of them is the source itself Let's just say it right we import us even imported room he is the first to have this Source source then where do we want to get this image from and if this image is not supplied by URL We will work with by the way image that is supplied by URL this is a local asset so we have to download it via require require and specify the path path we are not even back here asss and here we have logo logo Let's save and see here our logo actually came to us it doesn't look very good because the background is not done let's go there are actually no containers here at the container because container Well, let's Conte pom We'll take Conte from ours layouts this color is called BM let me take it in de I'll open the mode and select this color ICT and I will put a grid color Excellent Now it's at least a little more it looks like what we need is like this the logo was put in he inserted in maximum width we would need it to summarize what we have in the layouts in the layouts at the moment it has a width there, roughly speaking, 170 pixels in height oh well 30 pixels Well plus or minus so let's be clear let's set the size of our logo for we will use this Style and we will make Styles logo the logo is here and here we have it there is a logo which will be width 170 as we see we have applied the width but now the edges have been cut off Well because our logo doesn't fit and that's okay behavior because we need more specify A how will our logo be raised I for this the Image component has special resize raise mode Where are we we can leave it with us accordingly stretches repeat repetitive Cover when it occupies the permissible space Kotey and Center let's go let's look at them here is the center accordingly, we have to center it is located inside our selection Cover areas are what we have default default value Cover it just covers everything from top to bottom And due to the fact that we have a certain the height is where the logo is located and that's all the rest is cut to our large unfortunately and accordingly repeat - this is if we have it inserted and repeat as we see left to right more precisely to the right and down and accordingly stretch when it stretches evenly for our format Well, stretch is not very good because he starts to squeeze we will get into the sizes that we need But for our needs this will suit us just fine. so that it is located exactly in the selected area areas and now if we compare with in a bag it will be exactly that in general I by the way, I would even increase it a little regarding the fact that we have a layout and I would put For example at least 220 so that it would be more massive, great Let's do it like this let's leave it like this If you want use the image the same way as accordingly when using text need to use tek component here We also use na room Image where we can pass additional styles Source as a link And if this local then via require and accordingly additional resize which will provide us with the correct location of this image in our some container Image which we are with you created now let's move on to the next one element of our gi screen is IT and we will learn to work with it as well Let's see what he has props I want to point out right away that we are not we will work with text inputs and we'll do it there accordingly styles and we will get one simple one reuse behavior if we there will be such for this we will create together here is another folder I will call it SH where do we have Booth located all SH components and among them the first will be inp in tsx I created a folder inp inside and component respectively inp tsx then I create a component with with the appropriate name with a certain set of pro now let's talk about what, respectively, everything that we were here I'm cleaning for us now we don't need directly imported we will use our the component will actually go to inputs here you see I can click on them but they are not visible because we are not applied styles to them But before they stylize let's talk about the properties in As part of our work we will need essentially all the same properties that we have are also found in the original Input text so we can describe what we are We accept all requests and here we have again ready-made typing in this type KST input is strong enough about which we import from Rea na It means that our inp component accepts everything is the same as what text and accepts here it is enough to ban them back what else do we need to change here There are two more things that need to be changed. The first is actually style so let's go let's do it ST ST and we will create here ST which will be equal to sty here it is important that we have ST imported from na dot create and here we will describe our styles First of them, or rather, probably the only one which we will need and will even if we have only one we will be forced save it here oh and let's style it relative to what we have here height 58 is present pixels 58 [music] 58 then I'm here again for now lit totm about our style how we will completely design further We need an indent horizontal and indentation probably well probably yes we only need horizontal padding 26px So I will use padding horizontal is a horizontal pedin 24 further We need a borr radius which here is 10 pixels respectively borr border radius 10 pixels and probably we will need some other color But this is actually the color of the Place Holder and not the color of the body itself text so let's look at it for now what we got here is Styles Input Style and here we have nothing yet happened Why Because we with Let's check with you And we didn't ask him Back here it is background super Excellent here not there are a few holders so let's go we will do it at the input we will pass on Ho what is this will be written before we are to enter the first we have ho is email and the second holder we have is password and now they are not quite the same color which I would like Well, and by the way, we have in general it's not quite the same as we are we wanted that's why let's do it here we will add n size 16 pixels for now We didn't connect the custom font we will be with you too do well and accordingly, just in case L 1.2 excellent but we have the wrong color PS and here, unlike CSS, we don’t have it some pseudo elements as in got used to in CS there dto dto placeholder at we have separate properties placeholder Text col that says And what do we have? will be for the color of our placeholder and again I am in pain zahard skin what we have and then we will move on to ours design system ho color this is super On At the moment we are doing well here display iOS By the way, for some reason we don't have displayed completely correctly As we can see, there are interesting parameters cases in which the same thing leads ourselves in different ways It would seem that we applied styles but here we have it somewhere here here is this thing and here somewhere there is no and this is revealed exclusively by the bug debug We will also talk about it in the next one Chapter A Well, presumably probably there is still one more ding missing here let's try this vertically do but reset this Din no that is you see, here's what's the matter with us when I I enter it, it is entered somehow enough Weird we remove it That's great in this case we have broke it now if we try to reboot by the way To reboot the device, press Command D or Ctrl D if you have Windows or Linux and from some time you have it works here, like this spot reload it restarts it in in the initial state all L now we have It doesn't break anything and it looks good on us identical both devices Super this is awesome the second part until we got to the button and didn't get to the restore link password But before I go to it I I would like to dwell a little on design system before going further implement our input with opening and displaying the password of the eye and connecting svg I want a little stop at the design of the system which at the moment there is essentially no way the problem when we write background Colors here we go some color it will most likely be be used in other components as well it's not just about color it's about For example, Border radius which more or less identical in all layouts some font size is standard or its several gradations And if we suddenly in at some point we will want to change our background Color on all layouts then we we will have to do it manually then search by text then make sure that it refers specifically to background bark that here change is necessary appropriately and accordingly change of course there is a solution for this names design system We need everything design tokens that will be be used within our layout take them out into separate constants and then we can reuse them for the good of you and me write in the script accordingly We can do this and moreover, thanks to it is sung ub Let's do it which we let's call it our design tokens and we export a constant that we Let's call it actually Let's let's call it like this case and we have several colors if we'll look at the layout We have a common background color Black we would have a layout that had several topics then call it by itself color would not be a very good idea but since we currently have only one and the same is meant the same design without changing the dark themes and light theme I suggest leaving since we have a layout of fi accordingly We have Black, this color is called Dark, we will call it that accordingly. Well, it's big. call the color of the similar layout later it's easier to communicate with designers regarding the colors because these are the ones the name which the designer put into layout next We have primary primary color grid We have primary Hover Primary Hover also through lattice worker if you are interested in all colors in general which are present in the library there is a possibility here I don't know if this is in de mode but in normal mode when we switch to the color library we can see all available colors So let's add the last one accordingly Link color links that will be here is the grille so super So now we have here is the text, it's called Well, let's go let's call it that his which will be a lattice This one we can easily reuse the color This is it imported from ours respectively tokens here we have will be in our very there are some other colors here Generally right done Let's see Which This here and here like once from tokens then good and the last yoke at and so we have this And this is the background and we don't need him here anymore because no more input BC super so colors There is no more And I offer more make some additional tokens on it will probably be more or less everywhere identical Come on only indents indents at We are 16 I think more or less standard and 50 so far we have two Let's do it accordingly 16 [music] it will be because we are already turning to Gaps g16 will be 16 and accordingly g50 50 plus of this we have if suddenly there is an indent that is not in the design system, then this is usually a reason to come to designer and say wait Why here so this is the introduction we bring into our design system something new Or we still we will rely on our design system and somewhere there will be a mistake, so it's very It will also greatly help in communication with designer gs5 gs [music] 50 Great, at least this way we more or less standardize with us nothing should change now visually everything remains the same The only thing we did together was this everything was brought into the design system and in later when we are with you We are finalizing our final project of course all new colors are new distances and other things we will also put in design system You can also here put radius because radius is usually also R16 r10 is standard 10 and here is where we have there is everywhere the appeal diu accordingly we will radius radius of point r10 Excellent Now let's move on to working with svg now we are moving to work with svg we need it will be needed to draw some non-icons Well and in general svg how we know it is used quite often in native Unfortunately there is no native support SG straight out of the box our VPO is not there Well ireti accordingly Therefore we it is necessary to install it additionally fortunately, all dependencies are already internal which we need on operating systems are present and that's it what we will need to do is install additional library if we used react we would native then here we need some more additional had to be installed manually dependencies through under We by the way a little when we move on to the build we'll talk about dependencies that are formed for iOS for Android and how they are structured So we need this for this little eye. That is, we have a case, we have this such an eye that then changes if our password is shown on the open eye by default the password should be hidden we press it and it displays this to us we will do it exactly in this next one lectures When we talk about processing events Well, let's start with svg all of them have size 24 respectively on 24 This one and this one and we have some svg element in In this case we can do two things in ways we can accordingly export as svg or copy ready SG code which is available from us right here in Def Mode, of course, we can We can do all this with PNG too. export to png substitute this it will also be valid decision than me a little I like SVK more because it after all it is vector This means that for us there won't be any problem with different dpi screens at different sizes that's why often svg Especially for there it is generally ideal option for mobile of course a little more complicated but it also works We need to do it so that it works. need to install Rea native svg in because we use Expo C tap we just need to execute one command npx Expo Install which is exactly will provide us with additional displaying everything you need within the framework our clients because everything else We already have a box, we don't need it additionally link native code let's move on now terminal I will stop the server that I have the application running now and I will install additionally SG after installation in our will appear new addiction is accordingly what about us now Ilva let me first open it back in iOS is And I will open No, I don't need an editor, I missed. past dito I would like to open on Android Sorry iOS and Android is good So All over again for everyone I launched it now let's move on our code can just take and insert SPG of course it won't work, that is me I take this svg and try to insert it in the right place Well, let's go there input Let's just insert it into the main page let's try somewhere here Despite the fact that we don’t have an editor Of course he will swear at everything at once [music] Let's go Now let's go back and see how everything is for our big good unfortunately it will break like that Go Up native Up and we see everything everything is bad there is no such thing Well, in short, everything doesn't work, we need to to make it work use those native elements that we need provides just that SG package how to use it the most simple we actually can convert this is the original one I converted component regular component which returns components imported from rect SG Well, writing is understandable with your hands play It doesn't make sense that's why there is a SG converter allows you to convert in Editor let's go here let's make assets Well, let's not even give it let's create let's create this us because this component is nothing else Yes, he lies with us in the monk's office, we are actually in fact we can It is not necessary to put it we we can also comb Nago's hair a little because we don't need it to be customized need to remove this one scheme and rename it correctly Let's rename it correctly I cled and accordingly I closed Ion even if it was an icon I closed I now this SG and PA are some native components that can be draw [music] native svg on native capabilities platforms everything you need now do this icled icon insert into the desired place Let's go to apts and there where are we we wanted an icon, we just add it like that any other component we save and now we need to do it again will Let's restart the whole term iOS and Android So now Ctrl D Come on, let's make it simpler he also reboots it here sometimes in order for it to apply it is required additionally restart Bundling Here is the bundling going on here is ours icon, that is, we left the SVK icon export native SG and output it to phone number for our further task Now I'll need these icons import export second add an icon after that Well let's make a second icon right away it's done extremely simply, take it from us again there is already a ready svg, click copy paste here we get copy Thank you we receive More complex copy the component, go here and we add I Open tsx here we remove unnecessary props again remove the xml mark that we don't need there will be and rename I rename The symbol is excellent U has we can also bring out the second one to check that it works in full volume so here it is us first second all icons added now we need to place them on the field password and add it there logic Now we move on to the analysis pressable component that allows handle the click and let's see how in general, event pressing is processed but overall it's very similar to react but here we don't have it click we have onpress and any other events that we will We'll analyze it in a little more detail when we do talk about animation at the current moment moment We need to implement A let me open our figma This is it component placed here which when when pressed it shows password when pressed again hides the password and we will do this within the framework we can remove the input component from here additional icon because all Kasama logic The work of hiding and showing the password should happen within the input but we have no default the text itself has no properties input concerning the password actually there is Password Rules this is a password rule there are some that we can set but not it is enough to mark that this field is password as in HTML We have ty of our field and other things here we have to Unfortunately this is not available a little bit which is included in in addition he will receive another one which will not be mandatory there will be a boom if we passed then we can display it quite easily and show our icon just like in normal react there is no There's nothing unusual about him combines several nodes of our jsx tree and now we have to say that if we have this Password passed then we need to start working add pressable component that will allow us press with icon that's why we say that if we have this there is about from Pass then we will use imported from just allows you to process clicking on one or another element inside anything can be in our In this case we will have two icons lying around and the status of these icons should be based on the component state we will work entirely with cookies that's why we have it here will Password I like to call in a verbose way so that it is immediately clear what something does or other property and we will have it imported from will be of type Boolean and by default it will be that is, it will be opened by default we will only need it if we we will transmit some icons but as such it will be for us the only thing we will have is useful It's difficult with him now that we are by default More precisely, by default we should take it in fact in the case of the icons themselves, respectively, if us Password visible then we have to draw I I Open icon But if it is not visible then I CL I first Here we need to add additional styles because we I need to place this icon somehow But before we post, let's actually, let's display it here here we have from Password We in A in our here this inp we will pass the property from Password accordingly he is now we have a password under it this is the icon and it is our default visible Why Because we have now default is at the same time here in the text itself input We have ability to show Secure Text entry That is, will we have a hidden input? text For this field and sec T entry the property should depend on is Password visible That is, if we have it suddenly we don't see it, that is from Password visible we have fse then sec ent should also be fse if True then that's why the value is negative us need to Now I will enter everything openly because it's our default. Let's go let's change the default for us and see what will change in the application itself in the application itself now when I will be output see my symbols are hidden and Here too my symbols are hidden We by the way, the input color has not been corrected. But this is let's make an ide by default for our icons Now we need to make sure that when when pressed it changed but we will have the problem is now when I enter email it is also hidden with us Although it is it has nothing to do with the password we have regulates this regulates us from Password that is, if we have transferred and Password only then should this Secure Text entry work in another In this case it shouldn't work, so we we pass sec entry only if is Password and only props is Password and at the same time it's still there and now entering Here we get plain text Here we get closed text Super good with this We figured it out correctly. Now we hide it. via sec entry the text we enter a we also change the icon but for now The hiring process hasn't changed since we place this icon to the right of our input And for this we will add additional styles as usual we we use and let's call it an icon eyes it will be the second one is without a period of course convey her location but he should not be located one after another but on top of this, just like in CSS, we have there is a position property that accepts There are only two meanings here rel or Absolute in our case we need absolute positioning and how we see it now our icon got stuck to this part but again it's not the most optimal Let's see now how will it look if i I'll convey the meaning Well, let's go Wi zero I'll nail right She should right to be located Here we will have it to this icon from Password visible so here it is and the only thing I don't like that she is with us it's located over there on the right, let's go let's make a top but the top 100 here is the top 100 it has shifted relatively ь the only question is why does she have us only if then we pass on here this icon Yeah, it's located in ours within the framework of the entire block, so apparently we we need to combine it all again because otherwise it will be incorrect let's make the arrangement like this there is a monk here now Novi because her parents the element was not this vu uniting se with inputs a vu which was located above it because here was react fragment well Right we we have located it and now we can use it adjust for example additional let's use ding indents or something else let's make a horizontal indent of 20 for it we'll check it normally now and vertical one vertical Ping vertical at 18, basically in the center what we expected from the layouts Let's check Yes, great, but for now when I press it, nothing happens to us it is necessary to process the click on this a thing for PR it's extremely simple here me property Ok in react We have the property here is actually when you will enter here there is e ku additional properties on L Press onpress Out onpress in We only need onpress with the rest We are by the way we'll work on the animation and now when we pressed we must change our state with using Set and Password visible on respectively not Well in fact let's do it this way State is not State so that we are correct relied on the previous State press great, our eye is opening, let's go Let's see now if it shows the password yes the password is now displayed in one In this case, he hid from us accordingly now it displays perfectly Well and the last thing i wanted to do It's probably a bit change color we have color y now which is displayed let's enter Well, at least we'll put it up for now so that we had Input here Color was and we We believe that our design Colors system then Gray at least looks like Player, it should be lighter in general. maybe we'll fix it a little later but at least so that it looks decent super So we have the input working and display password and processing events when you click on our eye now within the framework of the exercise already Knowing how is being implemented and works PR we will do button what is a button button - This is not the ban we have now. we use we will not use default ba because as we see it looks different We want one united a nice button for both operating systems systems so we will use component in which GRAU we will place some Well, accordingly in with grand inside we will put the text and we will handle clicking on this button in this In this case, we will create a separate component Button and to understand what we are asked we need to tip over we will use immediately PRS so that later everything click events that we will have on we would throw the button up otherwise additional requests are already on your discretion for example most likely text there will also be millet Therefore, within the framework of this you take the exercises and they are implemented this button is designed separately component and call it buton pause the video and we'll do it this is all together So I start by creating daddy butt and inside our But I create butt TS This will be our component. buttons it will be nothing more than a function which will be which will have some name props and which returns something Now what props will be inside ours Well, first of all, we need to will be transferred there e Add here the text that will be be a line Well, here I immediately I'll pull out this text and all the other props I'll also pull it out this way by the way input I would do the same because what the hell I really want them to look like this beautiful so from here from Pass too pull it out right away nevos So here we have it coming back to us we are being returned pressable because this is actually what we will be wrap our entire View and this one pressable we should of course ban all the props that we pass on are all props except text we pulled out the text separately further in this pressable we theoretically should put the text but we just can't put the text in any way so of course we will use text that is imported from react native text and here in this text we place Our transmitted the text below is not all if we want so that our text has some background and he had the most comfortable ding wrap it additionally in View so here we take and import View When we make animation we in fact, it will even take a little other but for now without animation it's simple View containing the text itself and accordingly one pressable everything is here in this version we can directly use this Bon now take and add to Up tsx here here instead of using Button which is provided by react native we won't need it we import Button from our Button and here instead of title we will pass text by the way, it was even possible to save it contracts use too title Well after all, this is our component, therefore Let's leave the text for now Super Let's let's look at the device here we have it this one is very hard to see, it's time to take it off stylize what we have will be in terms of styles for batna we we create with you Styles again styles this will be ST imported for us from him create our root Style actually often I see that calls about for example Root root Well what in principle it is also correct there or basic here is already a name within the framework your component to your discretion So Means ST and here I'll pass it on ban Okay, that's it, what styles will we have for Our Button will be here by the way we also need to stylize the text itself so I'll create the text right away and I'll add it here additionally by the way we actually here we need it in pressable let's do it let's do it on View That's what I think Let's put this on View which will be have style And here's this Let's put it on the text Here we will just wrap and add the ability to press like this This will have the following parameters it's like that by default for us, that's why we we can have all the content that we have place in the center and by verticals on there is a borr radius I I remember Borr radius we have a good radius from tokens precision r10 so we also have some height should be equal to what we have above this is 58 pixels 58 And of course we need Ground because all this is somehow necessary paint Let's check that we have it placed correctly and from the tokens, that's our main color and here our button appeared The only thing there is an interesting point on one side here she is a rounder right now let's check if we really have such a radius There is ten Very strange behavior Let's put it at the end, but I don't think so. this will have an effect You can try reboot This is it all that too it happens now we'll try again put povo Try always rebooting it very often this helps more than enough to fix everything now text We have some text at which will be Colors point We don't have white the colors are there Let's see what kind color on the layout is like this fa Let's call it it's called White here, let's call it that him again because we don't have another one topics by me topics can pom super VS white text and the only thing what we did wrong is the size font here it is 18 pixels Let's go let's see if we have any tokens let's make another token which we let's call it And F16 16 is somewhere around here sze fonts in f18 Okay, everything our button is ready now Well, it's clear that we don't have animation. none when pressed it is not very clear what whether it works or not, but due to the fact that We all must have gotten through the requests events are already being transmitted to the top, this is us We'll see when we implement it directly logic gin super button ours is ready but does not react in any way our pressing will be this correct I hope this mini course was Is it useful for you? If so, then please No. Don't forget to like the write comment Well, of course, if you want full course then the link will be in the description But if you haven't seen the previous video about web development news then here there will be a clue somewhere