Displaying image from thumbnailPath

[bradbyte]

Hello,

I've been trying without any success to display the thumbnail of the contact in an Image. It seems the isStatic prop that used to fix this in prior versions is no longer supported. I
ve prefixed file:// and file:/ (since the first char of the returned path is /). I'm not getting any errors, just not seeing an image. Also setting the height and width in the source object and style.

Here's an example path:
/var/mobile/Containers/Data/Application/0C02FA52-38D9-485A-BA06-E9544673CB21/tmp/thumbimage_7bZzp

Thanks for any suggestions!

[bradbyte]

I'm not sure if this has anything to do with React no longer using the isStatic flag on the image source, but I was able to get this working via the standard uri prop by adding an extension to the temp files. I also did not need to prepend the file://.

Added to the getABPersonThumbnailFilepath before writing the file:
tempfilePath = [tempfilePath stringByAppendingString:@".png"];

Possible PR candidate?

[ghost]

I'm confused.
The plugin returns to me a thumbnailPath that looks like this: content://com.android.contacts/contacts/3992/photo

I then use that URI as such
<Image source={{uri: contact.thumbnailPath}} style={styles.thumbnail} />

I still dont' get any results! Tips?

[rt2zz]

Did you try isStatic={true}?

This issue and the corresponding fix from #23 was specific to iOS. There may be a similar issue going on for the android paths which also do not have a file type suffix. Unlike in iOS however we are not in control of the android file name which means fixing this will likely require figuring out why react-native is not displaying images without a type suffix.

What version of react-native are you using?

[bradbyte]

I'm on 0.15.0, it seems though that isStatic={true} isn't supported anymore? facebook/react-native#755. Has anyone verified if thumbnail paths work as is with the current RN version (0.17)?

[morenoh149]

this may require enhancing the core Image module in react native to load images from Media (on android) https://github.com/facebook/react-native/blob/edc318fcb9c2360e67dfa3d2d48462d6bacda3c0/Libraries/Image/Image.ios.js#L176

MediaStore.Images.Media#getBitmap()

[bradbyte]

Did some more digging... from the UIImageClass docs (under Special Considerations) it seems that if the file type is PNG then you don't need to specify an extension, otherwise you do. So, it's possible that the thumbnails are not PNG's and so they were not being displayed, but adding a prefix worked. I guess the next thing to do is figure out what type they are stored as.

[bradbyte]

It looks like it just writes the NSData to the file... it's not 'typed'... however, you can call
NSData* pngImage = [NSData dataWithData:UIImagePNGRepresentation(image)];
to save the raw image as a png type. When I tried this I still couldn't get an image to display without appending .png. SO, unless something changes to the core <Image/> it seems we have to append the extension. The question is whether to just leave as is (#23 -- manually adding an extension) or converting the data into a PNG file and still setting the extension.

I'm not sure how this pans out for Android...

Thoughts?

[rt2zz]

Hm, thanks for figuring all that out.

It would seem like more work needs to be done to enforce consistency in <Image /> or at least log warnings. In the mean time I am happy with the patch as is.

Android is a different beast since we do not need to copy the image to disk at all (we just retrieve the path to a pre-existing thumbnail). Fixing android thumbnails I think will require changes to Image upstream.

Lets leave this open for further discussion / updates

[ghost]

@morenoh149 so until that gets patched in the Image module, how am i supposed to do it for android right now?

[morenoh149]

@Turg0n no clue

[tomauty]

This is a snippet that worked for me (in RN 0.18, iOS).

if (rowData.thumbnailPath) {
    return (
        <Image
            style={[styles.image]}
            source={{ uri: rowData.thumbnailPath }}
            defaultSource={require('./../../assets/images/profile_empty.png')}
            width={40}
            height={40}
        />
    );
}

[bradbyte]

Interesting... I thought they stripped out `isStatic: true`?

[tomauty]

Yes, it seems that's the case. I'll update my snippet above.

[npomfret]

Can we close this?

[supriyamalusare]

Hello ,
We are using react-native contacts plugin.
In android , We are receiving thumbnail path as content://com.android.contacts/contacts/537/photo.

We have used following code to render contact image -
<Image source={{ uri: "content://com.android.contacts/contacts/537/photo" }} />

But It is not displaying Contact Image.
It would be great if you please tell what I am doing wrong.

[morenoh149]

@supriyamalusare no clue. Please open a new issue to track.

[dachir]

you just need to ask width and height to make it worked.
<Image source={{ uri: "content://com.android.contacts/contacts/537/photo" }}, width:48,height:48 />

[rajAmukhliS]

in react-native-contacts we get thumbnailPath which contains image uri of that contact.
For displaying in your app u have to just map that data in way u want and if you want to display image do as I did under

{item.thumbnailPath ? (
          <Image
            source={{uri: item.thumbnailPath}}
            style={{
              height: 20,
              width: 20,
            }}
          />
        ) : (
// here u can display a icon of profile etc
        )}