# Troubleshoot

Solutions and tips for resolving common Font Awesome issues in React Native projects.

> Having trouble using Font Awesome with React Native? This page is all about getting you unstuck.

## Slow Builds or Tree-Shaking Issues

If your Metro builds are slow or your bundle feels huge, check how you're importing icons. Using a top-level import like this pulls in the entire style package:

```ts
// ❌ Avoid in React Native — pulls in the entire style package
import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons'
```

Use deep imports instead:

```ts
// ✅ Deep import — only the icon you need
import { faStroopwafel } from '@fortawesome/pro-solid-svg-icons/faStroopwafel'
```

See the [Add Icons page](/web/use-with/react-native/add-icons.md#deep-imports-by-default) for more.

## `react-native-svg` Version Compatibility

`react-native-fontawesome` requires `react-native-svg` as a peer dependency. Make sure you have a reasonably current version installed — using Expo's installer (`npx expo install react-native-svg`) picks a compatible version automatically. For bare CLI projects, the latest `react-native-svg` will work.

## iOS Pod Install

For bare `react-native-cli` projects, don't forget to run `pod install` after adding `react-native-svg`:

```bash
cd ios && pod install
```

Expo projects don't need this step.

## Upgrading from 0.3.x

If you're upgrading from `react-native-fontawesome` `0.3.x`, there are a few breaking changes to be aware of:

- **`height` and `width` props have been removed.** Using them now throws an error. Use the `size` prop instead:

  ```tsx
  {
    /* Before */
  }
  ;<FontAwesomeIcon icon={faMugSaucer} height={32} width={32} />

  {
    /* After */
  }
  ;<FontAwesomeIcon icon={faMugSaucer} size={32} />
  ```

- **The package is now pure TypeScript.** Types are included — you no longer need any companion `@types/...` package.

- **Requires `@fortawesome/fontawesome-svg-core` ~7.** Make sure you bump your SVG Core to a matching major version when you upgrade.

## Icons Not Showing Up?

Make sure you've:

- Imported the specific icon (or added it to the library) and are referencing the correct [style prefix](/web/dig-deeper/styles.md).
- Installed and configured access to any Pro packages you're pulling from.
- Are actually using React Native. The web `react-fontawesome` component is a [different component](/web/use-with/react.md).

If an icon still won't render, check the console — `react-native-fontawesome` logs `ERROR: icon not found for icon = ...` when it can't resolve an icon lookup.