React Native Support?

[kamal-j]

This is a really cool project and I want to use it in a React Native app I'm currently working on. Is this compatible with RNs implementation of fetch? Are there any major issues i need to be aware of?

Thanks

[elbywan]

Hey @kamal-j,

Since the react-native implementation of fetch is closely related the the browser standard I think that wretch should work seamlessly.

[kamal-j]

That's great news! Thanks for your quick response.

I'm facing a small issue

I did a quick test in this react native sandbox and wretch works fine.

But when i do the same in my react native app, I am unable to chain any of the methods after the .post() I'm getting a TypeError: undefined is not a function

Code from react native app :

import wretch from 'wretch'

export default async () => {

  const response = await wretch()
    .url('https://jsonplaceholder.typicode.com/posts')
    .post({
      userId: 1,
      id: 1,
      title:
        'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
      body: 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
    }).json()

  return response
}

@elbywan error is not thrown if .json() is removed.

[elbywan]

@kamal-j Hmm this is weird 🤔 .

I tried with a brand new expo app and I do not get any error with the following code:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { useEffect, useState } from 'react';
import wretch from 'wretch';

export default function App() {
  const [state, setState] = useState<unknown>();

  useEffect(() => {
    wretch()
      .url('https://jsonplaceholder.typicode.com/posts')
      .post({
        userId: 1,
        id: 1,
        title:
          'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
        body: 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
      }).json(setState)
  }, []);

  return (
    <View style={styles.container}>
      <Text>{JSON.stringify(state, null, 2)}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

[kamal-j]

Hi @elbywan. I have tried with a bare minimum setup of a react native app and wretch is working fine. I have another react native app which is part of an nx monorepo and wretch is making the network call as expected but it is failing to handle the response in this case. I am suspecting it must an issue related to the babel config.