CODEWITHSUNDEEP
react-nativeexpo
RonLugge
RonLugge

Reputation: 5174

How do I make react native icon sizes flexible?

I'm building a ReactNative iOS/Android app using Expo, and I want to use vector icons for some of my artwork. The issue is the artwork in question needs to scale with the view, I don't want it too small on some devices or too large on another.

With an image, in theory, I could use style = { { width:'100%', aspectRatio: 1 } } to force things to behave. (In theory I say, because it doesn't work consistently)

Is there anything similar for vector icons? Right now I'm just picking a size number that more-or-less works, but I don't want it to stop working on a given size, and it just seems that I'm repeating the mistake of using fixed widths that broke some other screens until I fixed it.

Upvotes: 3

Views: 6804

Answers (1)

Rodrigo
Rodrigo

Reputation: 234

You can use 'Dimensions': Import Dimensions From react native and then use it to set the size of your image

import {Dimensions} from 'react-native'
const SCREEN_WIDTH = Dimensions.get("window").width;
const logo = require("logo.png");

in render:

then you set the image style:

const styles = StyleSheet.create({
  logo: {
    height: SCREEN_WIDTH * 0.65,
    width: SCREEN_WIDTH * 0.65,
    marginLeft: SCREEN_WIDTH * 0.2
  }
})

Upvotes: 3

Related Questions