Ask Your Question

Can a TypeScript definition for icon names be provided in MaterialCommunityIcons for React Native?

asked 2021-11-01 11:00:00 +0000

qstack gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2022-08-03 03:00:00 +0000

bukephalos gravatar image

Yes, a TypeScript definition for icon names can be provided in MaterialCommunityIcons for React Native. The definition can be created using the IconProps interface for the component and specifying the possible values for the name prop using a union type. Here's an example:

import { IconProps } from 'react-native-vector-icons/MaterialCommunityIcons';

type MaterialCommunityIconName =
  | 'account'
  | 'bell'
  | 'camera'
  | 'car'
  | 'clock'
  | 'email'
  // add more names here

interface MaterialCommunityIconProps extends IconProps {
  name: MaterialCommunityIconName;

// usage:
import MCIcon from 'react-native-vector-icons/MaterialCommunityIcons';

const MyComponent = () => (
  <MCIcon name="account" size={30} color="red" />

This provides type safety for the name prop and ensures that only allowed icon names are used.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2021-11-01 11:00:00 +0000

Seen: 23 times

Last updated: Aug 03 '22