react-native: With React-Native, SSE aka EventSource does not receive Events on Android

Try to disable Flipper network interceptor. Go to android/app/src/debug/java//ReactNativeFlipper.java and comment next lines of code:

  // try to comment this code
  NetworkingModule.setCustomClientBuilder(
    new NetworkingModule.CustomClientBuilder() {
      @Override
      public void apply(OkHttpClient.Builder builder) {
        builder.addNetworkInterceptor(new     FlipperOkhttpInterceptor(networkFlipperPlugin));
      }
    }
  );

In case you are using expo SDK 50, you could try with the plugins i’ve developed to patch the Android SSE issues while in debug variant (both are needed):

• react-native: comment out flipper
• expo: patch ChromeDevTools Interceptor

expo-sse-patch

Edit: note to the react-native team, perhaps the flipper issue is caused by the same type of problem as described there: https://github.com/expo/expo/issues/27526 ?

hey guys, I found these interesting library, to try to solve the android problem with pure js solution:

• https://github.com/NepeinAV/rn-eventsource-reborn (a fork of rn-eventsource)
• https://github.com/NepeinAV/react-sse-hooks

Try to disable Flipper network interceptor. Go to android/app/src/debug/java//ReactNativeFlipper.java and comment next lines of code:

  // try to comment this code
  NetworkingModule.setCustomClientBuilder(
    new NetworkingModule.CustomClientBuilder() {
      @Override
      public void apply(OkHttpClient.Builder builder) {
        builder.addNetworkInterceptor(new     FlipperOkhttpInterceptor(networkFlipperPlugin));
      }
    }
  );

The flipper network interceptor was in fact responsible for react-native-sse not working on Android. The above did not work for me, but the following did. In this code, I have added a boolean variable shouldAddInterceptor that you can set based on your conditions. If shouldAddInterceptor is true, the interceptor will be added. If false, it won’t be added. You will need to replace shouldAddInterceptor with your condition for whether or not to add the Flipper network interceptor:

` public class ReactNativeFlipper { public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) { if (FlipperUtils.shouldEnableFlipper(context)) { final FlipperClient client = AndroidFlipperClient.getInstance(context);

  client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
  client.addPlugin(new DatabasesFlipperPlugin(context));
  client.addPlugin(new SharedPreferencesFlipperPlugin(context));
  client.addPlugin(CrashReporterPlugin.getInstance());

  NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
  
  boolean shouldAddInterceptor = false; // set this based on your conditions
  
  if (shouldAddInterceptor) {
    NetworkingModule.setCustomClientBuilder(
      new NetworkingModule.CustomClientBuilder() {
        @Override
        public void apply(OkHttpClient.Builder builder) {
          builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
        }
      });
  }

  client.addPlugin(networkFlipperPlugin);
  client.start();

  // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
  // Hence we run if after all native modules have been initialized
  ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
  if (reactContext == null) {
    reactInstanceManager.addReactInstanceEventListener(
        new ReactInstanceEventListener() {
          @Override
          public void onReactContextInitialized(ReactContext reactContext) {
            reactInstanceManager.removeReactInstanceEventListener(this);
            reactContext.runOnNativeModulesQueueThread(
                new Runnable() {
                  @Override
                  public void run() {
                    client.addPlugin(new FrescoFlipperPlugin());
                  }
                });
          }
        });
  } else {
    client.addPlugin(new FrescoFlipperPlugin());
  }
}

} } `

You can just copy/paste this over existing code in the ReactNativeFlipper.java file. Just leave the imports how they are at the top of the file. After this, Android received server sent events as intended with only react-native-sse and react-native-url-polyfill packages. iOS worked fine without any changes.

Do you still have a problem with this?