Conditionally use BitmapImage

change/react-native-windows-2019-12-02-13-46-48-bitmap-image.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Conditionally use BitmapImage",
+  "packageName": "react-native-windows",
+  "email": "email not defined",
+  "commit": "023ef6ee7d849d6fa1fc319040ead78d11328bf3",
+  "date": "2019-12-02T21:46:48.495Z"
+}

packages/playground/Samples/image.tsx

@@ -12,6 +12,9 @@ const largeImageUri =
 const smallImageUri =
   'http://facebook.github.io/react-native/img/header_logo.png';
 
+const dataImageUri =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==';
+
 export default class Bootstrap extends React.Component<
   {},
   {
@@ -22,69 +25,78 @@ export default class Bootstrap extends React.Component<
       | 'contain'
       | 'repeat'
       | undefined;
-    useLargeImage: boolean;
     inlcudeBorder: boolean;
-    imageUrl: string;
+    selectedSource: string;
+    imageUri: string;
   }
 > {
   state = {
     selectedResizeMode: 'center' as 'center',
-    useLargeImage: false,
+    selectedSource: 'small',
     inlcudeBorder: false,
-    imageUrl: 'http://facebook.github.io/react-native/img/header_logo.png',
+    imageUri: 'http://facebook.github.io/react-native/img/header_logo.png',
   };
 
-  switchImageUrl = () => {
-    const useLargeImage = !this.state.useLargeImage;
-    this.setState({useLargeImage});
+  switchImageUri = (value: string) => {
+    this.setState({selectedSource: value});
+
+    let imageUri = '';
+
+    if (value === 'small') {
+      imageUri = smallImageUri;
+    } else if (value === 'large') {
+      imageUri = largeImageUri;
+    } else if (value === 'data') {
+      imageUri = dataImageUri;
+    }
 
-    const imageUrl = useLargeImage ? largeImageUri : smallImageUri;
-    this.setState({imageUrl});
+    this.setState({imageUri});
   };
 
   render() {
     return (
       <View style={styles.container}>
         <View style={styles.rowContainer}>
-          <View style={styles.rowContainer}>
-            <Text style={styles.title}>ResizeMode</Text>
-            <Picker
-              style={{width: 125}}
-              selectedValue={this.state.selectedResizeMode}
-              onValueChange={value =>
-                this.setState({selectedResizeMode: value})
-              }>
-              <Picker.Item label="cover" value="cover" />
-              <Picker.Item label="contain" value="contain" />
-              <Picker.Item label="stretch" value="stretch" />
-              <Picker.Item label="center" value="center" />
-              <Picker.Item label="repeat" value="repeat" />
-            </Picker>
-          </View>
-          <View style={styles.rowContainer}>
-            <Text style={styles.title}>Image Size</Text>
-            <Text style={{marginRight: 5}}>Small</Text>
-            <Switch
-              value={this.state.useLargeImage}
-              onValueChange={this.switchImageUrl}
-            />
-            <Text style={{marginRight: 5}}>Large</Text>
-          </View>
-          <View style={styles.rowContainer}>
-            <Text style={{marginRight: 5}}>No Border</Text>
-            <Switch
-              value={this.state.inlcudeBorder}
-              onValueChange={value => this.setState({inlcudeBorder: value})}
-            />
-            <Text style={{marginRight: 5}}>Round Border</Text>
-          </View>
+          <Text style={styles.title}>ResizeMode</Text>
+          <Picker
+            style={{width: 125}}
+            selectedValue={this.state.selectedResizeMode}
+            onValueChange={value => this.setState({selectedResizeMode: value})}>
+            <Picker.Item label="cover" value="cover" />
+            <Picker.Item label="contain" value="contain" />
+            <Picker.Item label="stretch" value="stretch" />
+            <Picker.Item label="center" value="center" />
+            <Picker.Item label="repeat" value="repeat" />
+          </Picker>
+        </View>
+        <View style={styles.rowContainer}>
+          <Text style={styles.title}>Image Source</Text>
+          <Picker
+            style={{width: 125}}
+            selectedValue={this.state.selectedSource}
+            onValueChange={value => this.switchImageUri(value)}>
+            <Picker.Item label="small" value="small" />
+            <Picker.Item label="large" value="large" />
+            <Picker.Item label="data" value="data" />
+          </Picker>
+        </View>
+        <View style={styles.rowContainer}>
+          <Text>No Border</Text>
+          <Switch
+            style={{marginLeft: 10}}
+            value={this.state.inlcudeBorder}
+            onValueChange={(value: boolean) =>
+              this.setState({inlcudeBorder: value})
+            }
+          />
+          <Text>Round Border</Text>
         </View>
         <View style={styles.imageContainer}>
           <Image
             style={
               this.state.inlcudeBorder ? styles.imageWithBorder : styles.image
             }
-            source={{uri: this.state.imageUrl}}
+            source={{uri: this.state.imageUri}}
             resizeMode={this.state.selectedResizeMode}
           />
         </View>
@@ -103,6 +115,7 @@ const styles = StyleSheet.create({
   rowContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginBottom: 5,
   },
   imageContainer: {
     marginTop: 5,
@@ -125,7 +138,7 @@ const styles = StyleSheet.create({
   title: {
     fontWeight: 'bold',
     margin: 5,
-    width: 80,
+    width: 100,
   },
 });
 

vnext/ReactUWP/Modules/ImageViewManagerModule.cpp

@@ -61,7 +61,7 @@ winrt::fire_and_forget GetImageSizeAsync(
   bool succeeded{false};
 
   try {
-    ImageSource source;
+    ReactImageSource source;
     source.uri = uriString;
 
     winrt::Uri uri{Microsoft::Common::Unicode::Utf8ToUtf16(uriString)};

vnext/ReactUWP/Views/Image/ImageViewManager.cpp

@@ -24,9 +24,9 @@ using namespace Windows::UI::Xaml::Controls;
 
 // Such code is better to move to a seperate parser layer
 template <>
-struct json_type_traits<react::uwp::ImageSource> {
-  static react::uwp::ImageSource parseJson(const folly::dynamic &json) {
-    react::uwp::ImageSource source;
+struct json_type_traits<react::uwp::ReactImageSource> {
+  static react::uwp::ReactImageSource parseJson(const folly::dynamic &json) {
+    react::uwp::ReactImageSource source;
     for (auto &item : json.items()) {
       if (item.first == "uri")
         source.uri = item.second.asString();
@@ -81,7 +81,7 @@ class ImageShadowNode : public ShadowNodeBase {
 
     m_onLoadEndToken = reactImage->OnLoadEnd([imageViewManager{static_cast<ImageViewManager *>(GetViewManager())},
                                               reactImage](const auto &, const bool &succeeded) {
-      ImageSource source{reactImage->Source()};
+      ReactImageSource source{reactImage->Source()};
 
       imageViewManager->EmitImageEvent(reactImage.as<winrt::Grid>(), succeeded ? "topLoad" : "topError", source);
       imageViewManager->EmitImageEvent(reactImage.as<winrt::Grid>(), "topLoadEnd", source);
@@ -143,7 +143,7 @@ void ImageViewManager::UpdateProperties(ShadowNodeBase *nodeToUpdate, const foll
     UpdateCornerRadiusOnElement(nodeToUpdate, grid);
 }
 
-void ImageViewManager::EmitImageEvent(winrt::Grid grid, const char *eventName, ImageSource &source) {
+void ImageViewManager::EmitImageEvent(winrt::Grid grid, const char *eventName, ReactImageSource &source) {
   auto reactInstance{m_wkReactInstance.lock()};
   if (reactInstance == nullptr)
     return;
@@ -161,9 +161,13 @@ void ImageViewManager::setSource(winrt::Grid grid, const folly::dynamic &data) {
   if (instance == nullptr)
     return;
 
-  auto sources{json_type_traits<std::vector<ImageSource>>::parseJson(data)};
+  auto sources{json_type_traits<std::vector<ReactImageSource>>::parseJson(data)};
   sources[0].bundleRootPath = instance->GetBundleRootPath();
 
+  if (sources[0].packagerAsset && sources[0].uri.find("file://") == 0) {
+    sources[0].uri.replace(0, 7, sources[0].bundleRootPath);
+  }
+
   auto reactImage{grid.as<ReactImage>()};
 
   EmitImageEvent(grid, "topLoadStart", sources[0]);

vnext/ReactUWP/Views/Image/ImageViewManager.h

@@ -19,7 +19,7 @@ class ImageViewManager : public FrameworkElementViewManager {
   folly::dynamic GetExportedCustomDirectEventTypeConstants() const override;
   folly::dynamic GetNativeProps() const override;
   facebook::react::ShadowNode *createShadow() const override;
-  void EmitImageEvent(winrt::Windows::UI::Xaml::Controls::Grid grid, const char *eventName, ImageSource &source);
+  void EmitImageEvent(winrt::Windows::UI::Xaml::Controls::Grid grid, const char *eventName, ReactImageSource &source);
 
  protected:
   XamlView CreateViewCore(int64_t tag) override;