title: width: '100%' vs Dimension.get('window').width in react native
body: <p>I'm new to react native and css styling as a whole so sorry if the question is very basic. I want a view to take 100% of the available screen width and when i use the code below my view seems to go outside the screen boundry, though when I use Dimension.get('window').width it work just fine. can someone explain how they differ from each other. any help would be really appreciated. thanks</p>
  
  <pre><code>    return(
          &lt;TouchableOpacity style = {styles.food_wrapper}
              onPress = {()=&gt; this.userAction()}
          &gt;
              &lt;Text style = {styles.foodname}&gt;
                  {this.name}
              &lt;/Text&gt;
  
              &lt;Text style = {styles.foodprice}&gt;
                  Rs: {this.price}
              &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
      );
  
  
  food_wrapper:{
      flex: 1,
      flexDirection :'row',
      justifyContent:'space-between',
      alignItems:'flex-start',
      width: '100%',//Dimensions.get('window').width,
      minHeight: 50,
      marginVertical: '1%',
      padding: '2%',
      backgroundColor: 'rgb(155,200,200)'
  },
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0pQN8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0pQN8.png" alt="when I use Dimensions.get(&#39;window&#39;).width"></a></p>
  
  <p><a href="https://i.stack.imgur.com/fnYs1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fnYs1.png" alt="when I use width: &#39;100&#39;"></a></p>