What does the variable "window" represent in react native?

Question

I'm looking at some code for react native fetch blob https://github.com/joltup/react-native-fetch-blob and I see in their example to call window.Blob, etc..

Is Window a global variable like you would see in a browser web environment? Or does it represent the current viewable screen in some way? Is the below code example just replacing/overriding a global object?

const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

Solution

React Native defines a few globals (all under global) that are polyfilled so certain libraries that were originally developed for the browser can be used without failing. Most of the polyfills for familiar browser APIs are empty. You can see them all in InitializeCore.js.

window though is not empty. It's set to global:

if (global.window === undefined) {
  global.window = global;
}

So the next question is, what is Blob in global?

Blob is a property that is added to global using the polyfillGlobal function. If you're curious about how that works, you can look at the PolyfillFunctions.js file. Blob itself is defined in Blob.js.

polyfillGlobal('Blob', () => require('Blob'));

So now that we see what React Native is doing, we can loop back to your questions:

• Is Window a global variable like you would see in a browser web environment?
  • Yes, it's a global variable that is a property of global that is set to equal global.
• Or does it represent the current viewable screen in some way?
  • Nope. It represents whatever React Native wants it to represent.
• Is the below code example just replacing/overriding a global object?
  • Yes. It's replacing window.XMLHttpRequest and window.Blob with react-native-fetch-blob's own implementation.

Comments

[james murphy]

When I run code "window.Blob = Blob;"....I get error "window is not defined"