Neverending Perpetual Motion

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

    0.1.3 • Public • Published

    react-native-fullwidth-image

    A responsive Image element that takes the full width of its parent element while maintaining aspect ratio

    The original idea comes from here.

    Installation

    npm install --save react-native-fullwidth-image
    

    Usage

    Start by importing the module

    import FullWidthImage from 'react-native-fullwidth-image'

    Now, you can use the FullWidthImage element in multiple ways as follows:

    Initial Dimensions

    You can provide an initial width and height, react-native-fullwidth-image will infer the aspect ratio from the provided dimensions and keep it as the image is scaled up to 100% of its parent's width

      <FullWidthImage style={{ ... }} source={require(...)} width={480} height={272} />

    An aspect ratio of 1 will give you square images

    Aspect Ratio

    You can also provide a predefined aspect ratio (a value between 0 and 1) as follows

      <FullWidthImage style={{ ... }} source={{uri: ..}} ratio={3/4} />

    An aspect ratio of 1 will give you square images

    Automatic detection

    react-native-fullwidth-image can automatically detect the aspect ratio of remote images, all you need to provide is the uri as you would do with the regular Image component.

      <FullWidthImage style={{ ... }} source={{uri: ..}} />

    Demo

    We use react-native-fullwidth-image in Apperture iOS / Android

    License

    MIT License. © Wassim Gharbi

    Install

    npm i react-native-fullwidth-image

    DownloadsWeekly Downloads

    236

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    6.05 kB

    Total Files

    5

    Last publish

    Collaborators

    • wassgha