In-app inspector throws error when assigning percentage strings to padding(like this --> padding: '10%'), although it works in the UI.
See original GitHub issueIs 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
- Use padding with percentage string as:
padding: '10%'
. - Now open the inspector using in-app developer menu and tap on the element with the given padding
- 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 😄
Issue Analytics
- State:
- Created 6 years ago
- Reactions:4
- Comments:14 (3 by maintainers)
Top Results From Across the Web
Padding/Margin Percentages - Possible CSS bug?
The W3C standards dictate that any percentages for paddings and margins are a percentage of the element's width, not height:.
Read more >Slow rendering - Android Developers
If your app suffers from slow UI rendering, then the system is forced to skip frames and the user will perceive stuttering in...
Read more >Safari Technology Preview Release Notes - Apple Developer
toMatrix() to throw an exception if its length is not compatible with a px ... Fixed padding on a flex-based horizontal scroller preventing...
Read more >GDScript format strings - Godot Docs
In such a case, the values are handed in the form of an array, one value per placeholder (unless using a format specifier...
Read more >Lightning Aura Components Developer Guide
methods to create a custom UI with your Salesforce data. The possibilities of what you can do with Aura components are endless. While....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@ggtmtmgg the layout is rendered correctly but error is thrown when you inspect through the react-native inspector.
I’ve submitted a fix for this at #23804, let me know if you have any feedback!