# Use React Native with...

Using Font Awesome with Expo, bare React Native CLI projects, and TypeScript.

> 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`:

```bash
npx expo install react-native-svg
```

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

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

  <h4>
    No pod install needed
  </h4>

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:

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

Then follow the steps on the [setup page](/web/use-with/react-native.md) 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.

  <h4>
    Import errors with Kit Packages
  </h4>

"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](/web/dig-deeper/kit-package-api.md), check out the [troubleshooting section of our Kit Package API](/web/dig-deeper/kit-package-api.md#typescript).

## 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:

```tsx
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:

```ts
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](mailto:hello@fontawesome.com?subject=Font%20Awesome,%20I%20need%20help%20with%20v7!) and we'll look into adding it.