Scroll view is not showing base64 images

[rjamaro]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 8.4.0
Yarn: Not Found
npm: 5.3.0
Watchman: Not Found
Xcode: N/A
Android Studio: 2.3.3

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.1 => 0.50.1

Steps to Reproduce

My application does not show base64 images inside a Scrollview

(Write your steps here:)

1. create a new react-native project
2. On index.js include App.js and put App being executed
3. Add a product json file to the project with one product and a property called products where two base64 images will be stored
4. On App.js create a function to drilll down the object and create an image array of the base64 images
5. Add a scrollview to render function
6. Inside the scroll view add a call to the image array

Expected Behavior

The expected behavior was for the images to be displayed in the scroll view as an image carousel allowing the user to scroll through all the images

Actual Behavior

The application does not display the images in the scrollview. As an apart the scrollview doesn't display images stored locally but that have the style property in the image tag.

Reproducible Demo

ScrollImage.zip

[hramos]

Can you include the information requested under Environment? Any chance you can repro this on a snack? You'll have more luck getting someone to check your code that way. Thanks!

[rjamaro]

Hi hramos,

the information about environment was there but in the wrong place. I hope know you can see it, in any case I leave the info below.

On regards you question about " any chance you can repro this on a snack", sorry, but I got lost :D what is the rerpo and what is a snack?

I already put my code on stackoverflow, but so far no feedback. In any case if you check the zip, I putted three things:
1 - an array of buttons that is ok and is displayed on the scrollview
2 - an array of images reading from a specific location and that also works
3 - an array of base64 images and that does not work

On regards the base64 image, I am using the same image in other places of the code, but as a simple image outside a scrollview and it also works.

Thanks,
Ricardo

[rjamaro]

Thanks for your feedack. I understand your point and since it is only affecting me, I believe that it can be closed. Kind regards, Ricardo

…

On Sun, Jan 7, 2018 at 6:00 PM, stale[bot] ***@***.***> wrote: This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#16695 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AF1P0UZ0NPb13u8UNCMVsBtQEhXiLMqxks5tIQYjgaJpZM4QTCBq> .

[react-native-bot]

It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

[hramos]

I took the time to attempt to reproduce this on a Snack, and did not succeed. You can see at https://snack.expo.io/rk89ME6mQ that the images are rendered when displayed inside a scroll view. The issue seems to be elsewhere in your code.

Minimal repro:

// App.js

import React, { Component } from 'react';
import { Constants } from 'expo';

import {
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
} from 'react-native';

export default class App extends Component {
  render() {
    var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=';

    return (
      <View style={styles.container}>
        <ScrollView>
          <Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>
          <Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>
          <Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>
          <Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/>          
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
		flex: 1,
	}
});