title: TS2322 - false | Element is not assignable to type ReactElement. Error does not consistently appear in app?
body: <p>I understand what the error is saying and I have been able to fix it, but I was hoping someone could provide some clarification on why it's happening now and why it isn't happening in other areas of my app, as well as why a function and a ternary with essentially the same type signature produce different results.</p>
  <p>I wanted to display a basic error message in the following style:</p>
  <pre class="lang-js prettyprint-override"><code>{!!error.message &amp;&amp; (
    &lt;Text&gt;{error.message}&lt;/Text&gt;
  )}
  </code></pre>
  <p>But it gives the error mentioned in the title. I know <code>false</code> is handled by React and won't render anything, but knowing <code>null</code> is the preferred way of telling React not to render something I converted the above into a component. This makes the error go away:</p>
  <pre class="lang-js prettyprint-override"><code>const Error = () =&gt; {
    if (!error.message) return null;
    return &lt;Text&gt;{error.message}&lt;/Text&gt;;
  }
  </code></pre>
  <p>Out of curiosity, I tried the same thing with a ternary which should have the same signature:</p>
  <pre class="lang-js prettyprint-override"><code>{error.message ? &lt;Text&gt;{error.message}&lt;/Text&gt; : null}
  </code></pre>
  <p>However this produces a very similar error to the one in the title, except it complain about null instead.</p>
  <p>Knowing all 3 bits of code are valid React, and 2/3 being virtually identical, why is only one accepted by the TS compiler?</p>
  <p>To further confuse things, I have the below in another part of my app and TS has no issue with it:</p>
  <pre class="lang-js prettyprint-override"><code>{!loaded &amp;&amp; (
    &lt;RootStack.Screen name={SCREENS.SPLASH} component={Splash} /&gt;
  )}
  {loaded &amp;&amp; !userAuth.authenticated &amp;&amp; (
    &lt;&gt;
      &lt;RootStack.Screen name={SCREENS.SIGN_UP} component={SignUp} /&gt;
      &lt;RootStack.Screen name={SCREENS.SIGN_IN} component={SignIn} /&gt;
    &lt;/&gt;
  )}
  {loaded &amp;&amp; userAuth.authenticated &amp;&amp; (
    &lt;RootStack.Screen name={SCREENS.TABS} component={Tabs} /&gt;
  )}
  </code></pre>