Kill require('image!...')

Reviewed By: yungsters

Differential Revision: D4179964

fbshipit-source-id: e56ee7814e23a3afc6223527f1afefe51a9e0aec

Examples/Movies/MoviesApp.android.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-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.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -18,6 +25,8 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
+
+var nativeImageSource = require('nativeImageSource');
 var {
   AppRegistry,
   BackAndroid,
@@ -50,7 +59,11 @@ var RouteMapper = function(route, navigationOperations, onComponentRef) {
       <View style={{flex: 1}}>
         <ToolbarAndroid
           actions={[]}
-          navIcon={require('image!android_back_white')}
+          navIcon={nativeImageSource({
+            android: 'android_back_white',
+            width: 96,
+            height: 96
+          })}
           onIconClicked={navigationOperations.pop}
           style={styles.toolbar}
           titleColor="white"

Examples/Movies/SearchBar.android.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-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.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -18,6 +25,8 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
+
+var nativeImageSource = require('nativeImageSource');
 var {
   Image,
   Platform,
@@ -42,7 +51,11 @@ class SearchBar extends React.Component {
             onPress={() => this.refs.input && this.refs.input.focus()}>
           <View>
             <Image
-              source={require('image!android_search_white')}
+              source={nativeImageSource({
+                android: 'android_search_white',
+                width: 96,
+                height: 96
+              })}
               style={styles.icon}
             />
           </View>

Examples/UIExplorer/js/ImageCapInsetsExample.js

@@ -25,6 +25,8 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
+
+var nativeImageSource = require('nativeImageSource');
 var {
   Image,
   StyleSheet,
@@ -41,7 +43,11 @@ class ImageCapInsetsExample extends React.Component {
             capInsets: none
           </Text>
           <Image
-            source={require('image!story-background')}
+            source={nativeImageSource({
+              ios: 'story-background',
+              width: 60,
+              height: 60
+            })}
             style={styles.storyBackground}
             resizeMode={Image.resizeMode.stretch}
             capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
@@ -52,7 +58,11 @@ class ImageCapInsetsExample extends React.Component {
             capInsets: 15
           </Text>
           <Image
-            source={require('image!story-background')}
+            source={nativeImageSource({
+              ios: 'story-background',
+              width: 60,
+              height: 60
+            })}
             style={styles.storyBackground}
             resizeMode={Image.resizeMode.stretch}
             capInsets={{left: 15, right: 15, bottom: 15, top: 15}}

Examples/UIExplorer/js/Navigator/JumpingNavSample.js

@@ -22,6 +22,8 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
+
+var nativeImageSource = require('nativeImageSource');
 var {
   Navigator,
   StyleSheet,
@@ -74,7 +76,11 @@ class JumpingNavBar extends React.Component {
       <View style={styles.tabs}>
         <TabBarIOS>
           <TabBarIOS.Item
-            icon={require('image!tabnav_notification')}
+            icon={nativeImageSource({
+              ios: 'tabnav_notification',
+              width: 24,
+              height: 24
+            })}
             selected={this.state.tabIndex === 0}
             onPress={() => {
               this.props.onTabIndex(0);
@@ -83,7 +89,11 @@ class JumpingNavBar extends React.Component {
             <View />
           </TabBarIOS.Item>
           <TabBarIOS.Item
-            icon={require('image!tabnav_list')}
+            icon={nativeImageSource({
+              ios: 'tabnav_list',
+              width: 24,
+              height: 24
+            })}
             selected={this.state.tabIndex === 1}
             onPress={() => {
               this.props.onTabIndex(1);
@@ -92,7 +102,11 @@ class JumpingNavBar extends React.Component {
             <View />
           </TabBarIOS.Item>
           <TabBarIOS.Item
-            icon={require('image!tabnav_settings')}
+            icon={nativeImageSource({
+              ios: 'tabnav_settings',
+              width: 24,
+              height: 24
+            })}
             selected={this.state.tabIndex === 2}
             onPress={() => {
               this.props.onTabIndex(2);

Examples/UIExplorer/js/NavigatorIOSExample.js

@@ -25,7 +25,9 @@
 const React = require('react');
 const ReactNative = require('react-native');
 const ViewExample = require('./ViewExample');
+
 const createExamplePage = require('./createExamplePage');
+const nativeImageSource = require('nativeImageSource');
 const {
   AlertIOS,
   NavigatorIOS,
@@ -107,7 +109,11 @@ class NavigatorIOSExamplePage extends React.Component {
               component: EmptyPage,
               leftButtonTitle: 'Custom Left',
               onLeftButtonPress: () => this.props.navigator.pop(),
-              rightButtonIcon: require('image!NavBarButtonPlus'),
+              rightButtonIcon: nativeImageSource({
+                ios: 'NavBarButtonPlus',
+                width: 17,
+                height: 17
+              }),
               onRightButtonPress: () => {
                 AlertIOS.alert(
                   'Bar Button Action',

Examples/UIExplorer/js/ToolbarAndroidExample.android.js

@@ -24,6 +24,8 @@
 
 var React = require('react');
 var ReactNative = require('react-native');
+
+var nativeImageSource = require('nativeImageSource');
 var {
   StyleSheet,
   Text,
@@ -54,7 +56,11 @@ class ToolbarAndroidExample extends React.Component {
         <UIExplorerBlock title="Toolbar with title/subtitle and actions">
           <ToolbarAndroid
             actions={toolbarActions}
-            navIcon={require('image!ic_menu_black_24dp')}
+            navIcon={nativeImageSource({
+              android: 'ic_menu_black_24dp',
+              width: 48,
+              height: 48
+            })}
             onActionSelected={this._onActionSelected}
             onIconClicked={() => this.setState({actionText: 'Icon clicked'})}
             style={styles.toolbar}
@@ -64,7 +70,11 @@ class ToolbarAndroidExample extends React.Component {
         </UIExplorerBlock>
         <UIExplorerBlock title="Toolbar with logo & custom title view (a View with Switch+Text)">
           <ToolbarAndroid
-            logo={require('image!launcher_icon')}
+            logo={nativeImageSource({
+              android: 'launcher_icon',
+              width: 132,
+              height: 144
+            })}
             style={styles.toolbar}>
             <View style={{height: 56, flexDirection: 'row', alignItems: 'center'}}>
               <Switch
@@ -83,13 +93,25 @@ class ToolbarAndroidExample extends React.Component {
         <UIExplorerBlock title="Toolbar with navIcon & logo, no title">
           <ToolbarAndroid
             actions={toolbarActions}
-            logo={require('image!launcher_icon')}
+            logo={nativeImageSource({
-            navIcon={require('image!ic_menu_black_24dp')}
+              android: 'launcher_icon',
+              width: 132,
+              height: 144
+            })}
+            navIcon={nativeImageSource({
+              android: 'ic_menu_black_24dp',
+              width: 48,
+              height: 48
+            })}
             style={styles.toolbar} />
         </UIExplorerBlock>
         <UIExplorerBlock title="Toolbar with custom title colors">
           <ToolbarAndroid
-            navIcon={require('image!ic_menu_black_24dp')}
+            navIcon={nativeImageSource({
+              android: 'ic_menu_black_24dp',
+              width: 48,
+              height: 48
+            })}
             onIconClicked={() => this.setState({colorProps: {}})}
             title="Wow, such toolbar"
             style={styles.toolbar}
@@ -125,9 +147,17 @@ class ToolbarAndroidExample extends React.Component {
 }
 
 var toolbarActions = [
-  {title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'},
+  {title: 'Create', icon: nativeImageSource({
+    android: 'ic_create_black_48dp',
+    width: 96,
+    height: 96
+  }), show: 'always'},
   {title: 'Filter'},
-  {title: 'Settings', icon: require('image!ic_settings_black_48dp'), show: 'always'},
+  {title: 'Settings', icon: nativeImageSource({
+    android: 'ic_settings_black_48dp',
+    width: 96,
+    height: 96
+  }), show: 'always'},
 ];
 
 var styles = StyleSheet.create({

Examples/UIExplorer/js/UIExplorerApp.android.js

@@ -42,6 +42,8 @@ const UIManager = require('UIManager');
 const URIActionMap = require('./URIActionMap');
 const View = require('View');
 
+const nativeImageSource = require('nativeImageSource');
+
 import type {UIExplorerNavigationState} from './UIExplorerNavigationReducer';
 
 UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -152,8 +154,16 @@ class UIExplorerApp extends React.Component {
       return (
         <View style={styles.container}>
           <ToolbarAndroid
-            logo={require('image!launcher_icon')}
+            logo={nativeImageSource({
-            navIcon={require('image!ic_menu_black_24dp')}
+              android: 'launcher_icon',
+              width: 132,
+              height: 144
+            })}
+            navIcon={nativeImageSource({
+              android: 'ic_menu_black_24dp',
+              width: 48,
+              height: 48
+            })}
             onIconClicked={() => this.drawer.openDrawer()}
             style={styles.toolbar}
             title={title}
@@ -168,8 +178,16 @@ class UIExplorerApp extends React.Component {
     return (
       <View style={styles.container}>
         <ToolbarAndroid
-          logo={require('image!launcher_icon')}
+          logo={nativeImageSource({
-          navIcon={require('image!ic_menu_black_24dp')}
+            android: 'launcher_icon',
+            width: 132,
+            height: 144
+          })}
+          navIcon={nativeImageSource({
+            android: 'ic_menu_black_24dp',
+            width: 48,
+            height: 48
+          })}
           onIconClicked={() => this.drawer.openDrawer()}
           style={styles.toolbar}
           title={title}