In-app inspector throws error when assigning percentage strings to padding(like this --> padding: '10%'), although it works in the UI.

[shubhnik]

Is this a bug report?

YES

Have you read the Contributing Guidelines?

YES

Environment

Environment:
OS: macOS Sierra 10.12
Node: 7.5.0
Yarn: 0.20.3
npm: 5.4.2
Watchman: 4.7.0
Xcode: Xcode 8.3.1 Build version 8E1000a
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.52.0 => 0.52.0

Target Platform: iOS (10.3)

Steps to Reproduce

1. Use padding with percentage string as: padding: '10%'.
2. Now open the inspector using in-app developer menu and tap on the element with the given padding
3. The inspector will error out saying that padding should be a number instead of a string, although padding as a string works in the UI.

Expected Behavior

The inspector shouldn't have thrown an error. It should have work the same way if I have given a padding as a number.

Actual Behavior

React-Native supports padding using percentage strings but the inspector is throwing error that the padding should be a number rather than a string.

Reproducible Demo

I have added a padding as a string in this app.js file. Just replace the default app.js file with this one.

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <View style={{backgroundColor: 'red', flex: 1}}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding:'10%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

PR opportunity

I think it is a good first bug. I would love to send a PR for this.

Thank You 😄

[dereknelson]

+1 this issue occurs when using StyleSheet and ExtendedStyleSheet

[hramos]

Re-opening because 0.52 was the latest on Jan 9.

[WoodyWoodsta]

How has this not received any attention? I've read multiple issues describing the same behaviour, yet they keep on being closed because they become 'stale'.

[FlaviooLima]

Can confirm this happening in React Native version 0.53.3 and 0.55.3

[ggtmtmgg]

I confirmed this is NOT happened in iOS with React Native version 0.56.0.

[shubhnik]

@ggtmtmgg the layout is rendered correctly but error is thrown when you inspect through the react-native inspector.

[micimize]

Ran into this issue with margin: 'auto'. In a nutshell, Libraries/Inspector/ElementBox.js can't handle string values like % and auto for padding and margin. More specifically:
• Libraries/Inspector/resolveBoxStyle.js does not handle string values
• ElementBox passes the results to BorderBox.js to be rendered as borderWidth${x} styles and thus throw an error
• ElementBox also computes width/height of content with them, which would also throw an error

Digging deeper, getting the actual content size actually seems fairly involved. Still, I think this should be a much higher priority issue than it is being treated as.

[micimize]

for now I monkey patched the offending code to avoid the errors

[gandreadis]

@hramos I'm interested in helping out with fixing this, but I'm a bit stuck on how to debug the inspector. I'd like to run the CLI with the modified version of the library. I've tried copying over the relevant parts (resulting in package declaration clashes), and I've also tried importing the Inspector.js file from the modified RN codebase from within a test project (resulting in a module not resolved error). Do you have any suggestions?

[ericlewis]

@gandreadis the easiest way to debug this would be to use the RNTester app, and edit in the repo directly.

[gandreadis]

@ericlewis Thanks for the suggestion, that's exactly what I needed! I'll have a look.

[gandreadis]

I've submitted a fix for this at #23804, let me know if you have any feedback!