Writing Platform-Specific Components for iOS and Android in React Native

[00:00] One of the awesome things about React Native is that we can write mostly cross platform, or reusable code, but when we need to, we can write code that behaves differently on different platforms.

[00:10] In order to do that, we have a couple of options. The first one we're going to look at today is the platform module. To use that, we're going to start by just importing it from React Native just like we would any other React Native module.

[00:22] Now, let's use that. I'm going to add a variable message. Then, we're going to say if platform.os is iOS, I want that message to say "hello, you are on an iOS device."

[00:49] Now, if you are on androidplatform.os, that's the API provided by the platform module equal android. I'm going to set message to be "hello, you are on an Android device."

[01:06] Now, we have this message string, and let me set it to be an empty string to begin with. Let's try rendering this and see what it looks like in the different simulators. I'm going to put it right here inside of this text component.

[01:20] Now, if I open up my iOS simulator, and refresh, yay, we can see that platform.os worked. We can identify the fact that we are in fact on an iOS device. Now, just to sandy check this, let's also see what it looks like on Android. If I open up our Android emulator, we can see that, yeah, we also get platform.os working on Android.

[01:43] Now, the whole point of writing platform specific code is that we can keep the rest of our code base very clean, and totally cross platform compatible, and we can isolate the platform specific parts to individual components, but keep the API consistent.

[01:58] Because of that, we're usually not going to want to use this platform module, unless there are very, very small changes that we want between iOS, and Android.

[02:05] Much more commonly, we're going to want components that render completely differently on iOS or Android, or at least substantially, for things like, say, different navigation, different user interactions, that sort of thing.

[02:17] To facilitate that, let's look at how we might write components that render completely separately. Going back to my file right here, we're going to put this special custom message into its own component so that these two separate versions can live in totally separate files. We don't need to intermingle our iOS, and Android code.

[02:37] I'm going to call that component hello. It's going to be located in some different files. We're going to say import hello from ./hello. Now, what we're going to do is we're going to create two new files.

[02:51] The first is going to be hello.ios.js, and the second is hello.android.js. These platform specific file extensions tell React Native which version to load. Then when we import them, we don't reference the file extension at all when the app gets loaded to load the cracked version for us.

[03:07] Now, what I'm going to do is I'm going to copy and paste all of this code into these two files. Then, we're going to clean it up and customize it to work just for what we need. In hello.iso.js here, I don't need to import a platform anymore. I don't need to import this component.

[03:32] I'm going to call this class hello, and I don't need to say if platform.os equals iOS, because I know that this version of the component is only ever going to be rendered on iOS. Instead, I'm just going to copy this text string, and replace the message entirely.

[03:49] We can now delete all of this. My style sheet stays the same. I'm exporting this hello component. Great. Now, for Android, we do basically the same thing. Starting again with the same code, but now, we know that this version of the component only gets loaded for Android so we can write it just like this.

[04:16] The last thing we'll need to do is we're going to delete all this old rendering stuff from our main component. Instead of rendering anything special, we're just going to return a hello component. I'm also going to delete these styles, because we're not using them. We don't actually need any of that.

[04:42] Now, let's try loading this. I'll go into the iOS simulator, and refresh. You can see the same exact thing renders. I'll go into the Android simulator, and refresh. Again, same exact thing renders. These are effectively equivalent approaches.

[04:57] The difference here, and the reason why you might want you use the file extensions that are platform specific, the .ios.js and the .android.js approach is because now, from our main component, we have a super simple interface, and we know we can rely on the fact that's going to be the same for each component.

[05:14] If we wanted to pass down props, or things like that, each file could handle its logic separately, and we don't have to look at them all in the same giant loaded file. That's all you have to do in order to get cross platform behavior, but keep a nice, clean API.