react-native-fast-image - Amazon Vega Docs

The @amazon-devices/react-native-fast-image library provides support on Vega for react-native-fast-image, which provides a performant React Native image component. React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built in caching behavior you’d have in a browser. Even so many people have noticed:

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 app-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. Check the original library documentation for more info about this library, API reference and more here: README.md.

Installation

Add the JavaScript library dependency in the package.json file. Select the tab for your React Native version.

React Native 0.72
React Native 0.83

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

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

Reinstall dependencies using the npm install command.

Examples

import FastImage from '@amazon-devices/react-native-fast-image'

export const App = () => (
    <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

Component API

Prop	Description	Default
`source`	Source for the remote image to load.	None
`source.uri`	Remote URL from where you load an image,, such as ''.	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` - Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding) `FastImage.resizeMode.cover` - Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding) `FastImage.resizeMode.stretch` - Scale width and height independently, This may change the aspect ratio of the src `FastImage.resizeMode.center` - Do not scale the image, keep 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 was successful or 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.

Exceptions on Vega

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

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

Backward compatibility issue

OS from v0.12 release is 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 the v0.12+ OS, you will 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 avoid this crash, you must rebuild it against the latest version of @amazon-devices/react-native-fast-image:

Check that your app’s package.json doesn’t hardcode an old version for fast-image. Use semvar version ^3.0.0 to allow your app to pick up the latest patch.
Delete package-lock.json to remove any locked fast-image version. You can also manually delete the entry for @amazon-devices/react-native-fast-image in package-lock.json if you’re relying on this file to lock other dependencies.
Delete the node_modules folder so npm won’t pick up an old cached version.
Rebuild.

Additional resources

For information about other libraries, see Supported Third-Party Libraries and Services.

​Installation

​Examples

​API reference

​Component API

​Methods

​Exceptions on Vega

​Backward compatibility issue

​Additional resources