1
00:00:02,210 --> 00:00:10,440
Now in rare cases, you also might want to switch way more than just some styles and a component and therefore

2
00:00:10,580 --> 00:00:16,750
in your component file, you would have a lot of if checks, a lot of platform selects.

3
00:00:16,760 --> 00:00:20,370
In such cases, you can also work with multiple files,

4
00:00:20,480 --> 00:00:30,110
you can create a MainButton.android.js file and another MainButton.ios.js file and

5
00:00:30,110 --> 00:00:39,050
then React Native will automatically load the Android component here for Android and iOS for iOS. Important

6
00:00:39,050 --> 00:00:44,660
though, in the places where you use your button, you shouldn't adjust your imports.

7
00:00:44,720 --> 00:00:47,320
So here my IDE automatically adjusted this,

8
00:00:47,360 --> 00:00:52,550
you should still import main button as if the file would be named MainButton.js,

9
00:00:52,550 --> 00:01:00,800
don't import from .android or .ios, import from just main button, so make sure you have

10
00:01:00,800 --> 00:01:06,500
all these imports fixed because React Native will automatically rename this behind the scenes and load

11
00:01:06,530 --> 00:01:10,130
the correct file based on the platform you're running on.

12
00:01:10,130 --> 00:01:16,520
And now here I can copy my code into the iOS file and obviously, get rid of all platform checks

13
00:01:16,520 --> 00:01:22,610
now, get rid of this surrounding view which I only needed to clip my ripple effect which I won't have

14
00:01:22,610 --> 00:01:29,230
on iOS. Get rid of the button component and always use touchable opacity because on iOS,

15
00:01:29,240 --> 00:01:31,180
we don't have the ripple effect there,

16
00:01:31,190 --> 00:01:36,380
We don't need to import it, we don't need the platform API and now we have a button that will look

17
00:01:36,470 --> 00:01:40,220
and feel the way it should look and feel on iOS,

18
00:01:40,220 --> 00:01:45,400
we also don't need that class anymore and on Android, we do the same.

19
00:01:45,440 --> 00:01:52,400
We still need touchable opacity because we still need to check the Android version and render touchable

20
00:01:52,400 --> 00:01:54,290
opacity if it's too low

21
00:01:54,560 --> 00:02:00,080
but we don't need to check for Android anymore because we obviously always run on Android, thanks to

22
00:02:00,080 --> 00:02:04,330
our file ending and the rest therefore also should be fine.

23
00:02:04,430 --> 00:02:10,660
Now here we don't really need that split into two files because we didn't have too much separate logic

24
00:02:10,730 --> 00:02:16,790
but if you had very complex components with a lot of different styles and layout for the different platforms,

25
00:02:17,090 --> 00:02:21,550
then splitting it into a platform-specific files might be the best thing to do.

26
00:02:22,630 --> 00:02:27,930
Now with that, I'll actually restart that to make sure that all these changes are picked up correctly

27
00:02:28,960 --> 00:02:38,090
and then run this on Android and iOS and also dismiss the running apps there and restart them to make

28
00:02:38,090 --> 00:02:45,080
sure that they are re-reloaded correctly and you should then see your application run correctly on both

29
00:02:45,080 --> 00:02:53,860
platforms again with the platform-specific styles, so here with the ripple effect on Android for example

30
00:02:54,160 --> 00:03:01,120
and the opacity effect on iOS, thanks to our separate files and you can use that separate file system

31
00:03:01,240 --> 00:03:08,620
on any component file or any file in general, any Javascript file. There if you have .android and .ios

32
00:03:08,640 --> 00:03:15,460
and of course these names have to be correct, .android.js and .ios.js, then these files

33
00:03:15,460 --> 00:03:22,090
will be loaded for different platforms your app is running on. Use that if you have a lot of different logic

34
00:03:22,090 --> 00:03:27,790
in the files and you would have a lot of if checks in there, a lot of platform selects in there and therefore

35
00:03:27,790 --> 00:03:30,640
you have cleaner code by having different files.