When building a cross-platform application, you will want to reuse as much code as possible. There may be scenarios where it makes sense to distinguish between code, for example, you might want to implement separate visual components for Android and iOS.
React Native provides two ways to organize your code and split it across platforms:
- Using the module
- Using file extensions for specific platforms.
Some components may have properties that only work on one platform. All of these props are marked with
@ platform and have a small icon next to them on the website.
React Native provides a module that defines the framework on which the application runs. You can use discovery logic to implement platform-specific code. Use this option if only small portions of the component are platform dependent.
Platform.OS will be ios when running on iOS and android when running on Android.
There is also a Platform.select method available that specifies an object where the keys can be one of the
'ios' | 'android' | 'native' | 'default' returns the most appropriate value for the platform you are currently working on. That is, if you are using a phone, the
android keys will be preferred. If not specified, the custom key will be used, followed by the
This will cause the container to be
flex: 1 on all platforms, a red background on iOS, a green background on Android, and a blue background on other platforms.
Thanks goes to these wonderful people (emoji key):