requireNativeComponent: "AutoLayoutView" when using flash list in React Native

Question

i want to use flashlistto render items to the screen , acording to the docs the only thing that we need to do is to rename the component and add estimatedItemSize attribute to the component , so i did it but i got this weird error .

component code :

export const RestaurantsScreen = () => {
  const { isLoading, error, clearError, sendRequest } = useHttpClient();
  const [fetchedRestaurants, setFetchedRestaurants] = useState([]);

...
...
...

      {!isLoading && fetchedRestaurants.length > 0 && (
        <FlashList
          data={fetchedRestaurants}
          renderItem={renderItemComponent}
          keyExtractor={(item) => item.name}
          initialNumToRender={3}
          estimatedItemSize={15}
        />
      )}
    </SafeArea>
  );
};

and the error is :

Invariant Violation: requireNativeComponent: "AutoLayoutView" was not found in the UIManager.

This error is located at:
    in AutoLayoutView (created by AutoLayoutView)
    in AutoLayoutView (created by ScrollComponent)
    in RCTView (created by View)
    in View (created by ScrollComponent)
    in ...

it works fine with flatlist .

Answer 1

The reason for this is that flashlist module has native dependencies (this is why installation docs prompts you to install the native deps with pod install in the ios directory).

Whenever you change anything on the "native" side of things you need to rebuild the app via xCode (or with yarn ios).

After that you will not see the error anymore 🤩

Answer 2

After installing the package follow the instruction below:

• run npx pod-install in the root folder of your react-native project
• run yarn start --reset-cache
• run yarn ios

Your application should run smoothly now.

Happy Coding...