What is the default unit for width, height, padding etc in React Native for iOS?

Question

I am building a React Native application for iOS. The facebook documentation says width, height, padding, margin etc. takes a number.

I wanted to know what the default unit of styling is.

<View style={styles.box}>
   <Text style={styles.text}> Test Component </Text>
</View>

var styles = ReactNative.StyleSheet.create({
       box: {
          padding: 10,
          width:100,
          height:100,
       },
       text: {
          color: 'black',
          fontSize: 30,
       },
});

In ReactNative default unit is points or percentages as the screen size may vary based on different devices, this makes it easy to render the same component in different screen sizes. — Vipin Dubey, Mar 07 '17 at 14:46
When you need to define height/width based on device screen you can import Dimensions and use below var width = Dimensions.get('window').width; var height = Dimensions.get('window').height; use these variable directly in your StyleSheet, you can also add or subtract from them for generating different columns and layouts. — Vipin Dubey, Mar 07 '17 at 14:48

score 6 · Answer 1 · edited Nov 15 '19 at 00:19

6

From the docs:

All dimensions in React Native are unitless, and represent density-independent pixels. Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.

So the unit dimension is dp.

edited Nov 15 '19 at 00:19

B--rian

5,578
10
38
89

answered Mar 07 '17 at 14:45

Gabriel Mesquita

2,271
1
20
30

score 3 · Answer 2 · edited Jun 20 '20 at 09:12

I Tested.

Android Native with DP unit

vs

Android React Native

Android Native Android React Native

iOS Native with Point unit

vs

iOS React Native

iOS Native iOS React Native

Result

At least, the unit in RN is approximately the same as dp in Android and pt in iOS.

Also, the unit in RN is applied sp value in Android for scale font size.

Code

RN

      <SafeAreaView style={{flex: 1, backgroundColor: 'black'}}>
        <View
          style={{
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'white',
            width: 150,
            height: 150,
            marginTop: 100,
            marginStart: 100,
          }}>
          <Text style={{color: 'black', textAlign: 'center', fontSize: 16}}>
            {'[React Native]\n100 x 100\nmargin top = 100\nmargin start = 100\n\nfontSize = 16\nㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ'}
          </Text>
        </View>
      </SafeAreaView>

Android

        <TextView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginStart="100dp"
            android:layout_marginTop="100dp"
            android:background="#fff"
            android:gravity="center"
            android:text="[ANDROID]\n\n100dp x 100dp\nmargin top = 100dp\nmargin start = 100dp\n\n textSize = 16sp\nㅁㅁㅁㅁㅁㅁㅁㅁㅁㅁ"
            android:textColor="#000"
            android:textSize="16sp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />