[ReactNative] Teach flow how to deal with images

Author: frantic

.flowconfig

@@ -30,13 +30,15 @@
 
 [libs]
 Libraries/react-native/react-native-interface.js
-Examples/UIExplorer/ImageMocks.js
 
 [options]
 module.system=haste
 
 munge_underscores=true
 
+module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe

Examples/SampleApp/_flowconfig

@@ -34,6 +34,9 @@ module.system=haste
 
 munge_underscores=true
 
+module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FixMe

Examples/UIExplorer/ImageMocks.js

@@ -2,18 +2,32 @@
  * Copyright 2004-present Facebook. All Rights Reserved.
  *
  * @providesModule AssetRegistry
+ * @flow
  */
 'use strict';
 
-var assets = [];
+export type PackagerAsset = {
+  __packager_asset: boolean,
+  fileSystemLocation: string,
+  httpServerLocation: string,
+  width: number,
+  height: number,
+  scales: Array<number>,
+  hash: string,
+  name: string,
+  type: string,
+};
 
-function registerAsset(asset) {
+
+var assets: Array<PackagerAsset> = [];
+
+function registerAsset(asset: PackagerAsset): number {
   // `push` returns new array length, so the first asset will
   // get id 1 (not 0) to make the value truthy
   return assets.push(asset);
 }
 
-function getAssetByID(assetId) {
+function getAssetByID(assetId: number): PackagerAsset {
   return assets[assetId - 1];
 }
 

Libraries/Image/AssetRegistry.js

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ * @providesModule GlobalImageStub
+ * @flow
+ */
+'use strict';
+
+// This is a stub for flow to make it understand require('image!icon')
+// See packager/react-packager/src/Bundler/index.js
+
+module.exports = {
+  __packager_asset: true,
+  isStatic: true,
+  path: '/full/path/to/something.png',
+  uri: 'icon',
+  width: 100,
+  height: 100,
+  deprecated: true,
+};

Libraries/Image/GlobalImageStub.js

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ * @providesModule RelativeImageStub
+ * @flow
+ */
+'use strict';
+
+// This is a stub for flow to make it understand require('./icon.png')
+// See packager/react-packager/src/Bundler/index.js
+
+var AssetRegistry = require('AssetRegistry');
+
+module.exports = AssetRegistry.registerAsset({
+  __packager_asset: true,
+  fileSystemLocation: '/full/path/to/directory',
+  httpServerLocation: '/assets/full/path/to/directory',
+  width: 100,
+  height: 100,
+  scales: [1, 2, 3],
+  hash: 'nonsense',
+  name: 'icon',
+  type: 'png',
+});