React Native Web Support

React-spy utilizes souce info provided inside react-fiber, the internal data structure of React. However, that information is not available in React Native Web. Therefore, additional babel configuration is required to make React-spy work with React Native Web.

1. Install Babel Plugin

Babel plugin is provided by babel-plugin-react-spy. Install it by running:

# Using npm
npm install --save-dev babel-plugin-react-spy
 
# Or using yarn
yarn add --dev babel-plugin-react-spy

2. Configure Babel

Add the plugin to your babel config. Usually it's babel.config.js, or sometimes .babelrc.

If you're using Expo Web, you should probably see the default babel.config.js file like this:

module.exports = function (api) {
  api.cache(true);
 
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'expo-router/babel',
      '@babel/plugin-proposal-export-namespace-from',
      'react-native-reanimated/plugin',
    ],
  };
};

Now add the plugin to the plugins array, but note that it should be placed at the first position of the array. The result should look like this:

module.exports = function (api) {
  api.cache(true);
 
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'babel-plugin-react-spy', // ADD THIS LINE
      'expo-router/babel',
      '@babel/plugin-proposal-export-namespace-from',
      'react-native-reanimated/plugin',
    ],
  };
};

Congratulations! You've now configured React-spy to work with React Native Web.