title: How to design a rank with flexbox and page controllview
body: <p>I'm trying to put the name's on the left and the rank on the right. I tryed the flexDirection row with a space between or space evenly but it still doesn't work.</p>
  <p><a href="https://i.stack.imgur.com/l1HCk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l1HCk.png" alt="enter image description here" /></a>
  Do you have any solution for that ?</p>
  <p>Also my function :</p>
  <pre><code> renderRanking = () =&gt; {
      return this.state.ranking.map((element) =&gt; {
        return (
          &lt;View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-’‘’',
            }}&gt;
            &lt;View style={{flex: 1}}&gt;
              &lt;Text style={{fontSize: 20, color: 'white'}}&gt;{element.club}&lt;/Text&gt;
  
              &lt;Text style={{fontSize: 20, color: 'white'}}&gt;
                {element.moyenne}
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        );
      });
    };
  </code></pre>
  <p>And my render</p>
  <pre><code>render() {
      return (
        &lt;SafeAreaView style={{flex: 1, backgroundColor: 'black'}}&gt;
          &lt;View style={{flex: 1, backgroundColor: 'black'}}&gt;
            &lt;ScrollView&gt;
              &lt;View
                style={{
                  flex: 1,
                }}&gt;
                &lt;Text&gt;{this.OpenDecibels()}&lt;/Text&gt;
              &lt;/View&gt;
  
              &lt;View style={{paddingBottom: 30}}&gt;
                &lt;PageControlView defaultPage={1}&gt;
                  &lt;View&gt;{this.renderRanking()}&lt;/View&gt;
                &lt;/PageControlView&gt;
              &lt;/View&gt;
            &lt;/ScrollView&gt;
          &lt;/View&gt;
        &lt;/SafeAreaView&gt;
      );
    }
  }
  </code></pre>