After trying out different solutions attempted to listen to different port other than 8081 for react-native metro bundler. Finally I have managed to achieve this WITHOUT the hassle of editing files such as:

RCTBridgeDelegate.h
RTCDefines.h
RCTInspectorDevServerHelper.m
RCTDevMenu.m

While this approach works, the issue with it is the changes get reset after running pod install.

So after reading alot materials, with some improvisation, I came up with the solution using Podfile.

Podfile

post_install do |installer|
  react_native_post_install(installer)
  __apply_Xcode_12_5_M1_post_install_workaround(installer)

  installer.pods_project.targets.each do |target|
    if target.name == 'React-Core'
      target.build_configurations.each do |config|
        if config.name == 'Debug'
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] = config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] + ['RCT_METRO_PORT=8089']
        end
      end
    end
  end
end

Metro server

npx react-native start --port=8089

That's it! Now, run pod install and run the app and it will be listening to port 8089.

For Android, change the dev server setting from your device and it is reload the app. This part will not be covered in this article because there are alot of online resources that works perfectly.

Hope it helps.

Cheers.