Some Style Props for nested Text component is not working
See original GitHub issue- Review the documentation: https://facebook.github.io/react-native
- Search for existing issues: https://github.com/facebook/react-native/issues
- Use the latest React Native release: https://github.com/facebook/react-native/releases
Environment
Environment:
OS: Windows 8.1
Node: 8.11.2
Yarn: 1.7.0
npm: 6.1.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 2.3.0.0 AI-162.3871768
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4
Description
Some style props such as borderBottomWidth
- marginVertical
- width
is NOT working for the nested Text components!
Reproducible Demo
import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text>
<Text>First</Text>
<Text style={{ borderBottomWidth: 1 }}>Second</Text>
<Text>Third</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#ECF0F1"
}
});
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:15 (6 by maintainers)
Top Results From Across the Web
Style for nested Text is not working react-native - Stack Overflow
The problem is some style props such as borderBottomWidth - marginVertical - width is NOT working for the nested components! Any idea for ......
Read more >View - React Native
View is designed to be nested inside other views and can have 0 to many children of any type. This example creates a...
Read more >Text · React Native
Text. A React component for displaying text. Text supports nesting, styling, and touch handling. In the following example, the nested title and body...
Read more >Styled Components - Emotion
styled can style any component as long as it accepts a className prop. ... by emotion internally) to filter out props that are...
Read more >Nested components - Component architecture in Figma
Nested components. Figma lets you nest components within components. This means you can structure them in all sorts of modular ways. Here are...
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 Free
Top 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
@hramos i guess it’s somehow related to this issue! Some props of Nested
<Text>
component have no effect!@muham
is there any workaround?