React Native (feat. Redux) Styling a Specific Platform
This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Styling a Specific Platform" Lesson
>> Scott Moss: The other thing you can get around with this making styles as far as organization is if, let's say, because this isn't gonna look the same on iOS. And iOS isn't gonna look the same on Android, right? So what you can do is you can move these styles into a different folder, or a different file.
[00:00:18] For instance we can say, we'll call this styles.android.js. And then we'll call another one styles.ios.js. And what we'll do is we'll go to Fancy, we'll grab these styles. We'll put them in Android. We'll make sure to import stylesheet,
>> Scott Moss: From react native, we'll save that. And then now inside of our component, all we have to do is, we don't need the style sheet any more.
[00:01:04] All we have to do is just import the styles that I should be exporting, export styles. So all we have to do now is just import those styles. And the pad that we want to import them from, we don't have to include the platform we don't include Android, iOS.
[00:01:22] React Native will pick it up for us at runtime. And for Android, we're gonna give you the Android version. For iOS, we're gonna give you the iOS version, just based off the file extensions. So that way, we can declare different styles for the same component in two files for two different platforms.
[00:01:37] So for Android we obviously want the styles, so we'll say styles. And now that's going to give us the Android one. And this should still work, I might have to reload it. Yeah, yeah, I didn't do this right. Let's bring this over there too.
>> Scott Moss: There we go.
>> Scott Moss: Cool and it still looks exactly the same. Now for iOS, now if we copy this and we put this in iOS. And then we change something like, let's change this to be blue so we can see that it's different and we'll change this to be orange.
>> Scott Moss: And if I run this in iOS, react-native run,
>> Scott Moss: I don't think I had a shortener for that.
>> Scott Moss: So we run this in iOS,
>> Scott Moss: And we should see some different styles here.
>> Scott Moss: This one actually feels kinda fast.
>> Scott Moss: Little splash screen action.
>> Scott Moss: And we get an error because I didn't update the index to iOS,
>> Scott Moss: With whatever is in here so let's do that right quick.
>> Scott Moss: There we go.
>> Scott Moss: Debug, Window, Hardware, Shake.
>> Scott Moss: There we go, so now different styles, right. Cuz we did the .iOS extension vs the Android extension. That's pretty clutch, I think. And that works for any file you put that extension on.
[00:03:44] If you import it, it'll take the extension off and use it in that specific platform. So that's another way for you to do different styles. And the other way I told you guys where is you can use, for instance, if we were inside these styles here. Let's say this is a generic one and not just for Android, we can use Platform.
[00:04:03] And then platform has a .os, or maybe its capital OS, or lowercase, I don't know one of these, and that's gonna say iOS or Android. So you can like if Platform.OS triple equals iOS, then here are the styles. If Android, here are the styles, you can do that too if you just want it in one file, so that's another way.
[00:04:26] And then if you are on Android, you also get access to version. So you can see what version of Android you're on, it'll give you the API level. So for instance, if this was 21, I think that's Lollipop or something like that. So you know what version of Android you're on.
[00:04:41] So you get access to all this stuff, which is another way for you to create dynamic properties, dynamic components, dynamic all types of stuff based on that. You can also, for instance, for this component, this Fancy component. When we brought it into the index here, we could of used the platform to say hey, here's the path for the Fancy component for Android, here's the path for the Fancy component for iOS.
[00:05:08] Bring in the appropriate one depending on the platform, and the platform would do that for us. So you can also do that as well. So there's so many ways you can create the different types, depending on the on the platform. Any more questions on the styling? Yo?
>> Speaker 2: What do you find the differences to be the most between Android and iOS as far as do you generally use the same components and different style sheets or same style sheets different components?
>> Scott Moss: I typically use the same style sheet cuz it's usually just some small thing. It depends on what components you're using but most of it's just one or two that's different. For instance, you saw the text input needed a default height on iOS. So I typically just use one style sheet because the way I think of it is I don't want my apps to look exactly the same on both platforms.
[00:06:03] I want an Android app to look and feel like Android app and I want iOS app to look and feel like iOS app. So if I styled them both the same, then there's gonna be some compromises. So I leave it up to React Native to be well, this is what the input should look like on iOS, this is what it should look like on Android.
[00:06:15] And then I'll maybe do some small overrides, which only leads me to only have one file. But if you want the same experience in everything. Or if you want two completely different experiences. I guess that it all depends. I like to leave it up to whatever the platform decides what it should look like.