Platform.select method

Summary:
Kudos to frantic for this amazing idea! Works really well (yet so simple!)

Basically we had a discussion with vjeux and frantic and others in the PR #7033 how to handle platform-specific stylesheets in a similar to F8 app way.

There were quite a few nice ideas there, however that one seems to be the smallest yet the most powerful.

Basically there's a `Platform.select` method that given an object, will select a `obj[Platform.OS]` value.

It works with styles:
`Platform.select({ ios: {}, android: {} })`

with messages:
`<Text>{Platform.select({ ios: 'Check the App Store', android: 'Check Google Play' })}</Text>`

and also works well with components (similar to Wallmart idea of <PlatformSwitch />) - relevant example included in diff.
Closes https://github.com/facebook/react-native/pull/7220

Differential Revision: D3221709

Pulled By: vjeux

fb-gh-sync-id: 0a50071f2dcf2273198bc6e2c36e19bca97d7be9
fbshipit-source-id: 0a50071f2dcf2273198bc6e2c36e19bca97d7be9

Libraries/Utilities/Platform.android.js

@@ -15,6 +15,7 @@
 var Platform = {
   OS: 'android',
   get Version() { return require('NativeModules').AndroidConstants.Version; },
+  select: (obj: Object) => obj.android,
 };
 
 module.exports = Platform;

Libraries/Utilities/Platform.ios.js

@@ -14,6 +14,7 @@
 
 var Platform = {
   OS: 'ios',
+  select: (obj: Object) => obj.ios,
 };
 
 module.exports = Platform;

Libraries/Utilities/__tests__/Platform-test.js

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+jest.dontMock('../Platform.ios');
+jest.dontMock('../Platform.android');
+
+var PlatformIOS = require('../Platform.ios');
+var PlatformAndroid = require('../Platform.android');
+
+describe('Platform', () => {
+
+  describe('OS', () => {
+    it('should have correct value', () => {
+      expect(PlatformIOS.OS).toEqual('ios');
+      expect(PlatformAndroid.OS).toEqual('android');
+    });
+  });
+
+  describe('select', () => {
+    it('should return platform specific value', () => {
+      const obj = { ios: 'ios', android: 'android' };
+      expect(PlatformIOS.select(obj)).toEqual(obj.ios);
+      expect(PlatformAndroid.select(obj)).toEqual(obj.android);
+    });
+  });
+
+});

docs/PlatformSpecificInformation.md

@@ -55,6 +55,41 @@ var styles = StyleSheet.create({
 
 `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.
+
+```javascript
+var { Platform } = React;
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    ...Platform.select({
+      ios: {
+        backgroundColor: 'red',
+      },
+      android: {
+        backgroundColor: 'blue',
+      },
+    }),
+  },
+});
+```
+
+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:
+
+```javascript
+var 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