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.