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