title: Adding a custom 'Add' button to createMaterialBottomTabNavigator in react navigation 5
body: <p>I'm making a project (react native, expo, react navigation 5) where I wanted to add a custom 'add' button to the bottom tabs, but since...</p>
  
  <blockquote>
    <p><em>A navigator can only contain 'Screen' components as its direct
    children</em></p>
  </blockquote>
  
  <p>...I needed to find a way to pass my custom component.</p>
  
  <p>Seemed easy enough, I mean there are docs:</p>
  
  <ul>
  <li><a href="https://reactnavigation.org/docs/material-bottom-tab-navigator" rel="nofollow noreferrer">https://reactnavigation.org/docs/material-bottom-tab-navigator</a></li>
  <li><a href="https://reactnavigation.org/docs/bottom-tab-navigator" rel="nofollow noreferrer">https://reactnavigation.org/docs/bottom-tab-navigator</a></li>
  <li><a href="https://reactnavigation.org/docs/custom-navigators/" rel="nofollow noreferrer">https://reactnavigation.org/docs/custom-navigators/</a></li>
  </ul>
  
  <p>...but in looking at these and the questions from others I either only found muy complicado examples or examples of how to achieve this in earlier versions. </p>
  
  <p>In the end I found a simple solution that so far works like a charm (fully grateful to any suggestions as to why this might be a terrible idea).</p>
  
  <p>Figured I post my solution if anyone is in a similar pickle. See answer below.</p>