Nougat Predominant Middleware

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

    1.5.4 • 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/img/logo_og.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/img/logo_og.png' }}
      style={styles.fitImage}
    />
    
    // draws image to fit inherited space automatically, even when screen is rotated.
    <FitImage
      source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
      originalWidth={400}
      originalHeight={400}
      style={styles.fitImage}
    />
    
    // could use resizeMode
    <FitImage
      resizeMode="contain"
      source={{ uri: 'https://facebook.github.io/react/img/logo_og.png' }}
    />
    
    // or draws image to specific size like Image component.
    <FitImage
      source={{ uri: 'https://facebook.github.io/react/img/logo_og.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 @arrkiin/react-native-fit-image

    DownloadsWeekly Downloads

    0

    Version

    1.5.4

    License

    Beerware

    Unpacked Size

    355 kB

    Total Files

    14

    Last publish

    Collaborators

    • arrkiin