How can I handle image loading errors in React Native?

How can I handle image loading errors in React Native?

You can handle image loading errors in React Native by using the onError prop of the Image component.

Can you show me an example of how to implement that?

Sure! Here's a simple example:

<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  onError={() => console.log('Image failed to load')}
/>

What if I want to display a placeholder image instead?

You can use a state variable to manage the image source. If the image fails to load, set the source to a placeholder:

const [imageSource, setImageSource] = useState('https://example.com/image.jpg');

<Image
  source={{ uri: imageSource }}
  onError={() => setImageSource('https://example.com/placeholder.jpg')}
/>