What Is the Default Unit of Style in React Native

What is the default unit of style in React Native?

I share your confusion somewhat, not being able to actively inspect with a developer console as we are used to in the browser.

I am not familiar with the 'dp' unit, but from what I gather width: 1 renders differently on each device depending on the pixel density of the screen (see link). The information in the react-native docs say that 1 would render thicker on screens with high pixel density. Which then sounds logical as you have more precision on high density screens than you would have on low density screens and react-native aims at being universal so it would not assume high dpi.

It is my understanding that you can use the below linked PixelRatio API to calculate sizes for detail elements (think borders, icons, etc), that way you can dynamically adjust the rendered size according to the device's screen density.

https://facebook.github.io/react-native/docs/pixelratio.html#content

Can we use rems to style a component in react native

Yes, you can! Using this npm package you can easily do.

STEPS

1. run npm i react-native-extended-stylesheet --save
2. Define styles using EStyleSheet.create() instead of StyleSheet.create():

Simple Example :

/* component.js */
import EStyleSheet from 'react-native-extended-stylesheet';

// define extended styles 
const styles = EStyleSheet.create({
  column: {
    width: '80%'                                    // 80% of screen width
  },
  text: {
    color: '$textColor',                            // global variable $textColor
    fontSize: '1.5rem'                              // relative REM unit
  },
  '@media (min-width: 350) and (max-width: 500)': { // media queries
    text: {
      fontSize: '2rem',
    }
  }
});

// use styles as usual
class MyComponent extends React.Component {
  render() {
    return (
      <View style={styles.column}>
        <Text style={styles.text}>Hello</Text>
      </View>
    );
  }
}  

Where can I find all list of style properties supported by react native?

Here's a cheatsheet:

• React Native Styling Cheat Sheet

The supported styles are in the official documentation for each component. Here are the links for View and Text components:

• View : https://reactnative.dev/docs/view#style
• Text: https://reactnative.dev/docs/text#style

Note that where it says View Style Props... on the top of styles for Text, it means it also supports (most of) the styles that View supports.

what dimension units are used in React Native?

The units are logical pixels for iOS. See SO question here, which was answered by a contributor to React Native.

For Android, the units are in DIP which is kinda similar to logical points in iOS (There is a nice write up on the subject). If you look at the source code here, you'll see that they convert the supplied value toPixelFromDIP.

React native responsive units

No, this is not automatically responsive. If we set padding:20, then the padding of that component stays on 20 no matter what phone we use. The same holds for font sizes, even though they are scaled depending on what pixel density we are dealing with.

A responsive design must be implemented by hand which could be done by using Dimensions as follows.

import { Dimensions } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

We can now use a different padding depending on the width of our device.

padding: width > 320 ? 20 : 15

When it comes to general layouting, then flexbox takes care of responsiveness, e.g. imagine that we have three elements on the screen with flexDirection: 'row' and we set flex:1 for all of them, then the available space will be divided equally between them no matter what our screen width is. The same applies for height.

It might be advised to create a separate Fonts file which holds font sizes and similar constants in a common place, so we only need to change them once.

import { Dimensions } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

export Fonts = {

    h1: width > 320 ? 18 : 15,
    h2: width > 320 ? 16 : 14,

   ...
}

The above takes care of responsive font sizes and we can use it in all other screens, e.g.

<Text style={{fontSize: Fonts.h1}}>I am a header</Text>

Why does styled-components 5.x warn about Expected style to contain units.

_{After some research and questions on github I tracked this one down...}

Styled Components uses the package css-to-react-native for it's React Native conversions.

css-to-react-native recently released version 3 which now requires units to be present for all measurements. Details here.

You should use px for React Native as it is density independent.

How to use vw and vh css with React Native

I don't know if react-native supports viewport units. But, there's a module:

https://www.npmjs.com/package/react-native-viewport-units

Install

npm install react-native-viewport-units --save

Usage

var {vw, vh, vmin, vmax} = require('react-native-viewport-units');

Notice the required operator/syntax: x * vw

<View style={{height:50*vh, width:50*vw}}/>
var styles = StyleSheet.create({
  lookingGood: {
    width: 15*vmin,
    height: 10*vmax,
    padding: 2*vw,
    margin: 4*vh,
  }
});

---

Related Topics