npmpackage.info

@airintservices/react-native-fast-image

🚩 FastImage, performant React Native image component.

8.6.9

8,263

MIT

TypeScript

785.00 B

2,147 2.6

Installations

npm install @airintservices/react-native-fast-image

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.18.0

NPM Version

9.2.0 Score

35.9

Supply Chain

52.4

Quality

73.7

Maintenance

Vulnerability

93.4

License

Pull Requests

Open

62

Total

339

Closed

145

Merged

132

Issues

Open

404

Total

697

Closed

293

Releases

v8.6.3

Published on 31 Oct 2022

v8.6.2

Published on 31 Oct 2022

v8.6.1

Published on 05 Sept 2022

v8.6.0

Published on 29 Aug 2022

v8.5.12

Published on 28 Aug 2022

v8.5.11

Published on 27 Sept 2021

View all 85 releases

Contributors

Unable to fetch Contributors

View all 64 contributors

Languages

TypeScript

Java

Objective-C

JavaScript

Ruby

Starlark

TypeScript (51.8%)

Java (31.39%)

Objective-C (13.93%)

JavaScript (1.29%)

Ruby (1.14%)

Starlark (0.44%)

Developer

DylanVann

Download Statistics

Total Downloads

2,147

Last Day

Last Week

Last Month

101

Last Year

1,071

GitHub Statistics

8,263 Stars

575 Commits

1,509 Forks

62 Watching

4 Branches

64 Contributors

Bundle Size

1.75 kB

Minified

785.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

8.6.9

Package Id

@airintservices/react-native-fast-image@8.6.9

Unpacked Size

97.93 kB

Size

23.23 kB

File Count

NPM Version

9.2.0

Node Version

16.18.0

Total Downloads

Cumulative downloads

Total Downloads

2,147

Last day

-77.8%

Compared to previous day

Last week

-68%

Compared to previous week

Last month

-27.3%

101

Compared to previous month

Last year

-0.5%

1,071

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-native

Dev Dependencies

@babel/core @babel/runtime @types/jest @types/react @types/react-native @types/react-test-renderer dv-scripts eslint-config-dv-scripts metro-react-native-babel-preset prettier react react-native react-test-renderer typescript

Versions

🚩 FastImage

Performant React Native image component.

FastImage example app.

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. FastImage is a wrapper around SDWebImage (iOS) and Glide (Android).

Features

Usage

Note: You must be using React Native 0.60.0 or higher to use the most recent version of react-native-fast-image.

1yarn add react-native-fast-image
2cd ios && pod install

1import FastImage from 'react-native-fast-image'
2
3const YourImage = () => (
4    <FastImage
5        style={{ width: 200, height: 200 }}
6        source={{
7            uri: 'https://unsplash.it/400/400?image=1',
8            headers: { Authorization: 'someAuthToken' },
9            priority: FastImage.priority.normal,
10        }}
11        resizeMode={FastImage.resizeMode.contain}
12    />
13)

Are you using Glide already using an AppGlideModule?

Are you using Glide already using an AppGlideModule? (you might have problems if you don't read this)

Are you using Proguard?

If you use Proguard you will need to add these lines to android/app/proguard-rules.pro:

-keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

Properties

`source?: object`

Source for the remote image to load.

`source.uri?: string`

Remote url to load the image from. e.g. 'https://facebook.github.io/react/img/logo_og.png'.

`source.headers?: object`

Headers to load the image with. e.g. { Authorization: 'someAuthToken' }.

`source.priority?: enum`

FastImage.priority.low - Low Priority.
FastImage.priority.normal (Default) - Normal Priority.
FastImage.priority.high - High Priority.

`source.cache?: enum`

FastImage.cacheControl.immutable - (Default) - Only updates if url changes.
FastImage.cacheControl.web - Use headers and follow normal caching procedures.
FastImage.cacheControl.cacheOnly - Only show images from cache, do not make any network requests.

`defaultSource?: number`

An asset loaded with require(...).
Note that like the built-in Image implementation, on Android defaultSource does not work in debug mode. This is due to the fact that assets are sent from the dev server, but RN's functions only know how to load it from res.

`resizeMode?: enum`

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 (Default) - 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.

`onLoadStart?: () => void`

Called when the image starts to load.

`onProgress?: (event) => void`

Called when the image is loading.

e.g. onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}

`onLoad?: (event) => void`

Called on a successful image fetch. Called with the width and height of the loaded image.

e.g. onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}

`onError?: () => void`

Called on an image fetching error.

`onLoadEnd?: () => void`

Called when the image finishes loading, whether it was successful or an error.

`style`

A React Native style. Supports using borderRadius.

`fallback: boolean`

If true will fallback to using Image. In this case the image will still be styled and laid out the same way as FastImage.

`tintColor?: number | string`

If supplied, changes the color of all the non-transparent pixels to the given color.

Static Methods

`FastImage.preload: (source[]) => void`

Preload images to display later. e.g.

1FastImage.preload([
2    {
3        uri: 'https://facebook.github.io/react/img/logo_og.png',
4        headers: { Authorization: 'someAuthToken' },
5    },
6    {
7        uri: 'https://facebook.github.io/react/img/logo_og.png',
8        headers: { Authorization: 'someAuthToken' },
9    },
10])

`FastImage.clearMemoryCache: () => Promise<void>`

Clear all images from memory cache.

`FastImage.clearDiskCache: () => Promise<void>`

Clear all images from disk cache.

Troubleshooting

If you have any problems using this library try the steps in troubleshooting and see if they fix it.

Development

Follow these instructions to get the example app running.

Supported React Native Versions

This project only aims to support the latest version of React Native.
This simplifies the development and the testing of the project.

If you require new features or bug fixes for older versions you can fork this project.

Credits

The idea for this modules came from vovkasm's react-native-web-image package. It also uses Glide and SDWebImage, but didn't have some features I needed (priority, headers).

Thanks to @mobinni for helping with the conceptualization

Licenses

SDWebImage - MIT
Glide - BSD, part MIT and Apache 2.0. See the LICENSE file for details.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

69 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
Warn: Project is vulnerable to: GHSA-2j79-8pqc-r7x6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-2h3h-q99f-3fhc
Warn: Project is vulnerable to: GHSA-gmw6-94gg-2rc2
Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
Warn: Project is vulnerable to: GHSA-hj9c-8jmm-8c52
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-x2pg-mjhr-2m5x
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
Warn: Project is vulnerable to: GHSA-crh6-fp67-6883

Score

2.6

/10

Last Scanned on 2025-01-06

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More