0

I code a simple react-native messaging application with kind of message baloons containing 2 text elements: a message text and message time. A message text can be multiline and the time text has fixed width. However, i ran into the problem that I could not arrange the time text element in the same level as the last bottom line of message text.

My goal is to get a component with behavior similar to easy-to-do HTML example but I don't know how to implement such in flex-box model in RN. 

.container {
  width: 300px;
  background-color: #ff0000;
  border-radius: 10px;
  padding: 10px;
}

.time {
  width: 50px;
  text-align: right;
  background-color: #00ff00;
  display: inline-block;
  float: right;
}
.separator {
  height: 10px;
}
.clear{
  clear: both;
}
<p>when the bottom line of message is not long enough that time can be fit into the same line</p>
<div class="container">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. Praesent id posuere tortor. </span>
  <span class="time">12:37</span>
  <div class="clear"></div>
</div>

<div class='separator'></div>
<p>when the bottom line of message takes more space, the time text takes additional line at bottom</p>

<div class="container">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida tristique arcu, malesuada dignissim dui porttitor id. </span>
  <span class="time">12:37</span>
  <div class="clear"></div>
</div>

Any help would be appreciated.

user3676296
  • 1

1 Answers1

0

This might not be the answer you were looking for but I'd suggest using a UI component library such as Nativebase if you're getting started, it's good practice and you surely don't want to build everything from scratch. They have lots of components you can take advantage of and have lots of example on how to implement them. You should also check out material design - https://material.io/

user10077895
  • 25
  • 5