Justifying content in a View

Question

I want to have a View with a part (with three rows of text wrapped in View) aligned left and part (with image in View) right like this:

+-----------+
|   |   |   |
| A |   | B |
|   |   |   |
+-----------+

I have style for the main View:

Tab: {
  flexDirection: 'row',
  flex: 1,
  justifyContent: 'space-between',
  backgroundColor: '#F5FCFF',
  padding:5,
  borderWidth:1,
}

but what it does is

+-----------+
|   ||   |  |
| A || B |  | 
|   ||   |  |
+-----------+

I have tried align-self and justifyContent to flex-end for B, played around a bit but I can not get even whole thing to align to right.

(Maybe is a problem with these tabs because they are in a list view? Would it affect them?)

Question is: how should I get the components to listen to align and justify properties?

Answer 1

This worked for me:

Tab: {
  flexDirection: 'row'
  ...
  justifyContent: 'space-between'
}

TextContainer: {
  flex: 1
}

The important part is to give the Views (A,B & empty section) inside of the Tab all flex: 1 to make sure they all have the same width. The justifyContent: space-between for the Tab should not be necessary, but doesn't hurt. This should create three equal sections.