feat: 🎉First Commit

.editorconfig

@@ -0,0 +1,21 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+curly_bracket_next_line = false
+spaces_around_operators = true
+indent_brace_style = 1tbs
+
+[*.js]
+quote_type = single
+
+[*.{html,less,css,json}]
+quote_type = double
+
+[package.json]
+indent_size = 2

.gitignore

@@ -0,0 +1,5 @@
+.idea
+.DS_Store
+/build
+node_modules
+npm-debug.log

.npmignore

@@ -0,0 +1,14 @@
+/assets
+/.idea
+node_modules
+.DS_Store
+npm-debug.log
+/scripts
+/src
+/test
+/.babelrc
+/.editorconfig
+/.eslintrc
+.nyc_output
+coverage
+/coverage.lcov

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

README.md

@@ -1,2 +1,4 @@
 # react-native-auto-height-image
-react-native auto height image
+
+Initialized by [vivaxy/gt-npm-package](https://github.com/vivaxy/gt-npm-package)
+

cache.js

@@ -0,0 +1,61 @@
+/**
+ * @since 2017-04-24 20:50:41
+ * @author vivaxy
+ */
+
+import { Image } from 'react-native';
+
+/**
+ * store with
+ *  key: imageURL
+ *  value: {
+ *      width: 100,
+ *      height: 100,
+ *  }
+ */
+const cache = new Map();
+
+const getImageSizeFromCache = (imageURL) => {
+    return cache.get(imageURL);
+};
+
+const loadImageSize = (imageURL) => {
+    return new Promise((resolve, reject) => {
+        Image.getSize(imageURL, (width, height) => {
+            // success
+            resolve({ width, height });
+        }, (err) => {
+            // error
+            reject(err);
+        });
+    });
+};
+
+export const getImageSizeFitWidthFromCache = (imageURL, toWidth) => {
+    const size = getImageSizeFromCache(imageURL);
+    if (size) {
+        const { width, height } = size;
+        return {
+            width: toWidth,
+            height: toWidth * height / width,
+        };
+    }
+    return {};
+};
+
+const getImageSizeMaybeFromCache = async(imageURL) => {
+    let size = getImageSizeFromCache(imageURL);
+    if (!size) {
+        size = await loadImageSize(imageURL);
+        cache.set(imageURL, size);
+    }
+    return size;
+};
+
+export const getImageSizeFitWidth = async(imageURL, toWidth) => {
+    const { width, height } = await getImageSizeMaybeFromCache(imageURL);
+    return {
+        width: toWidth,
+        height: toWidth * height / width,
+    };
+};

index.js

@@ -0,0 +1,73 @@
+/**
+ * @since 2017-04-11 19:10:08
+ * @author vivaxy
+ */
+
+import React, { Component } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+import { getImageSizeFitWidth, getImageSizeFitWidthFromCache } from './cache';
+
+const DEFAULT_HEIGHT = 0;
+
+export default class AutoHeightImage extends Component {
+
+    static propTypes = {
+        width: PropTypes.number.isRequired,
+        imageURL: PropTypes.string.isRequired,
+        style: Image.propTypes.style,
+    };
+
+    constructor(props) {
+        super(props);
+        const { imageURL, width } = props;
+        const { height = DEFAULT_HEIGHT } = getImageSizeFitWidthFromCache(imageURL, width);
+        const hasLoaded = height !== null;
+        this.state = {
+            height,
+        };
+        this.hasLoaded = hasLoaded;
+        this.styles = StyleSheet.create({
+            image: {
+                width,
+                height,
+            },
+        });
+    }
+
+    async componentDidMount() {
+        this.hasMounted = true;
+
+        if (!this.hasLoaded) {
+            const { imageURL, width } = this.props;
+            const { height } = await getImageSizeFitWidth(imageURL, width);
+            this.hasLoaded = true;
+            this.styles = StyleSheet.create({
+                image: {
+                    width,
+                    height,
+                },
+            });
+            if (this.hasMounted) {
+                this.setState({
+                    height,
+                });
+            }
+        }
+    }
+
+    componentWillUnmount() {
+        this.hasMounted = false;
+    }
+
+    render() {
+        const { imageURL, style } = this.props;
+        return (
+            <Image
+                source={{ uri: imageURL }}
+                style={[this.styles.image, style]}
+            />
+        );
+    }
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-native-auto-height-image",
+  "version": "0.0.0",
+  "gtScaffoldVersion": "0.1.0",
+  "description": "react-native auto height image",
+  "main": "./index.js",
+  "scripts": {
+    "release": "standard-version && git push --follow-tags && npm publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:vivaxy/react-native-auto-height-image.git"
+  },
+  "keywords": [
+    "react-native",
+    "image",
+    "auto-height"
+  ],
+  "author": "vivaxy",
+  "license": "MIT",
+  "bugs": {},
+  "dependencies": {
+    "prop-types": "^15.5.8"
+  },
+  "devDependencies": {
+    "react": "16.0.0-alpha.6",
+    "react-native": "^0.43.4",
+    "standard-version": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "16.0.0-alpha.6",
+    "react-native": "^0.43.4"
+  }
+}