title: React native styling. width: percentage - number
body: <p>I want to do <code>width: 100% - 50</code> so I can add an icon which is 50 wide on the right hand side of it. </p>
  
  <p>I have got <code>width: 100% - 20%</code> working by using <a href="https://github.com/vitalets/react-native-extended-stylesheet#installation" rel="noreferrer">react-native-extended-styles</a> but I don't see why that is useful because you can do <code>width: '80%'</code>. I cannot get <code>width: 100% - 50</code> working. Is there a way?</p>
  
  <p>Trying to use the <code>onLayout</code> event to get the container width, then set the <code>&lt;autocomplete&gt;</code> to <code>100% - 50</code> of the container width but it isn't working.</p>
  
  <pre><code>    let Location = (props) =&gt; {
        let locationInputElement
  
        const blur = () =&gt; {
          locationInputElement.blur()
        }
  
        let inputContainerWidth
  
        return (
          &lt;View style={styles.formItem}&gt;
            &lt;View
              onLayout={(event) =&gt; {
                inputContainerWidth = event.nativeEvent.layout.width
                console.log(inputContainerWidth)
              }}
  
      &lt;Autocomplete
                data={props.autocompleteResults.predictions}...
   style={{
              borderRadius: 8,
              backgroundColor: 'red',
              alignSelf: 'stretch',
              paddingLeft: 10,
              position: 'relative',
              ...styles.label,
              ...styles.labelHeight,
              width: inputContainerWidth - 50
            }}
          /&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    )
  }
  </code></pre>
  
  <p>It does console.log <code>335</code> when it console.logs <code>inputContainerWidth</code> but the width of the <code>&lt;autocomplete&gt;</code> is 100% still.</p>