CODEWITHSUNDEEP
androidcssreactjsreact-nativebackground
Martin
Martin

Reputation: 1171

Why ReactNative Dimensions component is reporting lowers resolutions?

I'm programming an application with React Native (v0.45.1) and using my S6 as a testing device. I'd set a background image which matches exactly my cellphone resolution size but its looking huge on screen, enough to only show me a small chunk of my background image.

Just for debugging purposes I'd added this lines in my render method to get my device dimensions:

let {height, width} = Dimensions.get('window');
console.warn(height, width);

and the output I got from those lines is: 360 x 640. How can that be possible? I'd taken a screenshot and shared to a coworker and the picture size is: 1440 x 2560, which is exactly my cellphone resolution. A few days ago the same happened to me at work, for the record I was working with a tablet that time and not using my cellphone. Any ideas about what is happening or am I missing something? Thanks in advance.

Upvotes: 1

Views: 215

Answers (1)

Moti Azu
Moti Azu

Reputation: 5442

The dimensions you get from Dimensions are in dp (for Android) and the picture size is in px (pixels).

Basically, you work in dp on your app and the actual pixels values will vary between devices depending on their pixel density. This means their pixels might be smaller/bigger, thus dp represents the real-world-uniform-pixel-size if you will.

Upvotes: 2

Related Questions