title: React Native - how to set fixed width to individual characters (number, letter, etc)
body: <p>I am having a problem in a React Native app I'm building. I have a stopwatch and since each number character has a different width, when the time is increased the text begins moving all over the place, as opposed to staying in tact with a fixed width.</p>
  
  <p>For example, if you have a mobile iOS device, open the default clock app that is shipped with it and use your stopwatch. You'll notice that each character in the <code>00:00:00</code> series has a fixed width, or at least it seems that way. If one of the 0 turns into a 1, even though 1 is seemingly smaller in width, it still fills up the same amount of space and thus the text does not jump all over the place.</p>
  
  <p>In my React Native app, however, this is not the case. 1 takes up less width than 0 or any other number, so it makes the text jump all over the place and it's really annoying.</p>
  
  <p>Here is a good, working version (notice how on each change of a number, the width of the 'container' that the number is in never changes?) This ensures a smooth transition:</p>
  
  <p><a href="https://i.stack.imgur.com/gt5cA.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/gt5cA.gif" alt="enter image description here"></a></p>
  
  <p>Now take a look at my version, a disaster:</p>
  
  <p><a href="https://i.stack.imgur.com/zFK1g.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/zFK1g.gif" alt="enter image description here"></a></p>
  
  <p>I can't seem to find a solution to this.</p>
  
  <p>I feel like one way to solve this would be to have each character in a separate <code>&lt;Text&gt;</code> tag with a set width, but I know that would be completely overkill. There must be an easier way to do this.</p>
  
  <p>Any guidance would be appreciated.</p>