All Projects → vivaxy → React Native Auto Height Image

vivaxy / React Native Auto Height Image

Licence: mit
🖼️React native auto height image

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Auto Height Image

Orly
🏈 Generate your own O'RLY animal book cover to troll your colleagues | 生成你自己的O'RLY动物书封面,让你的同事惊掉下巴
Stars: ✭ 199 (-9.13%)
Mutual labels:  image
Antd Img Crop
🔪 An image cropper for Ant Design Upload
Stars: ✭ 207 (-5.48%)
Mutual labels:  image
Transfer Learning Suite
Transfer Learning Suite in Keras. Perform transfer learning using any built-in Keras image classification model easily!
Stars: ✭ 212 (-3.2%)
Mutual labels:  image
Exiftool Vendored.js
Fast, cross-platform Node.js access to ExifTool
Stars: ✭ 200 (-8.68%)
Mutual labels:  image
Picasso
Picasso is a high quality 2D vector graphic rendering library. It support path , matrix , gradient , pattern , image and truetype font.
Stars: ✭ 205 (-6.39%)
Mutual labels:  image
Dhash
Python library to calculate the difference hash (perceptual hash) for a given image, useful for detecting duplicates
Stars: ✭ 209 (-4.57%)
Mutual labels:  image
Ptimagealbumviewcontroller
"Image Album" — or "Photo Album" if you like that better — View( Controller) for all crazy iOS developers out there...
Stars: ✭ 199 (-9.13%)
Mutual labels:  image
Gulp Image
Optimize PNG, JPEG, GIF, SVG images with gulp task.
Stars: ✭ 213 (-2.74%)
Mutual labels:  image
Lazyload Image
HTMLImageElement extension for lazy loading.
Stars: ✭ 208 (-5.02%)
Mutual labels:  image
Contrast Swatch
🅰️ Image microservice for color contrast information
Stars: ✭ 210 (-4.11%)
Mutual labels:  image
Grunt Image
Optimize PNG, JPEG, GIF, SVG images with grunt task.
Stars: ✭ 201 (-8.22%)
Mutual labels:  image
Compresshelper
🔥 压缩文件,压缩图片,压缩Bitmap,Compress, CompressImage, CompressFile, CompressBitmap:https://github.com/nanchen2251/AiYaCompressHelper
Stars: ✭ 2,362 (+978.54%)
Mutual labels:  image
Pica
Resize image in browser with high quality and high speed
Stars: ✭ 2,900 (+1224.2%)
Mutual labels:  image
Jekyll Spaceship
🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc.
Stars: ✭ 196 (-10.5%)
Mutual labels:  image
Igrphototweaks
Drag, Rotate, Scale and Crop
Stars: ✭ 212 (-3.2%)
Mutual labels:  image
Openl3
OpenL3: Open-source deep audio and image embeddings
Stars: ✭ 200 (-8.68%)
Mutual labels:  image
Deepsort
🧠 AI powered image tagger backed by DeepDetect
Stars: ✭ 209 (-4.57%)
Mutual labels:  image
Bv
Quickly view satellite imagery, hyperspectral imagery, and machine learning image outputs directly in your iTerm2 terminal.
Stars: ✭ 215 (-1.83%)
Mutual labels:  image
Album
🍉 Album and Gallery for Android platform.
Stars: ✭ 2,430 (+1009.59%)
Mutual labels:  image
Rskimagecropper
An image cropper / photo cropper for iOS like in the Contacts app with support for landscape orientation.
Stars: ✭ 2,371 (+982.65%)
Mutual labels:  image

react-native-auto-height-image

Initialized by vivaxy/gt-npm-package

NPM Version NPM Downloads MIT License Conventional Commits Financial Contributors on Open Collective Maintainers Wanted

This component provides you a simple way to load a remote image and automatically set Image height to the image dimension which fits the provided width.

React Native Image component needs users to set both width and height props.

React Native version requirements: >=0.46.

Installation

yarn add react-native-auto-height-image

npm install react-native-auto-height-image

Usage

Use local or remote files:

import React, { Component } from 'react';
import AutoHeightImage from 'react-native-auto-height-image';

import image from 'gallifrey-falls.png';

export default class Demo extends Component {
  render() {
    return (
      <View>

        <AutoHeightImage
          width={100}
          source={image}
        />

        <AutoHeightImage
          width={100}
          source={{uri: 'http://placehold.it/350x150'}}
        />

      </View>
    );
  }
}

You can even specify fallback images for when the source fails to load:

import React, { Component } from 'react';
import AutoHeightImage from 'react-native-auto-height-image';

import image from 'gallifrey-falls.png';

export default class Demo extends Component {
  render() {
    return (
      <AutoHeightImage
        width={100}
        source={{uri: 'https://vivaxy.github.io/404'}}
        fallbackSource={image}
      />
    );
  }
}

Props

name type isRequired default description
width number N/A image width to fit
maxHeight number Infinity image max height
source number or object N/A local (i.e. require/import) or remote image ({uri: '...'})
fallbackSource number or object N/A local (i.e. require/import) or remote image ({uri: '...'})
onHeightChange func (height) => {} called when updating image height, the argument height might be 0
animated bool false Use Animated.Image instead of Image

Other image props except resizeMode are accepted.

Change Log

Change log

Contributing

Contributing

Licence

MIT

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Related Projects

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].