title: react native can't subscribe to mercure backend notifications
body: <p>I'm working on a notifications system with React Native and Symfony.
  I configured Mercure with docker to handle front subscription to real time updates : 
  the .env file : </p>
  
  <pre><code>###&gt; symfony/mercure-bundle ###
  # See https://symfony.com/doc/current/mercure.html#configuration
  MERCURE_PUBLISH_URL=http://mercure.localhost/.well-known/mercure
  # The default token is signed with the secret key: !ChangeMe!
  MERCURE_JWT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.9-LscFk3QfdDtZ4nyg6BiH4_qDm6pbYHydURBMsDgEc
  ###&lt; symfony/mercure-bundle ###
  </code></pre>
  
  <p>mercure.yaml:</p>
  
  <pre><code>mercure:
      enable_profiler: '%kernel.debug%'
      hubs:
          default:
              url: '%env(MERCURE_PUBLISH_URL)%'
              jwt: '%env(MERCURE_JWT_TOKEN)%'
  </code></pre>
  
  <p>I created a Notifications component in my React Native application and i use the code in the official documentation of symfony mercure:
  <a href="https://symfony.com/doc/4.3/mercure.html#subscribing" rel="nofollow noreferrer">https://symfony.com/doc/4.3/mercure.html#subscribing</a>
  Notifications.js code : </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text } from 'react-native';
  
  export default class Notifications extends Component {
      constructor(props) {
          super(props);
          this.state = {
          };
      }
  
      componentDidMount() {
          const url = new URL('http://mercure.localhost/.well-known/mercure');
          url.searchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');
  
          url.searchParams.append('topic', 'http://example.com/books/1');
          const eventSource = new EventSource(url);
  
          eventSource.onmessage = e =&gt; console.log(e);
      }
  
      render() {
          return (
              &lt;View&gt;
                  &lt;Text&gt; Notifications &lt;/Text&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>I tested with Postan and i get a valid response : 
  <a href="https://i.stack.imgur.com/cFgR3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cFgR3.png" alt="Postman test mercure"></a></p>
  
  <p>And i tried the javaScript code in a html file for testing :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  const url = new URL('http://mercure.localhost/.well-known/mercure');
  url.searchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');
  
  url.searchParams.append('topic', 'http://example.com/books/1');
  const eventSource = new EventSource(url);
  
  eventSource.onmessage = e =&gt; console.log(e); 
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And i get a real time response when i run request with Postman : 
  <a href="https://i.stack.imgur.com/JuX91.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JuX91.png" alt="console log in html file"></a>
  My problem is that URL, searchParams and eventSource are not compatible with react native.
  How can i transform this javaScript code to react native valid code ?
  I tried to install some librairies : whatwg-url, buffer, react-native-event-source and my current code is : </p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text } from 'react-native';
  
  import { URL, URLSearchParams } from 'whatwg-url';
  import { Buffer } from 'buffer';
  import RNEventSource from 'react-native-event-source';
  
  export default class Notifications extends Component {
    constructor(props) {
      super(props);
      this.state = {
      };
    }
  
    componentDidMount() {
      global.Buffer = Buffer;
      global.URL = URL;
      global.URLSearchParams = URLSearchParams;
      global.EventSource = RNEventSource;
  
      const url = new global.URL('http://mercure.localhost/.well-known/mercure');
      url.global.URLSearchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');
  
      url.global.URLSearchParams.append('topic', 'http://example.com/books/1');
      const eventSource = new global.EventSource(url);
  
      eventSource.onmessage = e =&gt; console.log(e); 
    }
  
    render() {
      return (
        &lt;View&gt;
          &lt;Text&gt; Notifications &lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>I got this error : undefined is not an object (evaluating 'url.global.URLSearchParams')</p>