Now in rare cases, you also might want to switch way more than just some styles and a component and therefore
in your component file, you would have a lot of if checks, a lot of platform selects.
In such cases, you can also work with multiple files,
you can create a MainButton.android.js file and another MainButton.ios.js file and
then React Native will automatically load the Android component here for Android and iOS for iOS. Important
though, in the places where you use your button, you shouldn't adjust your imports.
So here my IDE automatically adjusted this,
you should still import main button as if the file would be named MainButton.js,
don't import from .android or .ios, import from just main button, so make sure you have
all these imports fixed because React Native will automatically rename this behind the scenes and load
the correct file based on the platform you're running on.
And now here I can copy my code into the iOS file and obviously, get rid of all platform checks
now, get rid of this surrounding view which I only needed to clip my ripple effect which I won't have
on iOS. Get rid of the button component and always use touchable opacity because on iOS,
we don't have the ripple effect there,
We don't need to import it, we don't need the platform API and now we have a button that will look
and feel the way it should look and feel on iOS,
we also don't need that class anymore and on Android, we do the same.
We still need touchable opacity because we still need to check the Android version and render touchable
opacity if it's too low
but we don't need to check for Android anymore because we obviously always run on Android, thanks to
our file ending and the rest therefore also should be fine.
Now here we don't really need that split into two files because we didn't have too much separate logic
but if you had very complex components with a lot of different styles and layout for the different platforms,
then splitting it into a platform-specific files might be the best thing to do.
Now with that, I'll actually restart that to make sure that all these changes are picked up correctly
and then run this on Android and iOS and also dismiss the running apps there and restart them to make
sure that they are re-reloaded correctly and you should then see your application run correctly on both
platforms again with the platform-specific styles, so here with the ripple effect on Android for example
and the opacity effect on iOS, thanks to our separate files and you can use that separate file system
on any component file or any file in general, any Javascript file. There if you have .android and .ios
and of course these names have to be correct, .android.js and .ios.js, then these files
will be loaded for different platforms your app is running on. Use that if you have a lot of different logic
in the files and you would have a lot of if checks in there, a lot of platform selects in there and therefore
you have cleaner code by having different files.