title: React Native-Styling Tab Navigator
body: <p>I want to add custom styles to my tab navigator. I have tried using the <code>style:{}</code> inside <strong>screenOptions</strong> but the styles don't work. Only the built in style props work. Here is my code:</p>
  <pre><code>import React from &quot;react&quot;;
  import { createBottomTabNavigator } from &quot;@react-navigation/bottom-tabs&quot;;
  
  import Home from './Home'
  import Create from './Create'
  import Messages from './Messages'
  import Forum from './Forum'
  import Profile from './Profile'
  import LottieView from &quot;lottie-react-native&quot;;
  import Icon from 'react-native-vector-icons/Feather';
  
  const Tabs = createBottomTabNavigator();
  
  export default function App() {
      return (
  
          &lt;Tabs.Navigator
  
              screenOptions={({ route }) =&gt; ({
                  tabBarShowLabel: false,
                  tabBarHideOnKeyboard: true,
                  style: {
                      borderRadius: 15,
                      height: 90,
                  },
                  tabBarIcon: ({ focused, color, size }) =&gt; {
                      let iconName;
  
                      switch (route.name) {
                          case 'Home':
                              iconName = 'home';
                              break;
                          case 'Messages':
                              iconName = 'message-circle';
                              break;
                          case 'Create':
                              iconName = 'home';
                              break;
                          case 'Forum':
                              iconName = 'activity';
                              break;
                          case 'Profile':
                              iconName = 'user';
                              break;
                          default:
                              break;
                      }
                      // return &lt;Ionicons name={iconName} size={size} color={color} /&gt;;
                      // return &lt;LottieView source={filePath} loop={false} autoPlay={focused} /&gt;;
                      return &lt;Icon name={iconName} color={color} size={24} /&gt;;
                  },
              })}
          &gt;
              &lt;Tabs.Screen name=&quot;Home&quot; component={Home} /&gt;
              &lt;Tabs.Screen name=&quot;Messages&quot; component={Messages} /&gt;
              &lt;Tabs.Screen name=&quot;Create&quot; component={Create} /&gt;
              &lt;Tabs.Screen name=&quot;Forum&quot; component={Forum} /&gt;
              &lt;Tabs.Screen name=&quot;Profile&quot; component={Profile} /&gt;
          &lt;/Tabs.Navigator&gt;
      );
  }
  </code></pre>
  <p>Is there another way to style it. Any help would be appreciated. Thanks in advance.</p>