react-native-fade-in-image
TypeScript icon, indicating that this package has built-in type declarations

1.6.1 • Public • Published

react-native-fade-in-image

Wrap Image components in <FadeIn> to have them fade in pleasantly when they finish loading.

Installation

npm i react-native-fade-in-image --save

Usage

import React from 'react';
import { Image } from 'react-native';
import FadeIn from 'react-native-fade-in-image';

const uri = 'https://d3lwq5rlu14cro.cloudfront.net/v1/AQ5jDS5SYyUkapWWEviV.png';

class FancyImage extends React.Component {
  render() {
    return (
      <FadeIn>
        <Image source={{ uri }} style={{ width: 162, height: 28 }} />
      </FadeIn>
    );
  }
}

props

  • style adds style to the image wrapper.
  • renderPlaceholderContent renders an element while loading the image, e.g. a spinner.
  • placeholderStyle adds style to the placeholder wrapper, default background color is #eee.

Example

See the example project source or try it out at https://exp.host/@community/fade-in-image-example

Readme

Keywords

none

Package Sidebar

Install

npm i react-native-fade-in-image

Weekly Downloads

3,116

Version

1.6.1

License

MIT

Unpacked Size

5.24 kB

Total Files

6

Last publish

Collaborators

  • szdziedzic
  • alanhughes
  • kadikraman
  • radoslawkrzemien
  • aleqsio
  • marklawlor
  • gabrieldonadel
  • simek
  • keith-kurak
  • christopherwalter
  • kbrandwijk
  • fiber-god
  • ide
  • brentvatne
  • evanbacon
  • quinlanj
  • expoadmin
  • tsapeta
  • exponent
  • wschurman
  • wkozyra
  • bycedric
  • lukmccall
  • jonsamp
  • princefleaswallow
  • kudochien