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
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
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
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.
Demo
We use react-native-fullwidth-image
in Apperture iOS / Android
License
MIT License. © Wassim Gharbi