Empty text space in a continuous Text component react-native

Question

I have this problem:

I need to put the word \"dummy\" in the first line until the line was complete.

You can see the sample here: htt

Answer 1

You have to wrap all your <Text> components with a <Text>!

So we have:

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>Lorem Ipsum is </Text>
          <Text>{"     "}</Text>
          <Text>
            dummy text of the printing and typesetting industry. Lorem Ipsum has
            been the industry's standard dummy text ever since the 1500s, when
            an unknown printer took a galley of type and scrambled it to make a
            type specimen book
          </Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    padding: 25,
    paddingTop: 20,
    backgroundColor: "#ecf0f1"
  }
});

but the problem is you can't set the borderBottomWidth to your empty <Text>!

---

Solutions

1. Nesting a <View> in the middle of your <Text>.

So we have:

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>Lorem Ipsum is </Text>
          <View style={styles.nestedViewStyle}>
          <Text >{"     "}</Text>
          </View>
          <Text>
            dummy text of the printing and typesetting industry. Lorem Ipsum has
            been the industry's standard dummy text ever since the 1500s, when
            an unknown printer took a galley of type and scrambled it to make a
            type specimen book
          </Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    padding: 25,
    paddingTop: 20,
    backgroundColor: "#ecf0f1"
  },

  nestedViewStyle: {
    width: 50,
    borderBottomWidth: 1,
    marginVertical: 5,
  }
});

but Nested Views is iOS only (Docs)!

2. For android, it's some dirty coding but seems to work!

So we have something like this:

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>Lorem Ipsum is </Text>
          <Text style={{ textDecorationLine: "underline" }}>
            {"            "}
          </Text>
          <Text>
            {" "}
            dummy text of the printing and typesetting industry. Lorem Ipsum has
            been the industry's standard dummy text ever since the 1500s, when
            an unknown printer took a galley of type and scrambled it to make a
            type specimen book
          </Text>
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    padding: 25,
    paddingTop: 20,
    backgroundColor: "#ecf0f1"
  }
});

It's the way i think we can do it! If anybody have a better solution, i would appreciate to wrote an answer for this!

UPDATE

I've just create an issue for this in react-native repo!

Update again!

You can use this function:

splitPhrase = (phrase, isTerm = false) => {
  let words = phrase.split(" ");
  return words.map((i, k) => {
    return (
      <Text key={k} style={isTerm ? styles.emptyTerm : styles.paragraphs}>
        {" "}
        {i}{" "}
      </Text>
    );
  });
};