Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-native-fullwidth-image with all npm packages installed. Try it out:

var reactNativeFullwidthImage = require("react-native-fullwidth-image")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-fullwidth-image v0.2.0

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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free