Fetch not working in React Native new architecture

Question

Can't seem to get fetch() working in my React Native app (should work out of the box). Using the new architecture with RN 0.70.4, TypeScript, and a setup to import ES modules.

Every time fetch() is called, this error is printed in the console:

'Tried to call timer with ID %s but no such timer exists.', 6

Using this test button:

      <Button
        title="Test"
        onPress={async () => {
          console.log('PRESSED');

          const promise = fetch('https://www.google.com');
          console.log('promise:', promise);

          try {
            const res = await promise;
            console.log('res:', res);
          } catch (err: unknown) {
            console.log('err:', err);
          }
        }}
      />

When pressed, only PRESSED appears in the console, with no other log messages. In the Flipper network panel, it looks like there is no network call made.

When I add import fetch from 'cross-fetch';, I get 2 lines of console output:

18:17:27.196  32561  appname  PRESSED
18:17:27.210  32561  appname  'promise:', { _h: 0, _i: 0, _j: null, _k: null }

but nothing after that; weirdly, though, the successful network call appears in the flipper network logs.

Any idea what's going on here?!

Answer 1

You should use async/await with fetch. You are seeing { _h: 0, _i: 0, _j: null, _k: null } because network call takes some time to execute and you are not using async/await so the response is an unresolved promise. You can also use .then and .catch