CODEWITHSUNDEEP
javascriptreact-native
jackflannery
jackflannery

Reputation: 133

React Native - document is not defined

I am porting a mobile app from Cordova to React Native. The Cordova app depends on a 3rd party JavaScript library Kandy.Io

This library makes use of the global document object. When I import that library into my React Native project, I see the error :

document is not defined

I understand that there is no DOM like in a browser environment, but is there any way to use the document object in a React Native project so that I can continue using this library?

Upvotes: 4

Views: 6739

Answers (1)

robertjuh
robertjuh

Reputation: 311

I had the 'document is not defined' when using react native webgl with threejs.

Short summary: the Textureloader didnt work because it required an imageloader which required the inaccesible DOM.

Apparantly there's a THREE.Texture function which i used like this:

let texture = new THREE.Texture(
     url //URL = a base 64 JPEG string in this case     
     );

var img = new Image(128, 128);
img.src = url;
texture.normal = img;

As you can see i used an Image constructor, this is from React Native and is imported like this:

import { Image } from 'react-native';

In the react native documentation it will explain how it can be used, it supports base64 encoded JPEG.

You could try a similar approach in your case, so what you should do is look which function uses the document and either override that function or work around it with something react native offers

Upvotes: 1

Related Questions