├── .gitignore ├── README.md ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### JetBrains template 3 | # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm 4 | # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 5 | 6 | # User-specific stuff: 7 | .idea/**/workspace.xml 8 | .idea/**/tasks.xml 9 | .idea/dictionaries 10 | 11 | # Sensitive or high-churn files: 12 | .idea/**/dataSources/ 13 | .idea/**/dataSources.ids 14 | .idea/**/dataSources.xml 15 | .idea/**/dataSources.local.xml 16 | .idea/**/sqlDataSources.xml 17 | .idea/**/dynamic.xml 18 | .idea/**/uiDesigner.xml 19 | 20 | # Gradle: 21 | .idea/**/gradle.xml 22 | .idea/**/libraries 23 | 24 | # Mongo Explorer plugin: 25 | .idea/**/mongoSettings.xml 26 | 27 | ## File-based project format: 28 | *.iws 29 | 30 | ## Plugin-specific files: 31 | 32 | # IntelliJ 33 | /out/ 34 | 35 | # mpeltonen/sbt-idea plugin 36 | .idea_modules/ 37 | 38 | # JIRA plugin 39 | atlassian-ide-plugin.xml 40 | 41 | # Crashlytics plugin (for Android Studio and IntelliJ) 42 | com_crashlytics_export_strings.xml 43 | crashlytics.properties 44 | crashlytics-build.properties 45 | fabric.properties 46 | ### Node template 47 | # Logs 48 | logs 49 | *.log 50 | npm-debug.log* 51 | yarn-debug.log* 52 | yarn-error.log* 53 | 54 | # Runtime data 55 | pids 56 | *.pid 57 | *.seed 58 | *.pid.lock 59 | 60 | # Directory for instrumented libs generated by jscoverage/JSCover 61 | lib-cov 62 | 63 | # Coverage directory used by tools like istanbul 64 | coverage 65 | 66 | # nyc test coverage 67 | .nyc_output 68 | 69 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 70 | .grunt 71 | 72 | # Bower dependency directory (https://bower.io/) 73 | bower_components 74 | 75 | # node-waf configuration 76 | .lock-wscript 77 | 78 | # Compiled binary addons (http://nodejs.org/api/addons.html) 79 | build/Release 80 | 81 | # Dependency directories 82 | node_modules/ 83 | jspm_packages/ 84 | 85 | # Typescript v1 declaration files 86 | typings/ 87 | 88 | # Optional npm cache directory 89 | .npm 90 | 91 | # Optional eslint cache 92 | .eslintcache 93 | 94 | # Optional REPL history 95 | .node_repl_history 96 | 97 | # Output of 'npm pack' 98 | *.tgz 99 | 100 | # Yarn Integrity file 101 | .yarn-integrity 102 | 103 | # dotenv environment variables file 104 | .env 105 | 106 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## react-native-fade-image 2 | 3 | Pure component that extends native Image to have images fade in pleasantly when they finish loading. 4 | 5 | Component is pure, stateless and using native driver to animate as fast as possible. 6 | 7 | Also prefetch feature for Image Cache is used. 8 | 9 | ### Installation 10 | 11 | ``` 12 | npm i react-native-fade-image --save 13 | ``` 14 | 15 | ### Usage 16 | 17 | Use as simple Image. All should work out of the box :) 18 | 19 | ```javascript 20 | import React from 'react'; 21 | import {View, StyleSheet} from 'react-native'; 22 | import FadeImage from 'react-native-fade-image'; 23 | 24 | const uri = 'https://facebook.github.io/react/img/logo_og.png'; 25 | const imageStyle = StyleSheet.create({width: 100, height: 100}); 26 | 27 | class FancyImage extends React.Component { 28 | render() { 29 | return ( 30 | 31 | 35 | 36 | ) 37 | } 38 | } 39 | ``` 40 | 41 | #### props 42 | 43 | - `duration` - fade in animation duration (ms). 44 | 45 | 46 | Copyright © 2017-present, Stanislav Doskalenko doskalenko.s@gmail.com -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Stanislav Doskalenko on 22.06.17. 3 | * © 2017-present, doskalenko.s@gmail.com 4 | */ 5 | 6 | 'use strict'; 7 | 8 | import React from 'react'; 9 | import { Animated, Image } from 'react-native'; 10 | 11 | export default class FadeImage extends React.PureComponent { 12 | 13 | constructor (props) { 14 | super(props); 15 | if (this.props.source.uri) { 16 | Image.prefetch(this.props.source.uri); 17 | } 18 | } 19 | 20 | imageOpacity = new Animated.Value(0); 21 | 22 | onLoadImage () { 23 | if (this.props.onLoad) { 24 | this.props.onLoad(); 25 | } 26 | 27 | Animated.timing(this.imageOpacity, { 28 | toValue: 1, 29 | duration: this.props.duration || 500, 30 | useNativeDriver: true 31 | }).start(); 32 | } 33 | 34 | render () { 35 | return ( 36 | {this.onLoadImage()}} 43 | onError={this.props.onError} 44 | onLoadEnd={this.props.onLoadEnd} 45 | defaultSource={this.props.defaultSource} 46 | > 47 | {this.props.children} 48 | 49 | ); 50 | } 51 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-fade-image", 3 | "version": "1.0.1", 4 | "description": "Pure component that extends native Image to have images fade in pleasantly when they finish loading", 5 | "main": "index.js", 6 | "author": "Stanislav Doskalenko ", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/StasDoskalenko/react-native-fade-image.git" 11 | } 12 | } 13 | --------------------------------------------------------------------------------