Use React Native with...

Whether you're building with Expo or bare React Native CLI, and whether or not you're using TypeScript, here's how to get react-native-fontawesome happy in your project.

Expo

Expo is the fastest way to get started with React Native, and react-native-fontawesome works out of the box — just use Expo's installer for the peer dependency so you pick up a compatible version of react-native-svg:

npx expo install react-native-svg

Then install the Font Awesome packages the same as any other project:

npm i --save @fortawesome/fontawesome-svg-core @fortawesome/react-native-fontawesome@latest
npm i --save @fortawesome/free-solid-svg-icons

No pod install needed

Expo manages native dependencies for you. You do not need to run pod install — that's only required for bare React Native CLI projects.

Bare React Native CLI

For bare react-native-cli projects, install react-native-svg directly and run pod install to finish the iOS setup:

npm i --save react-native-svg
cd ios && pod install

Then follow the steps on the setup page to install the SVG Core, icon packages, and the component itself.

TypeScript + Kit Packages

Using a Kit package can result in some import errors in either your code editor (like VS Code) or at build time with TypeScript-aware tools.

Import errors with Kit Packages

"Module '@awesome.me/kit-KIT_CODE/icons/classic/solid/' or its corresponding type declarations cannot be found."

If you see this, or if your editor complains about an import even when you know you're importing it correctly, check out the troubleshooting section of our Kit Package API.

TypeScript

@fortawesome/react-native-fontawesome is written in TypeScript — types are included and the component ships as a pure TypeScript module. You don't need to install any @types/... package.

The component exports a Props type you can use to type your own wrapper components:

import { FontAwesomeIcon, type Props as FontAwesomeIconProps } from '@fortawesome/react-native-fontawesome'

type MyIconProps = FontAwesomeIconProps & {
  label?: string
}

export function LabeledIcon({ label, ...iconProps }: MyIconProps) {
  return (
    <View>
      <FontAwesomeIcon {...iconProps} />
      {label ? <Text>{label}</Text> : null}
    </View>
  )
}

The icon lookup types (IconProp, IconPrefix, IconName, IconDefinition, IconLookup) originate from @fortawesome/fontawesome-svg-core and are re-exported from the icon packages for convenience:

import type { IconProp } from '@fortawesome/fontawesome-svg-core'

function pickIcon(): IconProp {
  return 'fa-solid fa-mug-saucer'
}

I need to use Font Awesome and React Native with...

Is there another tool or framework you want to use with React Native and Font Awesome? Give us a shout and we'll look into adding it.

    No results