title: How to make item position static when fetch from array
body: <p>Currently i have an array like this</p>
  <pre><code>const HeaderData = [
    {
      mainData: [
        {
          title: &quot;Created On&quot;,
          detail: &quot;4/1/2021&quot;,
        },
        {
          title: &quot;Created By&quot;,
          detail: &quot;Jennifer. 0&quot;,
        },
        {
          title: &quot;Started&quot;,
          detail: &quot;4/1/2021&quot;,
        },
        {
          title: &quot;Completed&quot;,
          detail: &quot;In progress&quot;,
        },
      ],
    },
    {
      activityName: [
        {
          title: &quot;Take the stairs&quot;,
          notSatisfied: 5,
          neutral: 0,
          satisfied: 2,
        },
        {
          title: &quot;5 Sets of Sit-Ups&quot;,
          notSatisfied: 3,
          neutral: 2,
          satisfied: 5,
        },
        {
          title: &quot;3 sets of Push-Up&quot;,
          notSatisfied: 7,
          neutral: 3,
          satisfied: 1,
        },
        {
          title: &quot;Weight-lifting&quot;,
          notSatisfied: 3,
          neutral: 2,
          satisfied: 0,
        },
      ],
    },
  ]
  </code></pre>
  <p>And i fetch data to have something like this
  <a href="https://i.stack.imgur.com/uYdTH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uYdTH.png" alt="enter image description here" /></a></p>
  <p>But i only these item like this</p>
  <p><a href="https://i.stack.imgur.com/fXlNO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fXlNO.png" alt="enter image description here" /></a></p>
  <p>Here is the code:</p>
  <pre><code>        &lt;View&gt;
              {HeaderData.filter((elm) =&gt; elm.activityName).map((item, key) =&gt; (
                &lt;View key={key} row centerV&gt;
                  &lt;View&gt;
                    {item.activityName.map((itemD, key) =&gt; (
                      &lt;View key={key} row centerV&gt;
                        &lt;View padding-10&gt;
                          &lt;Text preset=&quot;h4&quot;&gt;{itemD.title}&lt;/Text&gt;
                          &lt;Text preset=&quot;h6&quot; style={{ color: color.primary }} &gt;About&gt;&gt; &lt;/Text&gt;
                        &lt;/View&gt;
                        &lt;View key={key} &gt;
                          &lt;Text preset=&quot;h4&quot;&gt;{itemD.notSatisfied}&lt;/Text&gt;
                        &lt;/View&gt;
                      &lt;/View&gt;
                    ))}
                  &lt;/View&gt;
  
                &lt;/View&gt;
              ))}
            &lt;/View&gt;
  </code></pre>
  <p>I try to put number outside, but problem is i dont know how to make number match text, mean number will be same line of text, but i got this
  <a href="https://i.stack.imgur.com/my5R8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/my5R8.png" alt="enter image description here" /></a></p>
  <p><strong>So, How can i make number the same line as text and they are on the same row?</strong></p>