Conversion of Figma designs to React Native-CodePudding

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..

CodePudding user response：

From the documentation that i read, it's no need to type the px when set the width and height size for the react native components

The sample code was like this

import React from 'react';
import { View } from 'react-native';

const FixedDimensionsBasics = () => {
  return (
    <View>
      <View style={{
        width: 50, height: 50, backgroundColor: 'powderblue'
      }} />
      <View style={{
        width: 100, height: 100, backgroundColor: 'skyblue'
      }} />
      <View style={{
        width: 150, height: 150, backgroundColor: 'steelblue'
      }} />
    </View>
  );
};

export default FixedDimensionsBasics;

The numbers for widh and height are in pixels, event we not declare the px.

Here was the docs that i've read, for height and width in react native

Hope it was helpful

Thank you

CodePudding user response：

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.