ReactNative - get data from promise (JSON)

Question

I am able to fetched the JSON data and it now returns an array. How do I use the elements in the array in react native? Below is my attempt:

export default function display() {

const fetching = async() => ... //defines fetching() which returns the array

...

    return (
       <View>
           <Image 
                source = {{uri: 'http://imageURI.' + fetching().then((arr) =>  {return arr[0]}) + '.png'}}
                style = {{height: 50, width: 50, borderRadius: 50}} />
       </View>
    )

}

How can I access the elements in the array?

Answer 1

Try the following.

You need to make your API call asynchronously, display something until you get the response and then update the state with retrieved data.

import React, {useState, useEffect} from 'react';
import {View, Image} from 'react-native'

const fetch = async () => {/* ASYNC LOGIC HERE*/};

const MyComponent = () => {
  const [uri, setUri] = useState(null);

  useEffect(() => {
    fetch().then((arr) => {
      setUri(`http://imageURI.${arr[0]}.png`);
    });
  }, []);

  return (
    <View>
      {
        uri ? <Image source={{uri}} style={{height: 50, width: 50, borderRadius: 50}} /> : null
      }
    </View>
  );
};