Permalink
Browse files

Kill require('image!...')

Reviewed By: yungsters

Differential Revision: D4179964

fbshipit-source-id: e56ee7814e23a3afc6223527f1afefe51a9e0aec
  • Loading branch information...
1 parent cab8810 commit 22141468aba2dc90946c753420a8091b67e7073c @frantic frantic committed with Facebook Github Bot Nov 23, 2016
@@ -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"
@@ -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>
@@ -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}}
@@ -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);
@@ -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',
@@ -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')}
- navIcon={require('image!ic_menu_black_24dp')}
+ logo={nativeImageSource({
+ 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({
@@ -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')}
- navIcon={require('image!ic_menu_black_24dp')}
+ logo={nativeImageSource({
+ 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')}
- navIcon={require('image!ic_menu_black_24dp')}
+ logo={nativeImageSource({
+ 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}

0 comments on commit 2214146

Please sign in to comment.