Default IconLibrary

[unbroken360]

Hi

Thanks for this great package! I'm using react-native-paper-dates in a project where we've standardized all icons to use @expo/vector-icons/MaterialIcons instead of the default MaterialCommunityIcons.

It would be great if react-native-paper-dates allowed us to override the icon component used (e.g., via a prop or theme), so that we can use a different icon library for consistency across our app.

For example, DatePickerInput currently renders the calendar icon using MaterialCommunityIcons internally, but there's no way to change this.

Would you consider adding support for custom icon components or exposing a prop like iconComponent or renderIcon?

Thanks a lot!

[iM-GeeKy]

PR's are welcome!

[robinlindhout]

You can using the settings of react-native paper

const paperSettings: {
  icon: (p: PaperIconProps) => React.ReactNode;
} = {
  icon: MaterialIcon,
};

        <PaperProvider theme={paperTheme} settings={paperSettings}

import * as React from 'react';
import { View } from 'react-native';
import { Text } from 'react-native-paper';

import ArrowBack from './ArrowBack';
import Calendar from './Calendar';
import Check from './Check';
import ChevronLeft from './ChevronLeft';
import ChevronRight from './ChevronRight';
import Close from './Close';
import type { CustomIconProps } from './Icon';
import MenuDown from './MenuDown';
import MenuUp from './MenuUp';
import Pencil from './Pencil';
import Clock from './Clock';
import Keyboard from './Keyboard';

export default function MaterialIcon(props: CustomIconProps) {
  // this is needed for dependencies of react-native-paper like react-native-paper-dates
  switch (props.name) {
    case 'close':
      return <Close {...props} />;
    case 'chevron-left':
      return <ChevronLeft {...props} />;
    case 'chevron-right':
      return <ChevronRight {...props} />;
    case 'pencil-outline':
      return <Pencil {...props} />;
    case 'calendar-blank':
      return <Calendar {...props} />;
    case 'menu-down':
      return <MenuDown {...props} />;
    case 'menu-up':
      return <MenuUp {...props} />;
    case 'arrow-left':
      return <ArrowBack {...props} />;
    case 'check':
      return <Check {...props} />;

    case 'clock-outline':
      return <Clock {...props} />;

    case 'keyboard-outline':
      return <Keyboard {...props} />;

    default:
      return (
        <View {...props}>
          <Text>⁉️</Text>
        </View>
      );
  }
}