Older versions (leaves this page)
React Native RN C++ C++

Image

Properties

Property Supported Supported on Roku Dynamic on Roku Notes
style Partial Partial Unknown “borderRadius” property not supported on Roku
blurRadius ~x ~x Not Possible  
onLoad ~v ~x N/A  
onLoadEnd ~v ~x N/A  
onLoadStart ~v ~x N/A  
source ~v ~v ~v No support for cache.
For details on Roku support, see Roku Cloud Solution Fundamentals.
loadingIndicatorSource ~x ~x N/A  
onError ~v ~x N/A  
testID ~v ~v N/A  
resizeMode ~x Partial ~v You.i TV recommends to not use resizeMode as an Image component’s prop, but as an ImageStyle prop.
resizeMethod ~x ~x Not Possible  
accessibilityLabel ~v ~v Not Possible  
accessible ~v ~v Not Possible  
capInsets ~x ~x Not Possible  
defaultSource ~x ~x Not Possible  
onPartialLoad ~x ~x Not Possible  
onProgress ~x ~x Not Possible  
fadeDuration ~x ~x Not Possible  
progressiveRenderingEnabled ~x ~x Unknown  

Methods

Method Supported Supported on Roku Dynamic on Roku Notes
prefetch ~x ~x N/A  
getSize ~v ~v N/A  
abortPrefetch ~x ~x N/A  
queryCache ~x ~x N/A  
resolveAssetSource ~x ~x N/A  

Static Images

Place static images in the project sub-folder AE/assets/drawable/default and specify the source uri in your Image component. Note that when using images from a URI, the image’s dimensions must be specified.

<View>
  <Image
    style={{
      width: 75,
      height: 75,
      resizeMode: 'contain',
    }}
    source={{ uri: 'res://drawable/default/youi_logo_red.png' }}
  />
</View>

URI Data Images

Inline base64-encoded images are also supported. We recommend you use uri data images for small or dynamic images only, when other types can’t be used. Like other network-based images, don’t forget to specify dimensions for your image. Note that specifying the mime type is optional. You.i Platform determines the actual type from the encoded data.

<View>
  <Image
    style={{
      width: 75,
      height: 75,
      resizeMode: 'contain',
    }}
    source={{
      uri:
        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
    }}
  />
</View>