pixel size (px) value of some style properties (padding, margin) may caused the app crash.

[zhengxiaoyao0716]

Environment

Run react-native info in your terminal and paste its contents here.

Environment:
  OS: Windows 10
  Node: 8.11.3
  Yarn: 1.7.0
  npm: 5.6.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: ~0.55.2 => 0.55.4

I tried to use the latest version (0.56) but as this issue reported, it even failed to installed.

Description

Just create an new app, and only try to add padding: '20px' into the style of view, then it crashed and could not open again.
Nothing error found, both the app and the Metro Bundler Console. When I connect the android log (react-native log-android), I just found that:

CatalystInstanceImpl.destroy() start

Reproducible Demo

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text /* style={{margin: '20px'}} */ >Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    // padding: '20px', // cancel the comment and the app will be broken.
  },
});

[zhengxiaoyao0716]

But if I use the px value with some others style properties such as height, width, the App would throw an errror like Unknown value: 20px instead of crashed, I think that is better if the px value is not permit.

[jamsch]

All dimensions in React Native are unitless, and represent density-independent pixels. That means instead of passing a string value to style properties that have measurements, you'll need to pass in a number.

Looking back at your styles object you'll need to change padding: '20px' to padding: 20.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
});

[zhengxiaoyao0716]

@jamsch I know that, but I think it shouldn't cause the app broken without any error message.

[kelset]

I know that, but I think it shouldn't cause the app broken without any error message.

Feel free to open a PR for that, in the meantime I'm closing this since it works as expected 😶

[ggtmtmgg]

I confirmed whether it reproduces on iOS or not.
On iOS, the exception is correctly handled.

[regalstreak]

import { StyleSheet, PixelRatio } from "react-native";

...

  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20 / PixelRatio.get(),
  },

This will convert the absolute 20dp padding to 20px fixed. Useful for developers following a strict design spec or something like that.

More info on PixelRatio