Although we try to make the experience of using React Native Elements hassle-free, time to time you may encounter some problems along the way.

On this page you can find solutions to commonly encountered issues.

##
|> Invariant Violation: Element type is invalid

This error occurs when trying to import a component that doesn't exist. This usually happens for a few reasons:

###
You incorrectly spelt a component

Spelling a component incorrectly though very simple, happens occasionally.

    // Incorrect
    import { Listitem } from 'react-native-elements'

    // Correct
    import { ListItem } from 'react-native-elements'

###
Importing a component from the wrong version

This error occurs when you're trying to use a component from the wrong version. At RNE they're some components that are only available in some versions.

    Example:

    `<FormInput />` is only available in v0.19.1 and below. `<Input />` is only
    available in `v1.0.0-beta1` and higher.

To fix this, follow these steps:

1. Check your `package.json` for the version of `react-native-elements` you are using.
2. View the documentation for your particular version on the website. See available versions here or click the version number next to the logo in the header.
3. Checking the list of components on the left side bar, make sure you're using the right component.

##
|> "fontFamily <font-name> is not a system font

This is a general error in react native, where you in your code, or a package you are using, is trying to use a font that is not bundled with the platform or is not added to the project.

If you aren't using an custom fonts in your application, then it's likely that the error comes from React Native Elements looking for `react-native-vector-icons`.

They're a couple ways to solve this depending on your setup.

- `react-native-init`
- `create-react-native-app or Expo XDE`
- `Detached create-react-native-app`

###
Using `react-native-init`

1. Delete everything to be sure

    rm -rf node_modules yarn.lock package-lock.json

2. Install React Native Elements

    # npm
    npm install && npm install react-native-elements --save

    # yarn
    yarn && yarn add react-native-elements

3. Install react-native-vector-icons

    # npm
    npm install react-native-vector-icons --save

    # yarn
    yarn add react-native-vector-icons

4. Link react-native-vector-icons. Learn more about linking.

    react-native link react-native-vector-icons

If you encounter any red error screens during the process, try running these commands:

> "Unrecognized font x"

> iOS - `rm -rf ios/build`

> Android - `rm -rf android/build && rm -rf android/app/build`

> "Unable to resolve module x"

> npm -`rm -rf node_modules && npm i`

> yarn - `rm -rf node_modules && yarn`

> "Unable to resolve module x"

> `npm start -- --reset-cache`

###
Using an Expo app (create-react-native-app or Expo XDE)

1. Delete everything to be sure

    rm -rf node_modules yarn.lock package-lock.json

2. Install React Native Elements

    # npm
    npm install && npm install react-native-elements --save

    # yarn
    yarn && yarn add react-native-elements

3. Install `@expo/vector-icons`

    # npm
    npm install @expo/vector-icons --save

    # yarn
    yarn add @expo/vector-icons --save

###
Using a detached `create-react-native-app` app

- If you choose a regular React Native project, use Solution 1
- If you choose to use Expo SDK (ExpoKit), use Solution 2

← Customization Overview →