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 components with a !

So we have:

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      
        
          Lorem Ipsum is 
          {"     "}
          
            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
          
        
      
    );
  }
}

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 !

---

Solutions

1. Nesting a in the middle of your .

So we have:

import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";

export default class App extends Component {
  render() {
    return (
      
        
          Lorem Ipsum is 
          
          {"     "}
          
          
            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
          
        
      
    );
  }
}

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 (
      
        
          Lorem Ipsum is 
          
            {"            "}
          
          
            {" "}
            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
          
        
      
    );
  }
}

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 (
      
        {" "}
        {i}{" "}
      
    );
  });
};