1 00:00:01,390 --> 00:00:05,830 With our initial navigation stuff all put together we can now start to focus on some of our different 2 00:00:05,830 --> 00:00:06,660 screens. 3 00:00:06,700 --> 00:00:10,390 So I think it makes a lot of sense to first start off with our authentication flow. 4 00:00:10,450 --> 00:00:15,550 In other words these sign up and signing screens these two screens are going to look just about identical. 5 00:00:15,640 --> 00:00:20,860 So they both have a header some inputs button in the link at the bottom for just about all the different 6 00:00:20,860 --> 00:00:23,230 elements are going to create inside this application. 7 00:00:23,260 --> 00:00:25,230 We could create them all from scratch. 8 00:00:25,270 --> 00:00:30,580 In other words we can create some buttons and text inputs labels all that kind of stuff from scratch 9 00:00:30,970 --> 00:00:36,730 but instead to save a little bit of time we're going to be using a little helper library called react 10 00:00:36,790 --> 00:00:38,190 native elements. 11 00:00:38,230 --> 00:00:43,330 This is a library that has a ton of pre-built common components inside of it that already have some 12 00:00:43,330 --> 00:00:45,160 default styling applied to them. 13 00:00:45,190 --> 00:00:51,760 So things like buttons and headers and text inputs all that kind of good stuff not a lot of functionality 14 00:00:51,820 --> 00:00:55,330 just pretty much styling already put together for us. 15 00:00:55,420 --> 00:00:59,560 So let's first installed React Native elements and then take a look at the documentation really quickly 16 00:00:59,560 --> 00:01:01,990 to understand what we're really getting into. 17 00:01:01,990 --> 00:01:07,660 So to install React Native elements I'll flip over to my terminal I'll open up a new terminal window 18 00:01:07,720 --> 00:01:15,550 still inside of my tracks project directory and then as usual we'll do an npm install React Native elements 19 00:01:17,050 --> 00:01:22,270 while that's installing I can go over to the documentation a direct link to the documentation is kind 20 00:01:22,270 --> 00:01:24,780 of long so we'll just do a google search instead. 21 00:01:24,790 --> 00:01:26,750 Honestly the fastest way to get there. 22 00:01:26,860 --> 00:01:34,090 So inside of Google I'll do a quick search for React Native elements and find the first link. 23 00:01:34,100 --> 00:01:40,540 Here we go So on the top right hand side we can find the component section and on the left hand side 24 00:01:40,600 --> 00:01:45,340 you'll see a list of all the different components we get for free with react native elements. 25 00:01:45,340 --> 00:01:50,320 Now a lot of these different components are going to have very familiar names for example reactive elements 26 00:01:50,380 --> 00:01:56,350 has a component called button as you're probably well aware will react native itself has a button as 27 00:01:56,350 --> 00:01:57,000 well. 28 00:01:57,100 --> 00:01:59,740 So why would we use this button. 29 00:01:59,740 --> 00:02:04,720 Remember that the React Native button was only put into the library because essentially everyone said 30 00:02:04,720 --> 00:02:07,450 when they first start with React Native HOW DO I MAKE A BUTTON. 31 00:02:07,450 --> 00:02:12,260 THAT'S THE ONLY REASON THAT THE BUTTON component exists inside of the React Native standard library. 32 00:02:12,580 --> 00:02:16,570 So that button element has very little customization options. 33 00:02:16,570 --> 00:02:21,910 So instead if we use the button component coming from reacting of elements we can easily customize it 34 00:02:21,910 --> 00:02:28,190 to get these dramatically different looking buttons very easily if you want to see how you can customize 35 00:02:28,220 --> 00:02:30,660 any of these different components just click on the section. 36 00:02:30,770 --> 00:02:36,770 Take a look at usage or more importantly take a look at the prop section down here which will explain 37 00:02:36,830 --> 00:02:40,960 how we can pass different props to customize how the button behaves. 38 00:02:40,980 --> 00:02:41,250 All right. 39 00:02:41,280 --> 00:02:46,380 So for this first screen that you and I are working on or sign up and sign in. 40 00:02:46,380 --> 00:02:47,600 We've got a piece of text. 41 00:02:47,670 --> 00:02:50,260 We've got two inputs and our button. 42 00:02:50,310 --> 00:02:53,280 So we've already seen that reactive elements has a button. 43 00:02:53,280 --> 00:02:59,050 Let's take a look at how we show some kind of like header as we're showing up here so back inside of 44 00:02:59,050 --> 00:03:04,300 the documentation there is a header but that's for more of a classic looking header. 45 00:03:04,300 --> 00:03:08,890 We don't need that kind of header we just need like a big presentation piece of text. 46 00:03:09,010 --> 00:03:14,740 So if we also find inside of components the text section we can show a piece of text with react native 47 00:03:14,740 --> 00:03:15,100 elements. 48 00:03:15,100 --> 00:03:20,200 Now of course you're probably saying once again Stephen we already get a text element from React Native 49 00:03:20,200 --> 00:03:21,060 as well. 50 00:03:21,070 --> 00:03:23,420 So once again we use the one from react native elements. 51 00:03:23,500 --> 00:03:26,900 We just get a little bit of pre-built styling put into it. 52 00:03:26,920 --> 00:03:29,260 So in this case if we use the text element coming from. 53 00:03:29,290 --> 00:03:35,700 React Native elements we can add in a prop of each one two three or four and that's going to automatically 54 00:03:36,100 --> 00:03:42,130 edit or change the size of the text that's displayed so we can use reactive elements version of text 55 00:03:42,190 --> 00:03:47,680 just to get some very easily configurable text element where we don't have to define that entire separate 56 00:03:47,680 --> 00:03:52,620 style sheet and a style section inside there just for some piece of text. 57 00:03:52,720 --> 00:03:55,300 And then finally we also need to show a input. 58 00:03:55,300 --> 00:04:00,040 So if we go into the component section again we can find input right there. 59 00:04:00,040 --> 00:04:04,120 Now this is a very stylized example of what their input looks like. 60 00:04:04,120 --> 00:04:07,960 This is not what react need of elements input element looks like it by default. 61 00:04:07,960 --> 00:04:10,640 This has a bunch of additional styling applied to it. 62 00:04:11,020 --> 00:04:13,690 The input element is really just a text input. 63 00:04:13,690 --> 00:04:15,750 Same one that we're used to using from React Native. 64 00:04:15,880 --> 00:04:20,110 But as we've seen with all these other components it just has a little bit of default styling applied 65 00:04:20,110 --> 00:04:21,190 to it. 66 00:04:21,430 --> 00:04:27,850 In particular when we use this input coming from React Native elements we can also pass in some props 67 00:04:27,850 --> 00:04:33,070 if we go down the prop section like label and that will be some amount of text to be used for labeling 68 00:04:33,130 --> 00:04:33,970 that text input. 69 00:04:34,600 --> 00:04:39,850 So this keeps us from having to create a separate text element to show next to some text input that 70 00:04:39,850 --> 00:04:41,410 we put together. 71 00:04:41,410 --> 00:04:45,850 So again a lot these things are going to be very familiar very similar to what is already coming from 72 00:04:45,850 --> 00:04:46,840 React Native. 73 00:04:46,840 --> 00:04:51,040 They just have some default styling or some interesting props tied to them. 74 00:04:51,040 --> 00:04:53,470 They're just going to save us a little bit of time. 75 00:04:53,530 --> 00:04:57,280 And that's one reason that we are using React Native elements we're just trying to save a little bit 76 00:04:57,280 --> 00:05:00,480 of time here and not obsess over styling okay. 77 00:05:00,510 --> 00:05:04,840 So if I flip back or my terminal looks like the installation is complete. 78 00:05:04,950 --> 00:05:06,370 So let's take a quick pause right here. 79 00:05:06,390 --> 00:05:10,010 When we come back the next video we'll get started first on our. 80 00:05:10,020 --> 00:05:16,320 About the sign up screen so we're gonna use reacting developments to show text input input button and 81 00:05:16,320 --> 00:05:16,920 so on. 82 00:05:17,040 --> 00:05:18,830 So quick pause and I'll see you in just a minute.