Style React Native Components Differently on iOS and Android
Most React Native code is shared between iOS and Android, but sometimes there is a need for different styling on each platform, or to have completely different code run on each device. We’ll look at three different ways to change styles or entire components between iOS and Android.
Instructor: [00:00] There are two ways to style a component differently for iOS and Android. Import platform from React Native. We can check the OS that we're currently running with platform.os.
[00:12] In the styles for the header, let's say we want a different styling just for iOS. We can put the header style in an array and then check if platform.os equals iOS. Then just for iOS, we can make the padding a bit smaller.
[00:30] When we run that, the padding changes to a new size on iOS. On Android, it still has the large padding. This pattern of switching on the platform's OS is so common that platform provides a built-in way to do.
[00:48] First, let's make a new iOS-only header style in headerstyle.js. We'll use a smaller padding, a slightly smaller font size, and a slightly thinner font. Now we have one style that we want just for Android and one style that we want just for iOS.
[01:13] Back in the render method of app.js, we can select between those by calling platform.select. Select takes an object. The keys are the different operating systems we want to select for.
[01:26] We're only running iOS and Android, so we'll have one key for iOS where we'll just return the iOS style and one for Android where we can return the Android style. We can set that to a local variable and then use that local variable as our style for the header. Now, we have the old style running on Android still and the new style running on iOS.
[01:54] We can also totally replace a component between iOS and Android by making two totally different files. First, let's extract this header into its own component file by making a header.js file.
[02:06] Inside header.js, we can import React and component from React, text from React Native, and import the header style file. Then we can create and export a new header component. Copy the header text from app.js and paste it into our header file.
[02:32] We want the header style to be different between iOS and Android. Instead of using platform like before, we're actually going to create two totally different files. Rename this header file to header.ios.js. In the iOS version, we can use .header style.iosheader for the text component.
[02:54] Copy that file. Create a new file called header.android.js. In this new Android version, change the style to just headerstyle.header. To really change things, let's make the header title Restaurant List on the Android version.
[03:11] Back in app.js, we can import the header file in the normal import style without worrying about the iOS or Android extensions. React Native will automatically figure out which one to require based on the platform that we're currently running on.
[03:27] We can delete the header style and platform switches from app.js. We can use that header component instead of the text directly. When we reload, we see the iOS header style on iOS and the Android header style on Android.