From e243f078695ae510c5e9793c6cfacadce1245ac6 Mon Sep 17 00:00:00 2001
From: Andrea <andrea.lin3110@gmail.com>
Date: Fri, 15 Nov 2024 16:21:28 +0100
Subject: [PATCH] Add docs for expo managed workflows (#308)

---
 README.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/README.md b/README.md
index 2fa25bd..706e17f 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,10 @@ If you use the `automatic` JSX transformation, set the library to be the import
 }]
 ```
 
+### React Native
+
+#### Bare workflow
+
 Unfortunately, the `metro-react-native-babel-preset` that comes with react-native out of the box does not allow you to change the options of the `babel/plugin-transform-react-jsx` plugin. Just add the plugin with options as listed below and start react-native packager as usual. Default env for babel is "development". If you do not use expo when working with react-native, the following method will help you.
 
 ```js
@@ -53,6 +57,27 @@ module.exports = {
 }
 ```
 
+#### Expo managed
+
+You can pass params to `@babel/preset-react` through `babel-preset-expo`
+
+```js
+// babel.config.js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      [
+        "babel-preset-expo",
+        {
+          jsxImportSource: "@welldone-software/why-did-you-render",
+        },
+      ],
+    ],
+  };
+};
+```
+
 > Notice: Create React App (CRA) ^4 **does use the `automatic` JSX transformation.**
 > [See the following comment on how to do this step with CRA](https://github.com/welldone-software/why-did-you-render/issues/154#issuecomment-773905769)
 
@@ -112,6 +137,8 @@ Also, tracking custom hooks is possible by using `trackExtraHooks`. For example
 ```jsx
 import React from 'react';
 
+// For react-native you might want to use 
+// the __DEV__ flag instead of process.env.NODE_ENV === 'development'
 if (process.env.NODE_ENV === 'development') {
   const whyDidYouRender = require('@welldone-software/why-did-you-render');
   const ReactRedux = require('react-redux');