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

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[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

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.55?

Thank you for your contributions.