@ducdh-origin/react-native-auto-height-image
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    react-native-auto-height-image

    Initialized by vivaxy/gt-npm-package

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

    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.

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

    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

    Install

    npm i @ducdh-origin/react-native-auto-height-image

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    25.9 kB

    Total Files

    19

    Last publish

    Collaborators

    • ducdh-origin