Question about using typescript with route.params on curved bottom bar

[dowatugkins]

I'm getting the following typescript error - the code runs fine, just trying to figure out the ts issue: Type '({ route, }: NativeStackScreenProps<NavigationStackParamsList, 'List'>) => React.JSX.Element' is not assignable to type 'ScreenComponentType<any, any> | undefined'. Type '({ route, }: NativeStackScreenProps<NavigationStackParamsList, 'List'>) => React.JSX.Element' is not assignable to type 'FunctionComponent<{}>'. Types of parameters '__0' and 'props' are incompatible. Type '{}' is missing the following properties from type 'NativeStackScreenProps<NavigationStackParamsList, "List">': navigation, routets(2322)

My setup is as follows: My main stack navigator

interface AlertProps extends ViewProps {
  renderIcon: Function;
  iconContainerStyle?: ViewStyle;
  buttons: Button[];
  headerText?: string;
  subheaderText?: string;
  onCancelPress?: Function;
}

export type NavigationStackParamsList = {
  Tabs: undefined;
  Alert: AlertProps;
  Scan: undefined;
  List: {
    barcode?: string;
  };
  Settings: undefined;
  Add: undefined;
  Reports: undefined;
  Login: undefined;
  LoginStack: undefined;
  CreateUser: undefined;
};

const Stack = createNativeStackNavigator<NavigationStackParamsList>();
export default function NavigationStack() {
  const { user, isAuthenticated } = useContext(AuthContext);
  return (
    <Stack.Navigator
      screenOptions={{
        orientation: 'portrait',
        presentation: 'card',
        contentStyle: { backgroundColor: Colors.background },
      }}>
      {!isAuthenticated || !user ? (
        <Stack.Group screenOptions={{ headerShown: false }}>
          <Stack.Screen name="LoginStack" component={LoginStack} />
        </Stack.Group>
      ) : (
        <Stack.Group screenOptions={{ headerShown: false }}>
          <Stack.Screen name="Tabs" component={TabStack} />
        </Stack.Group>
      )}
      <Stack.Group screenOptions={{ presentation: 'modal' }}>
        <Stack.Screen name="Alert" component={Alert} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

My Tabs Navigator render:

<FirebaseProvider user={user}>
      <SafeAreaView style={{ flex: 1 }}>
        <CurvedBottomBar.Navigator
          type="UP"
          screenOptions={{ headerShown: false }}
          tabBar={renderTab}
          height={55}
          circlePosition="CENTER"
          bgColor={Colors.mainDark}
          renderCircle={renderTab}
          initialRouteName="List">
          <CurvedBottomBar.Screen
            position="LEFT"
            name="List"
            component={ListItems}
          />
          <CurvedBottomBar.Screen
            position="LEFT"
            ...

The ListItems screen is what is giving the error on my tab navigator.

Finally, my ListItems function declaration: 
const ListItems = ({
  route,
}: NativeStackScreenProps<NavigationStackParamsList, 'List'>) => {

From what I'm reading online, I would need to type my usage of createBottomTabNavigator similar to the way I typed my createNativeStackNavigator. I'm also fairly new to typescript, so any pointers or help on this would be helpful. Thanks.

[Jamal-ReachFirst]

+1