Phosphor React Native is a library providing a flexible, open-source icon family for React Native applications, compatible with both iOS and Android platforms. The current stable version is 3.0.4, with releases occurring semi-regularly, typically every few months for minor updates or bug fixes, and major versions (like v3.0.0) introducing breaking changes less frequently. Key differentiators include its extensive collection of icons available in six distinct weights (thin, light, regular, bold, fill, duotone), robust TypeScript support, efficient tree-shaking to minimize bundle size, and a powerful React Context API for applying global styling configurations. It's heavily inspired by the web-focused `phosphor-react` library, bringing the same aesthetic and functionality to the React Native ecosystem.
npm install phosphor-react-nativeVerified import paths — ran on the pinned version, not inferred.
Demonstrates basic icon usage, custom styling with individual props, and global styling via `IconContext.Provider`.
Update all icon imports from `import Heart from 'phosphor-react-native/Heart';` or `import { Heart } from 'phosphor-react-native';` to `import { HeartIcon } from 'phosphor-react-native';`.Ensure `react-native-svg` is installed in your project: `yarn add react-native-svg` or `npm install --save react-native-svg`. Follow `react-native-svg`'s linking instructions if necessary for older React Native versions.
Add the following type augmentation to your `global.d.ts` file or a similar declaration file in your project:
```ts
import type { SvgProps as DefaultSvgProps } from 'react-native-svg';
declare module 'react-native-svg' {
interface SvgProps extends DefaultSvgProps {
className?: string;
}
}
declare module 'phosphor-react-native' {
interface IconProps extends DefaultIconProps {
className?: string;
}
}
```Apply the type augmentation provided in the `Warnings` section to your project's `global.d.ts` or a similar type declaration file.
Install `react-native-svg` (`yarn add react-native-svg` or `npm install --save react-native-svg`) and ensure it is properly configured and linked according to its documentation, especially for older React Native versions that may require manual linking.