react-native-beautiful-image

A beautiful image component for React Native with fade-in animation and placeholder support.

Installation

npm install react-native-beautiful-image
# or
yarn add react-native-beautiful-image

Usage

import Image from 'react-native-beautiful-image';

// Basic usage
<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 200, height: 200 }}
/>

// With placeholder
<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  placeholderSource={require('./assets/placeholder.jpg')}
  style={{ width: 200, height: 200 }}
/>

// With callbacks
<Image
  source={{ uri: 'https://example.com/image.jpg' }}
  onLoad={() => console.log('Image loaded')}
  onError={() => console.log('Image failed to load')}
  style={{ width: 200, height: 200 }}
/>

Props

Prop	Type	Required	Description
source	ImageSourcePropType	Yes	The source of the image
style	StyleProp	No	Style for the image
onLoad	() => void	No	Callback when image loads successfully
onError	() => void	No	Callback when image fails to load
placeholderSource	ImageSourcePropType	No	Image to show while loading or on error

TypeScript Support

This library is written in TypeScript and includes type definitions. The main component is exported as:

import Image, { ImageExtProps } from 'react-native-beautiful-image';

License

MIT