Trying to use wavesurfer.js with ReactNative but get Can't find variable: document

Question

I'm trying to integrate wavesurfer.js (http://wavesurfer-js.org/docs/) into a ReactNative app but I'm getting a Component Exception: Can't find variable: document.

I understand that ReactNative is a framework and does not expose the DOM so I'm wondering is there a way of wrapping the wavesurfer.js code to make it work with ReactNative or do I have to change the wavesurfer.js code itself, and if so, how?

The salient parts of my App.js file is:


    import React from 'react';
    import { Appbar } from 'react-native-paper';
    import { Button } from 'react-native-paper';
    import Icon from 'react-native-vector-icons/MaterialIcons';
    import { Colors } from 'react-native-paper';
    import WaveWrapper from './wavewrapper.js';

    const App: () => React$Node = () => {
      return (
    //..
    <View style={styles.eqContainer} nativeID="eqview">
        <WaveWrapper />
    </View>
    //..
      );
    };
    export default App;

The wavewrapper.js file is:


    import WaveSurfer from './wavesurfer.js';
    import { Text, View } from 'react-native';
    import React from 'react';

    class WaveWrapper extends React.Component {

      componentDidMount() {

        const wavesurfer = WaveSurfer.create({
            container: "eqview",
          });

      }

      render() {
          return (
            <View ref={"eqview"}>

            </View>
          );
     }
    }

    export default WaveWrapper;

I'm pretty sure I've got the 'ref' handling wrong here too, so any help on this would be appreciated also. And examples of what causes the component exception in the wavesurfer.js file (references to the document object) are:


    _this.container = 'string' == typeof params.container ?    document.querySelector(_this.params.container) : _this.params.container;

    _this.mediaContainer = document.querySelector(_this.params.mediaContainer);

So once again, is there any way to use wavesurfer.js without adjusting its code? And if not, what changes would I have to make to it?

Any help would be most gratefully received.

Nick

Mertcan Seğmen Mertcan Seğmen · Accepted Answer · 2020-07-10T22:16:00

As I understand wavesurfer.js is some sort of a voice visualization library that is built on top of canvas element. So I don't think you can use it on React Native. You can probably use it in a WebView. WebViews come in handy when it comes to some SVG/canvas rendering for charts.

Trying to use wavesurfer.js with ReactNative but get Can't find variable: document

2 Answers