question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Some Style Props for nested Text component is not working

See original GitHub issue

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:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
MohamadKh75commented, Jun 16, 2018

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

0reactions
anoopmmcommented, Feb 4, 2019

@muham

Then we have to wait for implementation of that feature request! Thanks for you description and temporary solution 😁

is there any workaround?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found