0

Hello everyone i got API data from https:list of all breeds, and inserted already into FlatList, now i want to insert their picture from : Here, I attached screenshot of what i did already:

useEffect(() => {

            
  [2]: https://i.sstatic.net/6e7IW.jpg
4
  • did you try to test the API outside and make sure it actually works for other items? Commented Feb 13, 2021 at 15:29
  • i did not get your question, you mean if it is working yes, but just couldnot fetch it for each breed its own picture Commented Feb 13, 2021 at 15:33
  • Your image URI return a JSON "image list" from the dog API. This URL doesn't return an image. Is it normal? Commented Feb 13, 2021 at 15:37
  • so how can i convert it ? do you have any ideas? Commented Feb 13, 2021 at 15:39

1 Answer 1

1

I can't really test what's below since i don't know where your collapse component comes from but here is how I would think the workflow :

const [breedImage, setBreedImage] = useState();

useEffect(() => {
  fetch('https://dog.ceo/api/breeds/list/all')
    .then((response) => response.json())
    .then((json) => setData(Object.keys(json.message)))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
}, []);

const getImage = breedId => {
  // Do you call to get the image
  return fetch(...)
  .then(result => {
    // ...Do your things
    // Set your image in a local state
    setBreedImage(result);
  });
}

return (
  <View style={styles.container}>
  {isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={data}
        keyExtractor={({ id }, index) => index.toString()}
        renderItem={({ item }) => (

          <Pressable onPress={() => getImage(breedId)}>
          <Collapse>
          {breedImage &&
            (
              <CollapseHeader>
                <Card title="Local Modules">
                  <Text>{item} </Text>
                </Card>
              </CollapseHeader>

              <CollapseBody style={{alignItems:'center',justifyContent:'center',padding:10}}>
                <Card title="Local Modules">
                <Image
                    style={styles.tinyLogo}
                    source={{ 
                      uri: breedImage,
                    }}
                  />
                </Card>
              </CollapseBody>
            )}
          </Collapse>
          </Pressable>
        )}
      />
    )}
  </View>
  
);

The idea is to trigger another api call when you click on one breed (See the <pressable ... /> that could be TouchableOpacity or something else) and when it's loaded, you can display the image.

Now, note that it depends on how the collapse component act. It is possible that if you trigger a render, the collpase close itself so you will need to test it with your code.

Also, you chould improve this by displaying a loader while the getImage is running. Implement a second loader for example if the api call is too long.

Sign up to request clarification or add additional context in comments.

4 Comments

here for example collapse is not so important , i can just delete them and put just Text and Image , but thing is i can not fetch each picture to each breedin flatlist
Yeah but you could by default display the first image returned by the api. If you check the list of imge url, they are all about retriever-chesapeake which is the first element of the list (when you ask for retriever breed) so it's not a problem. Now if it doesn't fit your needs you'll have to create a sub list of breeds so you can get the corresponding picture (You will still hve to get the first image since there is multiple iamge for one sub breed)
oh my God, why it is so difficult (, thanks anyway!
@Feliks_JS Yep, sometimes API doesn't make the life of a front end developper easy, but I can assure you that most of the time it is mandatory. For your app, it depends on how much information you want to give to the user. You have to do some choices, about what you will display and also how you will do it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.