I am new to react-native and trying to render images on different android device based on the DPI. Need Help with it.
Code for getting DPI of device is -
import {PixelRatio} from 'react-native';
const PDI = PixelRatio.get();
var localPath='';
if(PDI == 1){
localPath = '../../assets/img/drawable-mdpi'
}
else if(PDI == 1.5){
localPath = '../../assets/img/drawable-hdpi'
}
else if(PDI == 2){
localPath = '../../assets/img/drawable-xhdpi'
}
else if(PDI == 3){
localPath = '../../assets/img/drawable-xxhdpi'
}
else if(PDI == 3.5){
localPath = '../../assets/img/drawable-xxxhdpi'
}
export {PDI, localPath};
And the react-native app.js file is -
import React, {Component} from 'react';
import {View, Image, StyleSheet, StatusBar, Alert} from 'react-native';
import { PDI, localPath } from '../../helper/device-size-android/GetDeviceSizeAndroid';
export default class TestImg extends Component {
componentDidMount() {
setTimeout(() => {
this.props.navigation.navigate('Home')
}, 3000);
}
render() {
return (
<View>
<StatusBar
barStyle = "dark-content"
/>
<Image
source={require(localPath + '/Splash.png')}
/>
</View>
);
}
}
Your sequence of if statements isn't going to work if PixelRatio.get() doesn't return one of the five values you single out, which are just typical values mentioned in the documentation that don't necessarily match the resolution of a particular phone. Compare PixelRatio.get() to intervals for robustness:
Better yet, let the React Native Image component do the work with multiple images specified in the source property.