How to do it...

The simplest way to recognize your platform is by using the Platform module, which includes a property, Platform.OS, which tells you whether you are running Android or iOS. Let's go for a simple example. Imagine you wanted to use some monospaced font in your app. It happens that the right name for the relevant font family varies between platforms: it would be "monospace" in Android, but "AmericanTypewriter" (among others) on Apple devices. By checking Platform.OS, we can set the .fontFamily attribute of a style sheet appropriately, as in the following screenshot:

Using Platform.OS is the simplest way to detect the platform of the device

If you wanted to pick several attributes differently, you might want to use Platform.select() instead:

const headings = Platform.select({
    android: { title: "An Android App", subtitle: "directly from Google" },
    ios: { title: "A iOS APP", subtitle: "directly from Apple" }
});

In this case, headings.title and headings.subtitle will get the values appropriate to the current platform, either Android or iOS. Obviously, you could have managed this using Platform.OS, but this style may be shorter.

For more on the available font families in both Android and iOS devices, you may want to check the lists at https://github.com/react-native-training/react-native-fonts. Take into account, however, that the list may change from version to version.

Table of Contents for How to do it...

Create new playlist

Sign In

Sign Up

Table of Contents for
How to do it...