React Native: View config getter callback for component must be a function

Photo by Fotis Fotopoulos on Unsplash

View config getter callback for component `div` must be a function (received `undefined`)

You’re coding a React Native App and suddenly get an unexpected error:

Invariant Violation: View config getter callback for component `div` must be a function (received `undefined`). Make sure to start component names with a capital letter.

You’re reading to the documentation and the component is there. The props are correct. Then you think: “That’s weird…!” and starts to scratch your head.

If you’re here because of that bug, fear no more.

Most of times it’s because the component importing is not being done correctly.

In the case of the SafeAreaView component that would trigger the error:

import { SafeAreaView } from ‘react-native-web’;

From documentation:

“The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.”

As you can see, it doesn’t make much sense to use it in a web environment then when we change “…from reactive-native-web” to “…from reactive-native” the magic happens.

The correct code snippet is

import { SafeAreaView } from ‘react-native’;

Recap

All you need to do to get rid of this annoying error is to import the component properly.

- import { SafeAreaView } from ‘react-native-web’;
+ import { SafeAreaView } from ‘react-native’;

Happy coding!