WEBVTT 00:00.610 --> 00:00.940 I. 00:01.890 --> 00:07.870 I'm not going to go through all the different components that are available in React Native. 00:07.890 --> 00:12.170 In this tutorial because that would be a huge tutorial itself. 00:12.180 --> 00:17.220 So we want to have it very compressed and easy to digest. 00:17.220 --> 00:23.850 But if you go to the React Native here to the API, you will have a list of components that are available 00:23.850 --> 00:30.240 for you to use and we use a few of them, but you will have a full reference of the things that are 00:30.240 --> 00:31.800 available straight away. 00:31.800 --> 00:34.530 So we have a buttons, we have images, we have flatlist. 00:34.530 --> 00:39.870 This is what we already talked about, but we have other things like a picker, for example, and you 00:39.870 --> 00:41.910 have a snippets how you can use it. 00:41.940 --> 00:46.170 We have, for example, modal and things like that. 00:46.170 --> 00:54.390 So if you need to do something like this, then go to the API and you will find a probably something 00:54.510 --> 00:55.440 already done. 00:55.440 --> 00:58.080 So we don't need to do it by yourself. 00:58.080 --> 01:02.450 So a thing that that will be a very good reference for you. 01:02.470 --> 01:09.550 The last thing I would like to show you before we will jump into creating our own modal is actually 01:09.550 --> 01:17.980 a platform specific code so we can run this on different platforms and actually we can specify what 01:17.980 --> 01:25.480 needs to be done or how it is need to be displayed based on the condition on what platform we are running 01:25.480 --> 01:26.140 that on. 01:26.140 --> 01:33.280 So let me kind of clean up a little bit here because it started to be very messy. 01:33.280 --> 01:36.580 So what do we have here is we have that. 01:39.060 --> 01:39.750 Apple here. 01:39.750 --> 01:42.660 Maybe I can actually make it even more simple. 01:42.690 --> 01:47.490 I can do a simple text and we can have it here. 01:49.350 --> 01:52.530 Our text. 01:58.190 --> 02:01.160 And it is actually up here. 02:01.190 --> 02:03.800 So what I can do is I can do 02:06.350 --> 02:07.940 line item center 02:10.550 --> 02:15.620 and justify content will do with center as well. 02:19.900 --> 02:22.780 So there is our text here. 02:22.780 --> 02:28.730 So we kind of get back to a very basic setup and I can remove this. 02:28.750 --> 02:36.190 So what we will what we can actually do is we can specify a different things for different operating 02:36.190 --> 02:36.640 systems. 02:36.640 --> 02:43.810 So what I will do is I will import a platform here and that platform will contain all the information 02:43.810 --> 02:46.210 about the platform we are running that on. 02:46.210 --> 02:53.490 So for example, if we would like to have this background color white only when its OS. 02:53.500 --> 03:02.830 So what I can do is I can do platform that OS and you can see here it will be either iOS or Android, 03:02.830 --> 03:04.900 so I can do OS. 03:06.370 --> 03:10.180 Equal to iOS. 03:11.590 --> 03:13.780 Then do this. 03:13.810 --> 03:17.530 Otherwise I'm writing here a ternary operator. 03:17.530 --> 03:21.430 So otherwise I can do, let's say green. 03:21.430 --> 03:23.920 So 00FF00. 03:28.000 --> 03:29.530 So we can see here. 03:29.530 --> 03:33.070 I'm checking if that's operating system is iOS. 03:33.100 --> 03:34.510 Then do white. 03:34.540 --> 03:36.730 Otherwise do green. 03:36.730 --> 03:38.110 And this is not iOS. 03:38.140 --> 03:39.100 This is Android. 03:39.100 --> 03:41.080 So if I will do Android. 03:45.830 --> 03:48.040 You can see on Android I have white. 03:48.050 --> 03:50.630 So to demonstrate it, that is working fine. 03:50.630 --> 03:52.880 I can actually run this simulator. 03:52.880 --> 04:00.230 So I will run the simulator and I will have the same application display on both different on different 04:00.230 --> 04:01.130 simulators. 04:01.130 --> 04:06.710 And you can see they are actually different on each of this operating system. 04:26.990 --> 04:34.150 And as you can see here, the same application running on two different devices will have two different 04:34.400 --> 04:41.780 styles because we specify if you have operating system of iOS, then apply green, otherwise it will 04:41.780 --> 04:42.710 be white. 04:42.710 --> 04:48.380 So this is how you can actually manage and you don't need to limit yourself into the styles. 04:48.380 --> 04:50.090 You can use it anywhere here. 04:50.090 --> 04:55.460 So if you would like to have a different text here, we can also do it based on the platform. 04:55.460 --> 05:04.370 So we can say here, I can do curly brackets here and then I can do similar thing as I've done here. 05:04.370 --> 05:17.330 So we do a operator, ternary operator, and then we will do I am on Android or otherwise. 05:19.670 --> 05:21.290 Otherwise I will do. 05:21.320 --> 05:25.640 I am on iPhone. 05:28.320 --> 05:30.210 So I'm saving this. 05:31.980 --> 05:35.480 And you can see I'm on iPhone and I'm on Android here. 05:35.490 --> 05:42.090 Based on the platform OS, you can decide what will be the content, what will be the different outputs 05:42.240 --> 05:42.780 there. 05:43.020 --> 05:52.140 Another option, what you could do is I will change this to I'm on Android, simple like that. 05:52.140 --> 05:58.890 So it will be one style and it will be it will have both the same thing. 05:58.890 --> 06:06.060 But what you can do is actually you can inject iOS or Android inside the files. 06:06.540 --> 06:17.100 So what I will do is I will rename this and I will do home dot android dot JS, and then I will duplicate 06:17.100 --> 06:18.960 this and paste it again. 06:18.960 --> 06:23.190 So instead of copy, the second one will be. 06:26.020 --> 06:26.940 iOS. 06:26.950 --> 06:28.540 So we have two components. 06:28.540 --> 06:31.750 One will be iOS, another one will be Android. 06:31.750 --> 06:37.900 So I'm inside the home iOS here and this is home Android here. 06:37.900 --> 06:43.810 So I'm an android in there and I can do I am on iOS. 06:49.710 --> 06:55.600 I think this will need to have some kind of rewrite. 06:55.980 --> 07:04.980 We'll need to go to Objs and then we load the home from the component and that home will be loaded from 07:04.980 --> 07:08.430 this home based on the operating system we have. 07:08.460 --> 07:13.410 So if I will save, I think I will need to stop my server. 07:13.980 --> 07:15.440 So I'll go terminal. 07:16.260 --> 07:20.220 I can do control C and then I will run it again. 07:30.890 --> 07:31.250 Okay. 07:31.250 --> 07:34.340 Let me try to do it on the simulator. 07:37.400 --> 07:39.740 And we need to build a new JavaScript. 08:08.860 --> 08:11.650 And you can see here I'm on iOS. 08:11.680 --> 08:17.110 So this is working because we have that inside home iOS. 08:17.140 --> 08:22.870 I'm on iOS, Inside Home, Android, I'm on Android, so it will be different. 08:22.870 --> 08:28.420 So I am I will need to restart this thing to happen. 08:28.420 --> 08:34.360 Whatever you change the name of the files, you need to stop and start your application. 08:34.360 --> 08:39.400 So we'll need to go to emulator and then I will kill this application. 08:39.400 --> 08:43.300 So clear all and then I need to go and build a new one. 08:43.300 --> 08:44.170 So 08:46.960 --> 08:48.190 coming back here. 08:58.700 --> 09:07.100 You can see I'm on iOS and I'm on Android and the way we actually load this one, it's the same from 09:07.100 --> 09:07.800 the App.js. 09:07.850 --> 09:15.920 So we import home component from components home, but inside we have home android or home iOS and React 09:15.920 --> 09:21.950 Native automatically detects our operating system and it will pick the correct file for us. 09:21.950 --> 09:24.560 So we can have two different components. 09:24.830 --> 09:31.880 We have a simple we've changed the simple text here, but the entire component can be different for 09:31.880 --> 09:33.680 both platforms. 09:33.680 --> 09:39.020 So this is the way you can actually distinguish in between two platforms if you need to, you can keep 09:39.020 --> 09:43.970 both of the platforms the same, but if you need to do something different, then that will be the way 09:43.970 --> 09:44.660 to do it.