react-native-fast-image version 3.0.0

The @amazon-devices/react-native-fast-image version 3.0.0 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 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 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 the 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 documentation for more information about this library and API reference: README.md.

Installation

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

"dependencies": {
   ...
   "@amazon-devices/react-native-fast-image": "~3.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	Supported
`source`	Source for the remote image to load.	None	✅ Yes
`source.uri`	Remote URL from where you load an image, for example .	None	✅ Yes
`source.priority`	`FastImage.priority.low` - Low Priority `FastImage.priority.normal` - Normal Priority `FastImage.priority.high` - High Priority	`FastImage.priority.normal`	✅ Yes
`resizeMode`	`FastImage.resizeMode.contain` - Scales the image uniformly (maintain aspect ratio) so that width and height 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` - Scale the image uniformly (maintain aspect ratio) so that width and height are 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` - Scale width and height independently, which might change the aspect ratio of the src. `FastImage.resizeMode.center` - Doesn’t scale the image, keeps it centered.	`FastImage.resizeMode.cover`	✅ Yes
`onFastImageLoadStart`	Called when the image starts to load.	None	✅ Yes
`onFastImageLoad`	Called on a successful image fetch. Called with the width and height of the loaded image.	None	✅ Yes
`onFastImageError`	Called on an image fetching error.	None	✅ Yes
`onFastImageLoadEnd`	Called when the image finishes loading, whether it’s successful or has an error.	None	✅ Yes
source.headers	Allows the passing an object of key-value pairs for authenticated requests.		❌ No
`source.cache`	Sets the cache policy.		❌ No
`tintColor`	Colorizes icons and images.		❌ No
`defaultSource`	Displays a placeholder image while a main image source is loading.		❌ No
`onFastImageProgress`	Tracks the progress of an image loading. Has issues with the dependency `Image.onProgress`.		❌ No

Methods

Method	Description
`preLoad`	Preloads images to display later.
`clearMemoryCache`	Clears all images from the memory cache.
`clearDiskCache`	Clears all images from the disk cache.

Known issues and limitations

Backward compatibility issue

OS from the v0.12 release isn’t compatible with amzn/react-native-fast-image (npm package) versions .
When running an app on the v0.12+ OS (old version of the npm package), the app crashes 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:
1. Check that your app’s package.json doesn’t hardcode an old version for fast-image. Use SemVar version ^3.0.0, so that your app can pick up the latest patch.
2. 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.
3. Delete the node_modules folder, so npm won’t pick up an old cached version.
4. Rebuild the app.

Supported versions

Package Version	Based On	@amazon-devices/react-native-kepler version
3.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