How to use with React Native & Expo?

I have used wdyr with my RN Expo app in the past, maybe a year ago, but now it is not showing anything in the logs. Any help would be greatly appreciated!

I created a new RN Expo app to use as a simplistic, reproducible example: expo init wdyr-test and choose option for blank project (managed workflow).

App.js

import './wdyr'; // <--- first import

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {

  const [count, setCount] = useState(0);

  const onPress = () => {
    console.log("Increment Pressed");
    setCount(prev => prev + 1);
  }

  console.log("App RENDER");

  return (
    <View style={styles.container}>

      <Text>{count}</Text>
      <Button title="Increment" onPress={onPress} />

      <Subcomponent style={{ height: 100, width: 100, borderRadius: 50, backgroundColor: "blue" }} />

    </View>
  );
}

const Subcomponent = React.memo(({ style }) => {

  console.log("Subcomponent RENDER");

  return (
    <View style={style} />
  )
});
Subcomponent.whyDidYouRender = true;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    margin: 50
  },
});

wdyr.js

import React from 'react';

if (__DEV__) {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

package.json

{
  "name": "wdyr-test",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-web": "0.17.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@welldone-software/why-did-you-render": "^6.2.3"
  },
  "private": true
}

I don’t know much (anything) about babel so just tried this for my bable.config.js but there was no change:

module.exports = function (api) {
  api.cache(true);

  const isDev = process.env.BABEL_ENV === "development";

  return {
    presets: [
      ['babel-preset-expo',
        {
          jsxRuntime: 'automatic',
          jsxImportSource: isDev ? '@welldone-software/why-did-you-render' : 'react'
        }
      ]
    ],
  };
};

All I get is this in the logs:

App RENDER
Subcomponent RENDER
Increment Pressed
App RENDER
Subcomponent RENDER
Increment Pressed
App RENDER
Subcomponent RENDER

[mrzmyr]

@palicko actually got it working by clearing the cache as well.

Expo SDK Version 46

yarn install --dev @babel/preset-react @welldone-software/why-did-you-render

package.json

"main": "node_modules/expo/AppEntry.js",

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      "babel-preset-expo",
      [
        '@babel/preset-react',
        {
          importSource: '@welldone-software/why-did-you-render',
          runtime: 'automatic',
          development: true,
        },
      ],
    ],
    plugins: ["react-native-reanimated/plugin"],
  };
};

wdyr.js

import React from 'react';

if(__DEV__) {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });

  console.log('whyDidYouRender enabled');
}

App.tsx

import './wdyr.js'
import { StatusBar } from 'expo-status-bar';
import { View } from 'react-native';
import useCachedResources from './hooks/useCachedResources';
import Navigation from './navigation';

export default function App() {
  const isLoadingComplete = useCachedResources();
  
  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <View style={{ flex: 1 }}>
        <Navigation />
        <StatusBar />
      </View>
    );
  }
}

Run expo with clearing the cache beforehand:

expo start -c

[DarWiM]

Works for me on Expo 46 npx cross-env NODE_ENV=development expo start -c