├── .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 |
--------------------------------------------------------------------------------