The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. More will be implemented.

Overview

react-native-beautiful-image

The Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. More will be implemented.

Sample

Installation

npm i --save react-native-beautiful-image

Please file an issue if you have any trouble!

Usage

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

....

<Image source={{ uri: 'https://avatars2.githubusercontent.com/u/1784243?v=3&s=460' }}
    placeholderSource={require('./placeholder.png'} />

Options

Supports all Image properties.

option Info
placeholderSource Show placeholderSource if the source can't be loaded.

Todo

  • Support more animations
  • Lazy Loading based on position in View.
  • TBD

License

MIT

Issues
  • "Image" is read-only

    Hi,

    When I try to build the app, I get the error '"Image" is read-only'. Not sure what to do fix this.

    Any suggestions?

    opened by suprb 1
  • defaultSource is no use

    defaultSource is no use

    opened by kaixiniOSTT 0
  • Cannot read property 'oneOfType' of undefined

    Cannot read property 'oneOfType' of undefined

    RN 0.15.5+ remove proptypes from 'react'

    https://github.com/facebook/prop-types

    so

    import React, { Component, // PropTypes } from 'react';

    import { Animated, } from 'react-native';

    import PropTypes from 'prop-types'; // After RN 0.15.5+

    opened by 12343954 0
Owner
Hau Vo
Elixir, NodeJS, React Native, ReactJS, VueJS, etc. Love computer science.
Hau Vo
A React Native library provides Image blur shadows, highly customizable and mutable component. Supports Android, iOS and Web.

A React Native library provides Image Blur Shadows, highly customizable and mutable component. Supports Android, iOS and Web.

Vivek Verma 73 Jan 5, 2022
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more

react-native-hero ?? A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more. Why not

Brandon Him 244 Dec 29, 2021
Simple and lightweight What's New style component that shows your React Native app new features

React Native New Feature ☀️ Simple and lightweight What's New style component that shows your React Native app new features ☀️ If you like this projec

Duc Trung Mai 12 Sep 20, 2021
Simple carousel component.Fully implemented using Reanimated v2.Support to IOS and ANDROID.

Simple carousel component.Fully implemented using Reanimated v2.Support to IOS and ANDROID.

赵東澔 534 Jan 22, 2022
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

Akveo 8.1k Jan 18, 2022
FoldView implemented in JavaScript ⛱

React Native FoldView FoldingCell implementation in JavaScript. This project was inspired by the folding cell animation seen on Dribbble. Questions? F

Jake Murzy 1.9k Jan 12, 2022
Customizable Icons for React Native with support for image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. Table of Contents Bundled Icon Sets Installation i

Joel Arvidsson 15.5k Jan 22, 2022
react-native-cache-image ★158 - A cache-image for react-native

React Native CacheImage (remobile) A cache-image for react-native When use web image, this module will find the web image's url corresponding image f

YunJiang.Fang 161 Nov 16, 2021
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

react-native-gesture-password A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure Ja

null 537 Jan 3, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Dan 397 Dec 23, 2021
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Peace 330 Jan 15, 2022
🧼 Bubble Tab Bar Component for React Native which supports React Navigation V5 and TypeScript

?? react-native-bubble-tabbar Bubble Tab Bar Component for React Native which supports React Navigation V5 and TypeScript ?? Action ?? Installation np

Junho Yeo 40 Dec 7, 2021
Get thumbnail from local media. Currently, it only supports for video.

react-native-thumbnail Get thumbnail from local media. Currently, it only supports for video. Getting started $ npm install react-native-thumbnail --s

Hau Vo 127 Dec 28, 2021
Collapsible-react-component - Collapses and expands content with an animation for react

Collapsible react component Collapses and expands content with an animation. Ins

Filip Chalupa 1 Jan 7, 2022
Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.

react-native-snap-carousel ✨ Some great news for you, fellow plugin user! ?? Head over there now to learn more about all the goodness that's coming yo

Meliorence 9.2k Jan 21, 2022
A Beautiful, Customizable React Native Button component for iOS & Android

React Native Button component React Native Button component for iOS & Android. Provided Components This library provided the following button componen

Jack Lam 528 Dec 29, 2021
:lollipop: A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.

React Native Animated Loader Read more about this package here. A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animat

Vikrant Negi 138 Jan 17, 2022
Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for building your own touchable/button components on top of.

react-native-TouchableSetActive Touchable component for React Native that enables more advanced styling by setting an active state. Most useful for bu

Jeff Stout 30 Mar 11, 2020
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

React Native Modals React Native Modals Library for iOS & Android. How to thank me ? Just click on ⭐️ button ?? Try it with Exponent BREAKING CHANGE A

Jack Lam 2k Jan 14, 2022