How to align Text objects by first line in React Native

Question

In my application, I want to have large paragraphs of text with a timestamp center aligned with the first line of each Text object. Is there a way to do this?

Here is an example of what I'm trying to do.

I've tried isolating the first line into a separate object, but I couldn't figure out how to. In CSS I could have used pseudo-elements to get this done.

My current code for the two elements looks something like

<View>
    <Text style={styles.timestamp}>6:42 AM</Text>
    <Text style={styles.paragraph}>
        A long paragraph of text for demonstration.
    </Text>
</View>

Can you show us what have you tried? or what isn't working in your code? — Dinesh Kumar, Aug 04 '19 at 06:20
@DineshKumar There really isn't any code to show, because I don't know where to start. I added my code for the two elements to my question. — Willie Jeng, Aug 04 '19 at 06:50
I Guess you want both timestamp and text in same line right? — Dinesh Kumar, Aug 04 '19 at 07:08
Possible duplicate of [Simulate display: inline in React Native](https://stackoverflow.com/questions/34624100/simulate-display-inline-in-react-native) — Dinesh Kumar, Aug 04 '19 at 07:32

score 0 · Answer 1 · answered Aug 04 '19 at 08:16

Take a look at this:

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

class Test extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            alignSelf: "stretch",
            margin: 30,
            borderWidth: 1
          }}
        >
          {/* timestamp */}
          <View
            style={{
              flex: 1,
              justifyContent: "flex-start",
              alignItems: "center",
              alignSelf: "stretch"
            }}
          >
            <Text style={{ backgroundColor: "lime", fontSize: 22 }}>
              6:42 AM
            </Text>
          </View>

          {/* text */}
          <View
            style={{
              flex: 2.5,
              justifyContent: "center",
              alignItems: "center",
              alignSelf: "stretch"
            }}
          >
            <ScrollView style={{ flex: 1, alignSelf: "stretch" }}>
              <Text style={{ fontSize: 22 }}>
                <Text style={{ backgroundColor: "cyan", fontSize: 22 }}>
                  Line with color{"\n"}
                </Text>
                Lorem Ipsum is simply 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. It has
                survived not only five centuries, but also the leap into
                electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                Lorem Ipsum. The standard chunk of Lorem Ipsum used since the
                1500s is reproduced below for those interested. Sections 1.10.32
                and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are
                also reproduced in their exact original form, accompanied by
                English versions from the 1914 translation by H. Rackham. Lorem
                Ipsum is simply 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. It has
                survived not only five centuries, but also the leap into
                electronic typesetting, remaining essentially unchanged. It was
                popularised in the 1960s with the release of Letraset sheets
                containing Lorem Ipsum passages, and more recently with desktop
                publishing software like Aldus PageMaker including versions of
                Lorem Ipsum. The standard chunk of Lorem Ipsum used since the
                1500s is reproduced below for those interested. Sections 1.10.32
                and 1.10.33 from de Finibus Bonorum et Malorum by Cicero are
                also reproduced in their exact original form, accompanied by
                English versions from the 1914 translation by H. Rackham.
              </Text>
            </ScrollView>
          </View>
        </View>
      </View>
    );
  }
}

export default Test;

If you need the timestamp to scroll too, let me know!

score 0 · Answer 2 · answered Aug 04 '19 at 12:57

0

It's that easy

<View style={{ flexDirection: 'row' }}>
    <Text>6:42 AM</Text>
    <Text>       </Text> // this is just for separating them, you can do it in better ways
    <Text>{text}</Text>
</View>

because they are rendered in row direction, you'll get what you want. you know that you must replace that hardcoded time with you object and etc...

answered Aug 04 '19 at 12:57

Amir Hedieh

1,120
1
14
28

this isn't the solution to the problem considering different screen sizes – Aashish Bhatnagar Jul 02 '20 at 08:10

How to align Text objects by first line in React Native

2 Answers2