react-native-fast-image version 2.0.0

The @amazon-devices/react-native-fast-image library version 2.0.0 provides support on Vega for react-native-fast-image with a performant React Native image component. React Native’s Image component handles image caching similar to browsers. If the server is returning proper cache control headers for images, you get the built-in caching behavior you see in a browser. You might also notice:

Flickering
Cache misses
Low performance loading from cache
Low performance in general

FastImage is an Image replacement that solves these issues on other platforms besides Web. This library is system-deployed and available to React Native for Vega apps without a separate installation process. The library is autolinking, which your app links to at runtime. The library is guaranteed to be compatible only with the version of React Native for Vega for which it’s built. When you uplevel your app’s version of React Native for Vega, consider the best practice of upleveling its library dependencies. For more information about this library and its API, see the README.md file in the FastImage GitHub repo.

Installation

Add the JavaScript library dependency in the package.json file:

"dependencies": {
   ...
   "@amazon-devices/react-native-fast-image": "~2.0.0"
}

Reinstall dependencies using the npm install command.

Examples

import FastImage from 'react-native-fast-image'

const YourImage = () => (
    <FastImage
        style={{ width: 200, height: 200 }}
        source={{
            uri: 'https://unsplash.it/400/400?image=1',
            headers: { Authorization: 'someAuthToken' },
            priority: FastImage.priority.normal,
        }}
        resizeMode={FastImage.resizeMode.contain}
    />
)

API reference

Components

Prop	Description	Default
`source`	Source for the remote image to load.	None
`source.uri`	Remote URL to load the image from. For example, ''.	None
`source.priority`	`FastImage.priority.low` - Low Priority `FastImage.priority.normal` - Normal Priority `FastImage.priority.high` - High Priority	`FastImage.priority.normal`
`resizeMode`	`FastImage.resizeMode.contain` - Scales the image uniformly (maintains the image’s aspect ratio) so that both dimensions (width and height) of the image are equal to or less than the corresponding dimension of the view (minus padding). Ensures the entire image is visible, which might leave empty space. `FastImage.resizeMode.cover` - Scales the image uniformly (maintains the image’s aspect ratio) so that both dimensions (width and height) of the image is equal to or larger than the corresponding dimension of the view (minus padding). Ensures the container is entirely filled, which might crop some of the image. `FastImage.resizeMode.stretch` - Scales width and height independently, which might change the aspect ratio of the source. `FastImage.resizeMode.center` - Doesn’t scale the image, keeps it centered.	`FastImage.resizeMode.cover`
`onFastImageLoadStart`	Called when the image starts to load.	None
`onFastImageLoad`	Called on a successful image fetch. Called with the width and height of the loaded image.	None
`onFastImageError`	Called on an image fetching error.	None
`onFastImageLoadEnd`	Called when the image finishes loading, whether it’s successful or has an error.	None

Methods

Method	Description
`preLoad`	Preload images to display later.
`clearMemoryCache`	Clear all images from memory cache.
`clearDiskCache`	Clear all images from disk cache.

Known issues and limitations

The React Native for Vega library has a few exceptions in terms of API support. The following features aren’t supported on the Vega platform.

source.headers
source.cache
tintColor
defaultSource
onFastImageProgress (Has issues with the dependency Image.onProgress.)

Backward compatibility issue

Vega OS versions v0.12, OS 1.1 (201010334050), and higher are not compatible with amzn/react-native-fast-image (npm package) versions . When running an app built against an old version of the npm package on versions v0.12 and higher of the OS, you see the following crash on startup:

Volta:Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'FastImageTurboModule' could not be found. Verify that a module by this name is registered in the native binary.

To fix this, you must rebuild your app against the latest version of @amazon-devices/react-native-fast-image:

Make sure that your app’s package.json does not hardcode any old version of fast-image. Recommended to use SemVar version ~2.0.0 to allow your app to pick up the latest patch.
Delete package-lock.json to remove any locked fast-image version. If you are relying on package-lock.json to lock other dependencies, you can manually delete the entry for @amazon-devices/react-native-fast-image.
To make sure that npm doesn’t pick up an old cached version, delete the node_modules folder.
Rebuild your app.

Supported versions

Package Version	Based On	@amazon-devices/react-native-kepler version
2.0.x	8.6.3	2.0.x

Supported Third-Party Libraries and Services.

​Installation

​Examples

​API reference

​Components

​Methods

​Known issues and limitations

​Backward compatibility issue

​Supported versions

​Related topics