Negligible Psychological Misery

    react-native-fit-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.5 • Public • Published

    React Native Fit Image npm version

    React Native Fit Image enables you to draw responsive image component.

    Introduction

    Responsive image component to fit perfectly itself.

    Install

    npm install react-native-fit-image --save

    Usage

    import FitImage from 'react-native-fit-image';
     
    // custom styles for FitImage
    var styles = StyleSheet.create({
      fitImage: {
        borderRadius: 20,
      },
      fitImageWithSize: {
        height: 100,
        width: 30,
      },
    });
     
    // draws image to fit inherited space automatically, even when screen is rotated.
    // even you don't need to provide original size in v1.2.0
    <FitImage
      source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
      style={styles.fitImage}
    />
     
    // draws image to fit inherited space automatically and disables loading indicator
    <FitImage
      indicator={false} // disable loading indicator
      indicatorColor="white" // react native colors or color codes like #919191
      indicatorSize="large" // (small | large) or integer
      source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
      style={styles.fitImage}
    />
     
    // draws image to fit inherited space automatically, even when screen is rotated.
    <FitImage
      source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
      originalWidth={400}
      originalHeight={400}
      style={styles.fitImage}
    />
     
    // could use resizeMode
    <FitImage
      resizeMode="contain"
      source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
    />
     
    // or draws image to specific size like Image component.
    <FitImage
      source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
      style={styles.fitImageWithSize}
    />
     
    // draws local image (currently, it does not support responsive)
    <FitImage
      source={require('fit-image.png')}
      style={styles.fitImageWithSize}
    />

    Example

    FitImageExample - Portrait FitImageExample - LandScape

    Install

    npm i react-native-fit-image

    DownloadsWeekly Downloads

    47,224

    Version

    1.5.5

    License

    Beerware

    Unpacked Size

    23.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • originerd
    • sunkibaek