-2

I have a figma file , it's a mobile screen and all elements in figma are using pixels for their height and widths. However react native does not have pixels in the way typical web apps have and the whole pixel density thing gets me confused.

Let's say i want to create a view that needs to be height:100px , how do i do it in react native, since adding height:100 isnt translated the same as the requested figma file.. I'm looking for the correct practice here..

meliora3005
  • 1

1 Answers1

0

Use ScaledSheet instead of StyleSheet provide by react-native-size-matters. It provides some simple tooling to make your scaling a whole lot easier. To define dimensions using ScaledSheet, do this :

const LocalStyles = ScaledSheet.create({
  container: {
    width: '500@s',
    height: '100@vs',
    backgroundColor: Colors.white,
    borderRadius: '4@s',
  },
}

while s stands for scale and vs for vertical scale. Here 100 will translate differently on a big screen and small screen accordingly and you do not have to manage that.

abdemirza
  • 629
  • 4
  • 16