@expo/react-native-fade-in-image
Wrap Image components in <FadeIn> to have them fade in pleasantly when they finish loading
Last updated 4 years ago by expo .
MIT · Original npm · Tarball · package.json
$ cnpm install @expo/react-native-fade-in-image 
SYNC missed versions from official npm registry.

@expo/react-native-fade-in-image

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

Installation

npm i @expo/react-native-fade-in-image --save

Usage

import React from 'react';
import { Image } from 'react-native';
import FadeIn from '@expo/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

Current Tags

  • 1.1.1                                ...           latest (4 years ago)

1 Versions

  • 1.1.1                                ...           4 years ago
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |