title: React Navigation Tab Bar Icon disappears when changing background color
body: <p>So I have a React Navigation project with a normal Tabbar. Now I want to change the Apps color to a darker Gray-Blue.
  So this is my code:</p>
  <pre class="lang-js prettyprint-override"><code>const HomeTabs = () =&gt; {
    return (
      &lt;Tab.Navigator tabBarOptions={{style:{backgroundColor: &quot;#191720&quot;}}}&gt;
        &lt;Tab.Screen name=&quot;Home&quot; component={HomeScreen} options={{tabBarIcon: ({focused}) =&gt; focused ?  &lt;ChatBubbleIconActive /&gt; : &lt;ChatBubbleIcon /&gt;}}/&gt;
        &lt;Tab.Screen name=&quot;Search&quot; component={SearchScreen} options={{tabBarIcon: ({focused}) =&gt; focused ? &lt;ShuffleIconActive /&gt; : &lt;ShuffleIcon /&gt;}}  /&gt;
        &lt;Tab.Screen name=&quot;Personal&quot; component={PersonalScreen} options={{tabBarIcon: ({focused}) =&gt; focused ? &lt;ChatBubbleIconActive /&gt; : &lt;ChatBubbleIcon /&gt;}} /&gt;
      &lt;/Tab.Navigator&gt;
    );
  }
  
  </code></pre>
  <p>My Tab bar looks like this:</p>
  <p><a href="https://i.stack.imgur.com/PAIVx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PAIVx.png" alt="![enter image description here" /></a></p>
  <p>Great! Now I wanted to remove the font/label at the bottom of my icons
  So I changed the code to this:</p>
  <pre class="lang-js prettyprint-override"><code>
  const HomeTabs = () =&gt; {
    return (
      &lt;Tab.Navigator tabBarOptions={{style:{backgroundColor: &quot;#191720&quot;}}, {showLabel: false}}&gt;
        &lt;Tab.Screen name=&quot;Home&quot; component={HomeScreen} options={{tabBarIcon: ({focused}) =&gt; focused ?  &lt;ChatBubbleIconActive /&gt; : &lt;ChatBubbleIcon /&gt;}}/&gt;
        &lt;Tab.Screen name=&quot;Search&quot; component={SearchScreen} options={{tabBarIcon: ({focused}) =&gt; focused ? &lt;ShuffleIconActive /&gt; : &lt;ShuffleIcon /&gt;}}  /&gt;
        &lt;Tab.Screen name=&quot;Personal&quot; component={PersonalScreen} options={{tabBarIcon: ({focused}) =&gt; focused ? &lt;ChatBubbleIconActive /&gt; : &lt;ChatBubbleIcon /&gt;}} /&gt;
      &lt;/Tab.Navigator&gt;
    );
  }
  </code></pre>
  <p>So I added <code>showlabel: false</code>! But now my Tabbar looks like this:</p>
  <p><a href="https://i.stack.imgur.com/mEcJo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mEcJo.png" alt="enter image description here" /></a></p>
  <p>You see: the backgroundcolor is missing. Just gone :/</p>
  <p>When I add <code>{showIcon: true}</code> tothe <strong>tabBarOptions</strong> my Tabbar looks like this:
  <a href="https://i.stack.imgur.com/QjjLX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QjjLX.png" alt="enter image description here" /></a></p>
  <p>:/</p>
  <p>So than I thought: Why not change the the order of the attributes. But than the Tabbar looks like at the beginning</p>
  <p>This would be the code:</p>
  <pre class="lang-js prettyprint-override"><code>const HomeTabs = () =&gt; {
    return (
      &lt;Tab.Navigator tabBarOptions={ {showLabel: false}, {showIcon: true}, {style:{backgroundColor: &quot;#191720&quot;}}}&gt;
        &lt;Tab.Screen name=&quot;Home&quot; component={HomeScreen} options={{tabBarIcon: ({focused}) =&gt; focused ?  &lt;ChatBubbleIconActive /&gt; : &lt;ChatBubbleIcon /&gt;}}/&gt;
        &lt;Tab.Screen name=&quot;Search&quot; component={SearchScreen} options={{tabBarIcon: ({focused}) =&gt; focused ? &lt;ShuffleIconActive /&gt; : &lt;ShuffleIcon /&gt;}}  /&gt;
        &lt;Tab.Screen name=&quot;Personal&quot; component={PersonalScreen} options={{tabBarIcon: ({focused}) =&gt; focused ? &lt;ChatBubbleIconActive /&gt; : &lt;ChatBubbleIcon /&gt;}} /&gt;
      &lt;/Tab.Navigator&gt;
    );
  }
  </code></pre>
  <p>And this is the Tabbar:</p>
  <p><a href="https://i.stack.imgur.com/E9WMF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E9WMF.png" alt="enter image description here" /></a></p>
  <p>So it seems like only the <strong>tabBarOptions</strong> would be registered. This is bad and how to change this?</p>