react-nativemetro-bundlerreact-native-debuggerreact-native-hermesfbflipper

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.


Solution

  • 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.