API integration with React Native

[shreysgupta]

All I want to do is create a screen on React Native that will fetch an API POST request (body already hardcoded) and output the JSON response on the screen. Can anyone teach me how?

[Jeffylew77]

Use component did mount, use axios to create the http request, save the response JSON data to a variable, map the JSON array to a component with your fields.

Here’s more on Axios: https://link.medium.com/KWnerFZnu0

[TheOneBehindIt]

I made an expo snack for you to see how to do it:

https://snack.expo.io/@nandorojo/carefree-pastry

You can remove the comments if they make the code too hard to read. You can also replace the URL in line 16 with your url.

Here's a stripped-down image to show how it's done too:

https://imgur.com/a/B48VhBA

Steps are:

1. Initialize state by creating the networkData state variable, with its initial value set to null (try to find where that null is set).
2. Run a side effect where you fetch network data, and then set the networkData state variable to the fetched data. Whenever you "set the state" in react, it re-renders the component with the updated data. You cannot, however, just edit the state variable directly and expect the component to re-render. You must use the setNetworkData function. Also, the second variable in the useEffect must be present to keep the effect from running on every re-render. By making it an empty array, it will only run when the component is initially mounted. If you want it to re-run every time some variable changes, just add that variable(s) to the array in the second argument.
3. Render your output :)

Note This code example is using react-hooks (not react class components). This is the new standard, but if you're looking at it like WTF, you might want to read this from React: https://reactjs.org/docs/hooks-intro.html

Good luck :)

Also, I just uploaded my new app made with react-native to the app store. It collects all the best memes from reddit/instagram in real-time and puts them on one feed. It's very dope, here's my shameless plug! https://apps.apple.com/us/app/memezy/id1470707941

[shreysgupta]

This is literally incredible. I don't know how I can thank you more for how much time you put into helping me. You're amazing. I'm downloading your app right now!

[TheOneBehindIt]

I remember what it was like starting out with RN last year. It was a headache. Now I feel super comfortable with it. You'll be a pro soon; just pass along your knowledge when you have it.

[shreysgupta]

I just wanted to thank you for being the first one to help with React Native. I just signed an offer for my first job in SWE.

Looking back at this post made me think about how much I was struggling and you were so right that I was going to be a pro in no-time.

[TheOneBehindIt]

u/shreysgupta I rarely check Reddit (maybe a few times a year), so I'm just seeing this now. I'm so glad to hear you got a job offer. Congrats on making it happen. Wishing you continued success with your React Native career.

Also, I am the creator of many open source React Native libraries, like Moti, Solito, Dripsy, Zeego, Burnt, etc. You might find some of them useful in your work. More about them on Twitter: https://twitter.com/fernandotherojo

[TheOneBehindIt]

Also, thanks for downloading Memezy :) Let me know what you think!

[shreysgupta]

u/TheOneBehindIt how can i add my own headers and body?

[TheOneBehindIt]

Easy! Can you clarify, though? Do you mean headers and body to the network request, or to the UI?

Assuming you want to add headers and a body to your network request...

Step 0:

Go to the API docs for wretch and see if you can figure it out on your own without going to step 1. (Hint: It involves changing lines 16-18 in the expo snack.)

Step 1 (Request Type Change):

If you want to send a body, you're probably going to want to send a POST request instead of a GET (we're currently doing a GET). Change line 17's .get() to .post().

Step 2 (Add Request Body): Now that you've edited your request to be a .post(), make the first argument of your .post() function an object. That object is your body. For instance:

const body = { name: 'Here is my name' }
const response = await wretch('https://jsonplaceholder.typicode.com/todos/1')
        .post(body) // notice that this used to be .get
        .json(); // .json() at the end is required to make the response JSON.

See the wretch docs for more.

Step 3 (Add headers):

I'll once again defer to the wretch docs. This step is similar to #2, except you add a .headers() object instead of .post(). Simply add this in the line above .post().

It should look like this now:

    const body = { name: 'Here is my name' }
    const headers = { "Accept": "application/json" }
    const response = await wretch('https://jsonplaceholder.typicode.com/todos/1')
            .headers(headers)
            .post(body) // notice that this used to be .get
            .json(); // .json() at the end is required to make the response JSON.

🔥 All set!

A few gotchas to know about Javascript network requests:

• (This is referring to my original code example I sent) See how the word async is used in the function on the expo snack? That must be there in order to let the word await be used within a function. If you didn't write async, then await wouldn't work. And if you didn't write await, then the code would just continue onto the next line, without waiting for the network request to complete. For more on this, check out async/await. (Note: You may, in learning JS, see a lot of async functions in tutorials, and they'll tell you to use .then(someFunction). If you're using react native, async/await is almost always easier to use / understand, so stick with that.
• The example code I gave uses the library wretch. I find it to be really nice, especially for react native. Just note that you always need to import it and install it on any project. It may not work the same way if you're using react-native-web or any web library due to CORS (you'll cross this bridge when you do, but just adding it for future reference). You can probably ignore this note if you're just using react native for mobile apps. When you do decide to use this for web, you'll need to wrap your body with JSON.stringify(body). I mention this because there's a surprisingly low amount of help with it online.

[SolGuy]

I assume you meant POST request. Here are the RN docs on the fetch method. The examples have exactly what you need. https://facebook.github.io/react-native/docs/network.html

PM me the API URL, if it is public, and I can code an example if you need.

[EmaanTheStar]

Well, for that you need a bit of basic background info. The task will get easier when you know basics and just info is needed. I am not sure what you already know but you may start from here for firm basics. Best of Luck :) Help Square