ReactNode icons not supported, even though types specify you should use them

[fredrikburmester]

Using a ReactNode as icon gives me this error:

Here's my code:

<NativeTabs.Screen
        name="(home)"
        options={{
          title: "Home",
          tabBarIcon: ({ focused, color, size }) => (
            <Ionicons name="home" size={size} color={color} />
          ),
        }}
      />

[okwasniewski]

Hey!

Thanks for opening the issue.

I've looked at your PR: https://github.com/fredrikburmester/streamyfin/pull/166/files

It looks like you are importing BottomTabNavigationOptions

import { BottomTabNavigationOptions } from "@react-navigation/bottom-tabs"; 

You should import

import { NativeBottomTabNavigationOptions } from "react-native-bottom-tabs/react-navigation"

This will give you correct typings. You can't pass ReactNode for the icon.

If you want to use react-native-vector-icons you can use getImageSourceSync from react-native-vector-icons:

import Icon from 'react-native-vector-icons/Ionicons';

const navIcon = Icon.getImageSourceSync('md-arrow-back', 24, 'white');

[fredrikburmester]

Ah, thank you for the amazing support!