Change loading icon size for different DPI deivces - react-native

Question

I am working on application which is implemented using Expo and react native. I have splash screen in my app.The icon in splash screen loading screen is coming correct in android devices but very small in IOS devices ( in different dpi).I want to make icon resize based on dpi which present under loading .Can anyone help me out here.Thank you.
Config file:-
"expo": {
"name": "ExpoApp",
"description": "No description",
"slug": "evosus",
"privacy": "unlisted", // public
"sdkVersion": "19.0.0",
"version": "1.0.0",
"orientation": "portrait,landscape",
"primaryColor": "green",
"icon": "./assets/icons/ball.png",
//"icon": "./assets/icons/logo_Dark.png",
"notification": {
"icon": "./assets/icons/ball.png",
"color": "#000000"
},
"loading": {
//"icon": "./assets/icons/loading-icon.png",
"icon": "./assets/icons/icon.png",//I want to resize this icon based on screen dpi
"hideExponentText": true
},
"packagerOpts": {
"assetExts": [
"ttf"
]
},
"ios": {
"supportsTablet": true
}
//,"androidStatusBarColor": "#444444"
}
}
App.js component:-
import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, SQLite } from 'expo';
import { Ionicons, EvilIcons } from '#expo/vector-icons';
import RootNavigation from './navigation/RootNavigation';
// Services
import DB from "./src/Services/DBDefinitionService";
import appService from "./src/Services/AppService";
console.ignoredYellowBox = [ 'Setting a timer' ];
export default class App extends React.Component {
state = {
assetsAreLoaded: false,
};
componentWillMount() {
this._loadAssetsAsync();
// Added by Anil G on 23/08/2017
this.db_init();
this.db_device_info_save();
}
render() {
if (!this.state.assetsAreLoaded && !this.props.skipLoadingScreen) {
return <AppLoading/>;
} else {
return (
<View style={styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
{Platform.OS === 'android' &&
<View style={styles.statusBarUnderlay} />}
<RootNavigation />
</View>
);
}
}
async _loadAssetsAsync() {
try {
await Promise.all([
Asset.loadAsync([
require('./assets/images/robot-dev.png'),
require('./assets/images/robot-prod.png'),
]),
Font.loadAsync([
// This is the font that we are using for our tab bar
Ionicons.font,
EvilIcons.font,
// We include SpaceMono because we use it in HomeScreen.js. Feel free
// to remove this if you are not using it in your app
{ 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
'roboto-regular': require('./assets/fonts/Roboto-Regular.ttf'),
'roboto-medium': require('./assets/fonts/Roboto-Medium.ttf'),
},
]),
]);
} catch (e) {
// In this case, you might want to report the error to your error
// reporting service, for example Sentry
console.warn(
'There was an error caching assets (see: App.js), perhaps due to a ' +
'network timeout, so we skipped caching. Reload the app to try again.'
);
console.log(e);
} finally {
this.setState({ assetsAreLoaded: true });
}
}
async db_init() {
await DB.init();
}
async db_device_info_save() {
await appService.device_info_save();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
statusBarUnderlay: {
height: 24,
backgroundColor: 'rgba(0,0,0,0.2)',
},
});

Answer 1

If I remember properly you can define it the same way you do in iOS, adding #x2, #x4...to your icon name and defining one for each dpi.