styled-components size and performance in react-native

Question

I just started to experiment with react native and was following some official documents.

What i understood from style and size parts of official documentation is that, styling system is very similar to css but not quite. (?)

Q1: Can I just use styled components and use 'padding: 20px' and such without worrying about different kind of devices?
I'm asking this, because docs say:

All dimensions in React Native are unitless, and represent density-independent pixels.

Is this quote only for width and height?. Is there a pixel density conversion by default or can it be implemented?

---

Q2: Does styled components have a performance hit in react native? I'm not sure what is going on under the hood and I'd prefer to use native components as much as possible.

Answer 1

First of all, you mention that "All dimensions in React Native are unitless" but that isn't quite right because they are represented in pixels.

You can do simple math to change those fixed values across devices. For example, let say you have some card component you can use:

import { Dimensions } from 'react-native';
const { width } from Dimensions.get('window');

Your style:

{
  height: width * 0.3,
  width: width * 0.5,
}

You can instead use this amazing package I have found that is pretty good and awesome for scaling tablets react-native-size-matters

You can do stuff like this:

import { ScaledSheet } from 'react-native-size-matters';

const styles = ScaledSheet.create({
  container: {
    width: '100@s',
    height: '200@vs'
  }
});

where 100@s means scale(100) and 200@vs means verticalScale(200), super cool. For more information read their docs.

You can also read this awesome Medium blog post Scaling React Native apps for Tablets

Answer 2

Answering your first question

What they mean by unitless is that pixel density is calculated depending on target device pixel density. So, 1px will vary in real device size depending on the device's pixel density, it will mean 2px in a retina display and 3px on newer 'plus' sized devices.

There's a nice table for what 1px means in each Apple device here:

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/

For Android devices, to simplify the whole thing, since the android ecosystem has a lot more devices with different resolutions, the react-native team decided to stick with Apple's standard and the framework decides for us what best files and resolutions apply, being that 1x, 2x or 3x.

In essence, that all means that in your style definitions, you will use pixels as being points. If your origin image is 100 pixels for non-retina displays, just define it as being 100px and provide also a version with 200px with @2x appended to the end of the file name. React will know what file to use.

Check this answer for more info on that:

React Native Responsive Font Size

Answering your second question

Not at all.

At least not more of a performance hit we already have on using react-native and JS. The JS code (and styled-components code for that matter) we write is used to manipulate compiled and native code for the specifics platform, so all rendering is done close to metal thus having a very good performance. The JS code the app has to run obviously is less performant than it would be if written in all native code, but it's fast enough to not even make a difference in the end.

Answer 3

I just found out there is a package (https://github.com/styled-components/css-to-react-native) used in styled-components/native module.

And this is explanation: https://www.styled-components.com/docs/basics#react-native