diff --git a/releases/next/docs/platform-specific-code.html b/releases/next/docs/platform-specific-code.html index f6b67da4d50..bd2a390f96f 100644 --- a/releases/next/docs/platform-specific-code.html +++ b/releases/next/docs/platform-specific-code.html @@ -1,15 +1,10 @@ -Platform Specific Code – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Platform Specific Code #

Edit on GitHub

When building a cross-platform app, the need to write different code for different platforms may arise. This can always be achieved by organizing the various components in different folders:

/common/components/ -/android/components/ -/ios/components/

Another option may be naming the components differently depending on the platform they are going to be used in:

BigButtonIOS.js -BigButtonAndroid.js

But React Native provides two alternatives to easily organize your code separating it by platform:

Platform specific extensions #

React Native will detect when a file has a .ios. or .android. extension and load the right file for each platform when requiring them from other components.

For example, you can have these files in your project:

BigButton.ios.js -BigButton.android.js

With this setup, you can just require the files from a different component without paying attention to the platform in which the app will run.

import BigButton from './components/BigButton';

React Native will import the correct component for the running platform.

Platform module #

A module is provided by React Native to detect what is the platform in which the app is running. This piece of functionality can be useful when only small parts of a component are platform specific.

var { Platform } = ReactNative; +Platform Specific Code – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Tutorials

Sample Applications

Community Resources

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

Platform Specific Code #

Edit on GitHub

When building a cross-platform app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for iOS and Android.

React Native provides two ways to easily organize your code and separate it by platform:

  • Using the Platform module.
  • Using platform-specific file extensions.
import BigButton from './components/BigButton';

React Native will import the correct component for the running platform.

Platform module #

React Native provides a module that detects the platform in which the app is running. You can use the detection logic to implement platform-specific code. Use this option when only small parts of a component are platform-specific.

import { Platform, StyleSheet } from 'react-native'; -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ height: (Platform.OS === 'ios') ? 200 : 100, -});

Platform.OS will be ios when running in iOS and android when running in an Android device or simulator.

There is also a Platform.select method available, that given an object containing Platform.OS as keys, -returns the value for the platform you are currently running on.

var { Platform } = ReactNative; +});

Platform.OS will be ios when running on iOS and android when running on Android.

There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.

import { Platform, StyleSheet } from 'react-native'; -var styles = StyleSheet.create({ +const styles = StyleSheet.create({ container: { flex: 1, ...Platform.select({ @@ -21,17 +16,17 @@ returns the value for the platform you are currently running on.

}, }), }, -});

This will result in a container having flex: 1 on both platforms and backgroundColor - red on iOS and blue -on Android.

Since it accepts any value, you can also use it to return platform specific component, like below:

var Component = Platform.select({ +});

This will result in a container having flex: 1 on both platforms, a red background color on iOS, and a blue background color on Android.

Since it accepts any value, you can also use it to return platform specific component, like below:

const Component = Platform.select({ ios: () => require('ComponentIOS'), android: () => require('ComponentAndroid'), })(); -<Component />;

Detecting Android version #

On Android, the Platform module can be also used to detect which is the version of the Android Platform in which the app is running

var {Platform} = ReactNative; +<Component />;

Detecting the Android version #

On Android, the Platform module can also be used to detect the version of the Android Platform in which the app is running:

import { Platform } from 'react-native'; if(Platform.Version === 21){ console.log('Running on Lollipop!'); -}
Next →

We are planning improvements to the React Native documentation. Your responses to this short survey will go a long way in helping us provide valuable content. Thank you!

Take Survey
© 2016 Facebook Inc.