title: React Navigation TypeScript: Argument of type ... is not assignable to parameter of type 'BottomTabNavigatorConfig'
body: <p>I'm building a React Native app and I'm handling my navigation using React Navigation V2.</p>
  
  <p>I literally copy pasted the following code from <a href="https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance" rel="nofollow noreferrer">the documentation</a>:</p>
  
  <pre><code>const MainTabs = createBottomTabNavigator(
    { Home: HomeStack, Settings: SettingsStack },
    {
      navigationOptions: ({ navigation }: NavigationScreenProps) =&gt; ({
        tabBarIcon: ({ focused, tintColor }) =&gt; {
          const { routeName } = navigation.state;
          let iconName;
          if (routeName === "Home") {
            iconName = `ios-information-circle${focused ? "" : "-outline"}`;
          } else if (routeName === "Settings") {
            iconName = `ios-options${focused ? "" : "-outline"}`;
          }
  
          // You can return any component that you like here! We usually use an
          // icon component from react-native-vector-icons
          return &lt;Ionicons name={iconName} size={25} color={tintColor} /&gt;;
        }
      }),
      tabBarOptions: {
        activeTintColor: "tomato",
        inactiveTintColor: "gray"
      }
    }
  )
  </code></pre>
  
  <p>For some reason typescript throws the following error:</p>
  
  <pre><code>[ts]
  Argument of type '{ navigationOptions: ({ navigation }: any) =&gt; { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) =&gt; Icon; }; }' is not assignable to parameter of type 'BottomTabNavigatorConfig'.
    Types of property 'navigationOptions' are incompatible.
      Type '({ navigation }: any) =&gt; { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) =&gt; Icon; }' is not assignable to type 'NavigationBottomTabScreenOptions | ((navigationOptionsContainer: NavigationScreenConfigProps &amp; { navigationOptions: NavigationScreenProp&lt;NavigationRoute&lt;NavigationParams&gt;, NavigationParams&gt;; }) =&gt; NavigationBottomTabScreenOptions) | undefined'.
  </code></pre>
  
  <p>How can that be? What am I doing wrong?</p>