react-native-cloudinary-image-display can be used to properly display Image from cloudinary according to device dimensions.
![](https://raw.githubusercontent.com/FatmaMahmoud698/react-native-cloudinary-image-display/master/screenshot.png)
npm i --save react-native-cloudinary-image-display
In order to properly use this library you have to provide it with a few configuration parameters:
The cloudinary cloud name associated with your Cloudinary account.
Id of the uploaded image.
Original width of the uploaded image.
Height of the uploaded image.
In addition to the mandatory cloud_name identifier, there are also a number of optional parameters you may want to define. Please refer to Cloudinary Documentation for more information on these parameters.
if no options object is set, following default options will be used:
{
crop: 'fill',
format: 'jpg',
quality: 100,
secure: true,
cdn_subdomain: true
}
Custom style to apply to Image.
Border radius to apply to Image
Side margin to apply to Image
import CloudinaryImage from 'react-native-cloudinary-image-display';
<CloudinaryImage cloudName={'cloudName'}
imageId={'gk9cslue8qeba5djqnzg'}
width={2448}
height={3264} />