image - React Native: How do I make the bottom navbar icons have the correct size without hardcoded values?

Question

I've created a Bottom Tab Navbar fro my React Native App. The icons I'm using are imported images.

The question is: How do I make the icons have the correct size across all devices without hardcoding the values for width and height?

Right now, the values are hardcoded but I'm sure that this is not the best practice:

return <Image style={{ width: 30, height: 30 }} source={iconName}/>;

I've also tried to do this alternatively by importing Dimensions but the icons don't look right no matter what I put in the * x:

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

....

return <Image style={{ width: windowWidth * 0.1, height: windowHeight * 0.05 }} source={iconName}/>;

Any ideas? Or is it going to be ok if I leave the hardcoded values?

question from:https://stackoverflow.com/questions/65924776/react-native-how-do-i-make-the-bottom-navbar-icons-have-the-correct-size-withou

Answer 1

You can use this class and use this component in your whole app

export const HEIGHT = Dimensions.get('window').height;
export const WIDTH = Dimensions.get('window').width;

export const getResponsiveHeight = (per) => {
    return ((HEIGHT * per) / 100);
}

export const getResponsiveWidth = (per) => {
    return ((WIDTH * per) / 100);
}

eg: if you want to use getResponsiveHeight then you have to use it like this

width:getResponsiveHeight(0.5)

per here is the value 0.5

you can pass the value according to your requirement.