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: https://snack.expo.io/B1KcRgGWX

The code:

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.paragraphs}>
          <Text style={styles.textParagraph}>Lorem Ipsum is</Text>
          <Text style={styles.emptyTerm} />
          <Text style={styles.textParagraph}>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>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 25,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
    emptyTerm: {
    borderBottomWidth: 1,
    marginLeft: 5,
    marginRight: 5,
    minWidth: "25%"
  },
    paragraphs: {
    flexDirection: "row",
    flexWrap: "wrap"
  },
});

Answer 1

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

So we have:

import React, { Component } from 'react';
import { StyleSheet, Text, View } 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 { StyleSheet, Text, View } 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 { StyleSheet, Text, View } 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 has a better solution, I would appreciate writing an answer for this!

UPDATE

I've just created an issue for this in the 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>
    );
  });
};