CODEWITHSUNDEEP
react-nativemetro-bundlerreact-native-debuggerreact-native-hermesfbflipper
Manish Mahajan
Manish Mahajan

Reputation: 1170

Flipper plugins not working with react-native app

I have react-native application in which I am using port 8383 port (I CAN NOT use default port 8081) for metro bundler. While debugging app with Flipper it's showing most of the plugins like Hermes/react dev-tool etc are not available.
After reading documentation, I believe using correct port for flipper should resolve it. If there is any other solution please let me know.

how can I update metro port for Flipper Mac app?

It's not clear how to follow instructions from link https://fbflipper.com/docs/custom-ports/
In which directory should I execute commands provided in link above?

I tried running npx flipper-server --port 8383 in browser but it did not work either.

Upvotes: 1

Views: 9284

Answers (2)

Manish Mahajan
Manish Mahajan

Reputation: 1170

As 8081 port was not available, I had to update Metro bundler port to 8383. After this I was not able to use Flipper plugins as Flipper was still referring to old Metro bundler port.

To fix this I created alias in .bash_profile

alias FlipperApp='env METRO_SERVER_PORT=8383 FLIPPER_PORTS=8383 /Applications/Flipper.app/Contents/MacOS/Flipper'

another alternative for Flipper Mac app is to use flipper in browser.

alias FlipperWeb='env METRO_SERVER_PORT=8383 npx flipper-server'

To launch flipper just used new alias and it worked.

Upvotes: 2

hong developer
hong developer

Reputation: 13926

There is an answer to the link you suggested. The document says as follows.

The execution path of these instructions is your project root path.

  • Native interior setting. (your chosen ports 1111,2222 like so)
  • Android
adb shell su 0 setprop flipper.ports 1111,2222
  • IOS
xcrun simctl spawn booted defaults write "Apple Global Domain" "com.facebook.flipper.ports" -string "1111,2222"
  • build setting
env FLIPPER_BROWSER_PORT=1111 yarn start or npm run start

Upvotes: 0

Related Questions