npmpackage.info

Gathering detailed insights and metrics for react-native-fetch-api

react-native-fetch-api

A fetch API polyfill for React Native with text streaming support.

3.0.0

MIT

JavaScript

9,783,214 2.8

Installations

npm install react-native-fetch-api

Pull Requests

Open

1

Total

5

Closed

0

Merged

4

Issues

Open

13

Total

21

Closed

8

Releases

v3.0.0

Published on 02 Aug 2021

v2.0.0

Published on 28 Jun 2021

v1.0.2

Published on 31 Jan 2021

v1.0.1

Published on 25 Jan 2021

v1.0.0

Published on 25 Jan 2021

View all 5 releases

Developer

react-native-community

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

15.10.0

NPM Version

7.5.3 Statistics

79 Stars

638 Commits

11 Forks

5 Watching

4 Branches

67 Contributors

Updated on 07 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

9,783,214

Last day

6.5%

12,309

Compared to previous day

Last week

28%

66,426

Compared to previous week

Last month

-4.5%

251,188

Compared to previous month

Last year

0.3%

3,398,423

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

fetch

A fetch API polyfill for React Native with text streaming support

This is a fork of GitHub's fetch polyfill, the fetch implementation React Native currently provides. This project features an alternative fetch implementation directy built on top of React Native's Networking API instead of XMLHttpRequest for performance gains. At the same time, it aims to fill in some gaps of the WHATWG specification for fetch, namely the support for text streaming.

In practice, this implementation is a drop-in replacement to GitHub's polyfill as it closely follows its implementation. Do not use this implementation if your application does not require to stream text.

Motivation

GitHub's fetch polyfill, originally designed with the intention to be used in web browsers without support for the fetch standard, most notably does not support the consumption of a response body as a stream.

However, as React Native does not yet provide direct access to the underlying byte stream for responses, we either have to fallback to XMLHttpRequest or React Native's networking API for iOS and Android. Currently, only strings can be transfered through the bridge, thus binary data has to be base64-encoded (source) and while React Native's XHR provides progress events to receive incremental data, it concatenates the response string as data comes in. Although very inefficient, the response can be sliced up, each chunk encoded into its UTF-8 representation with TextEncoder and finally enqueued to the stream.

Instead of relying on XMLHttpRequest, which degrades performance, we remove it out of the equation and have fetch interact with React Native's Networking API directly instead. To make Response.body work, ReadableStream's controller was integrated with native progress events. It's important to stress that progress events are only fired when the native response type is set to text (https://github.com/facebook/react-native/blob/v0.63.4/Libraries/Network/RCTNetworking.mm#L544-L547), therefore limiting streaming to text-only transfers. If you wish to consume binary data, either blob or base64 response types have to be used. In this case, the downside is that the final response body is read as a whole and enqueued to the stream's controller as a single chunk. There is no way to read a partial response of a binary transfer.

For more context, read the following:

https://github.com/react-native-community/discussions-and-proposals/issues/99

Requirements

React Native v0.62.0+ is the minimum version supported where the Networking API has been made public.

This implementation depends on the following web APIs which are not currently available in React Native:

It should be possible remove the dependency on TextEncoder and TextDecoder, but not on ReadableStream. Either way, beware the bundle size of your application will inevitable increase.

To polyfill the above APIs, use react-native-polyfill-globals.

Install

$ npm install react-native-fetch-api --save

Setup

The APIs provided by GitHub's implementation in React Native have to be replaced by those provided by this implementation. To do so, check and install react-native-polyfill-globals and follow the instructions therein.

Usage

No need to import anything after the setup is done. All APIs will be available globally.

Example:

1fetch('https://jsonplaceholder.typicode.com/todos/1')
2  .then(response => response.json())
3  .then(json => console.log(json))

Check fetch's official documentation to learn more about the concepts and extended usage.

Enable text streaming

A non-standard option was added to fetch to enable incremental events in React Native's networking layer.

1fetch('https://jsonplaceholder.typicode.com/todos/1', { reactNative: { textStreaming: true } })
2  .then(response => response.body)
3  .then(stream => ...)

Aborting requests

It's possible to abort an on-going request and React Native already supports AbortController, so there is no need for a polyfill.

1const controller = new AbortController();
2
3fetch('https://jsonplaceholder.typicode.com/todos/1', { signal: controller.signal })
4  .then(response => response.json())
5  .then(json => console.log(json))

Learn more about aborting fetch at https://developers.google.com/web/updates/2017/09/abortable-fetch.

Cookies

There is no concept of Cross-Origin Resource Sharing (CORS) in native apps. React Native only accepts a boolean value for the credentials option. As such, to send cookies you can either use same-origin and include.

The Set-Cookie response header returned from the server is a forbidden header name and therefore can't be programmatically read with response.headers.get(). Instead, the platform's native networking stack automatically manages cookies for you.

If you run into issues with cookie-based authentication, read the following:

Alternatively, you may consider using the react-native-cookies.

Request caching directive

The only values supported for the cache option are no-cache and no-store and Both achieve exactly the same result. All other values are ignored. Following GitHub's implementation, a cache-busting mechanism is provided by using the query parameter _ which holds the number of milliseconds elapsed since the Epoch when either no-cache or no-store are specified.

Redirect modes directive

The fetch specification defines these values for the redirect option: follow (the default), error, and manual. React Native does not accept such option but it does transparently follow a redirect response given the Location header for 30x status codes.

Tests

To run the test suite, you must use react-native-test-runner CLI. Run the run-tests.js wrapper script to spin up a local HTTP server to execute the networking tests against.

iOS

$ ./run-tests.js --platform ios --simulator '<simulator>' test/index.js

Where <simulator> can be a combination of a device type and iOS version, e.g. iPhone 11 (14.1), or a device UUID. Check which simulators are available in your system by running the following command:

$ xcrun xctrace list devices

Android

$ ./run-tests.js --platform android --emulator '<emulator>' test/index.js

Where <emulator> is the name of the Android Virtual Device (AVD), e.g. Pixel_API_28_AOSP. Check which emulators are available in your system by running the following command:

$ emulator -list-avds

No vulnerabilities found.

10

Dangerous-Workflow

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

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

4

Pinned-Dependencies

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

Reason

dependency not pinned by hash detected -- score normalized to 4

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:78: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/node-ci.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:102: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:105: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:110: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:140: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:146: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node-ci.yml:159: update your workflow using https://app.stepsecurity.io/secureworkflow/react-native-community/fetch/node-ci.yml/master?enable=pin
Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 3 out of 3 npmCommand dependencies pinned

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

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

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

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2024-11-18

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

react-native-fetch-api

Installations

Pull Requests

1

5

0

4

Issues

13

21

8

Releases

Developer

react-native-community

Developer Guide

CommonJS

No

15.10.0

7.5.3

Statistics

Languages

Total Downloads

9,783,214

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

fetch

Motivation

Requirements

Install

Setup

Usage

Enable text streaming

Aborting requests

Cookies

Request caching directive

Redirect modes directive

Tests

iOS

Android

10

10

10

4

0

0

0

0

0

0

0

0

0

2.8

/10