Some Style Props for nested Text component is not working

[MoKhajavi75]

• 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"
  }
});

[FabianoLothor]

+1

[hramos]

"not working" is not very descriptive. Can you elaborate?

[MoKhajavi75]

@hramos the borderBottomWidth: 1 has no effect for nested <Text>.
And so margin: 10 or width: 100 and some more.

I expected the Second to have a bottom border with width of 1 but no effect!

[FabianoLothor]

I'm with a problem about this issue.

<View>
<Text>
<Text onLayout={e => {console.log("this isn't triggered!")}}>{"foo"}</Text>
</Text>
</View>

<View>
<Text onLayout={e => {console.log("here the event it is called, but I need call in a SubText")}}>{"foo"}</Text>
</View>

[hramos]

@FabianoLothor you might want to open a new issue to describe what you're encountering.

[MoKhajavi75]

@hramos i guess it's somehow related to this issue! Some props of Nested <Text> component have no effect!

[MoKhajavi75]

@hramos would you please add the related labels?

[hramos]

Which labels?

[lwinkyawmyat]

borderBottomWidth, marginVertical, width aren't Text component style props. You can see full list of Text Style Props by clicking here.

Text Style Props is working in nested Text component. Can you check demo here?

[MoKhajavi75]

@lwinkyawmyat then why i can use borderBottomWidth for a non-nested <Text>?

take a look:

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: 3 }}>Second</Text>
          <Text>Third</Text>
        </Text>

        <Text style={{ borderBottomWidth: 3 }}>Fourth</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#ECF0F1"
  }
});

The style={{ borderBottomWidth: 3 }} for Second text is non-effective while for Fourth is effective!

[lwinkyawmyat]

borderBottomWidth, marginVertical, width aren't Text component style props.

Sorry for my mistake. Actually, Text component's style props is support View Style Props.

Text component has limited style inheritance.

[MoKhajavi75]

So you mean i can't use style={{ borderBottomWidth: 3 }} for a nested <Text>?

By the way, i can't find the limited style inheritance section in the docs.