https://github.com/phuochau/react-native-beautiful-image
The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. More will be implemented.
https://github.com/phuochau/react-native-beautiful-image
react-native react-native-component
Last synced: 3 months ago
JSON representation
The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. More will be implemented.
- Host: GitHub
- URL: https://github.com/phuochau/react-native-beautiful-image
- Owner: phuochau
- License: mit
- Archived: true
- Created: 2017-04-02T06:13:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-02T07:59:41.000Z (over 8 years ago)
- Last Synced: 2024-11-20T07:44:40.858Z (12 months ago)
- Topics: react-native, react-native-component
- Language: Objective-C
- Homepage: https://github.com/phuochau/
- Size: 421 KB
- Stars: 62
- Watchers: 3
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-beautiful-image ★52 - The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. (Components / UI)
- awesome-react-native - react-native-beautiful-image ★52 - The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. (Components / UI)
- awesome-reactnative-ui - react-native-beautiful-image - native-beautiful-image/master/screenshot.gif)| (Others)
- awesome-react-native - react-native-beautiful-image ★52 - The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. (Components / UI)
- awesome-reactnative-ui - react-native-beautiful-image - native-beautiful-image/master/screenshot.gif)| (Others)
- awesome-react-native - react-native-beautiful-image ★52 - The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. (Components / UI)
- fucking-awesome-react-native - react-native-beautiful-image ★52 - The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. (Components / UI)
README
# react-native-beautiful-image
A beautiful image component for React Native with fade-in animation and placeholder support.
## Installation
```bash
npm install react-native-beautiful-image
# or
yarn add react-native-beautiful-image
```
## Usage
```typescript
import Image from 'react-native-beautiful-image';
// Basic usage
// With placeholder
// With callbacks
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:
```typescript
import Image, { ImageExtProps } from 'react-native-beautiful-image';
```
## License
MIT