title: stretching component using left and right in react native
body: <p>I'm trying to stretch my <code>&lt;View&gt;</code> component using <code>left</code> and <code>right</code></p>
  <p>I know how to do it in html and css:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.testing{
    background-color: orange;
    position: absolute;
    left: 100px;
    right: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="testing"&gt; 
    Hello there
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>but how do I achieve the same result in react native?</p>
  <p><strong>Edit</strong><br />
  I tried this but it doesn't work:</p>
  <pre><code>export default function App() {
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={{ left: 100,right: 20,height:50,position: 'absolute', backgroundColor: 'orange'}}&gt;&lt;Text&gt;hello there&lt;/Text&gt;&lt;/View&gt;
      &lt;/View&gt;
    );
      }
      
      const styles = StyleSheet.create({
        container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        },
      });
  </code></pre>