Lucide Icons for React Native

Common errors

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

  cause The `react-native-svg` library, which is a peer dependency, is not correctly installed, linked, or initialized in the native project.
  fix Install `react-native-svg` (`npm install react-native-svg` or `yarn add react-native-svg`). For iOS, navigate to your `ios` directory and run `pod install`. Restart your Metro bundler and re-build your native application.

• TypeError: (0, _lucide_react_native__WEBPACK_IMPORTED_MODULE_2__.Activity) is not a function

  cause This error typically indicates an incorrect import statement, where a named export is being treated as a default export, or a CommonJS `require` call is failing to resolve the ES Module exports.
  fix Ensure you are using named ES module imports: `import { Activity } from 'lucide-react-native';`. Double-check for typos in icon names or extra curly braces.

• Icons not visible or appear as empty squares in Android/iOS.

  cause This usually points to a problem with `react-native-svg` not being linked or configured correctly, preventing the SVG assets from rendering.
  fix Verify that `react-native-svg` is installed and properly linked (especially after React Native upgrades or changing build environments). Clear Metro cache (`npm start -- --reset-cache`) and rebuild your application.

Warnings

• breaking The `lucide-react-native` package depends heavily on `react-native-svg` as a peer dependency. Failure to install and properly link `react-native-svg` will result in runtime errors and icons not rendering.
  Fix: Ensure `react-native-svg` is installed (`npm install react-native-svg` or `yarn add react-native-svg`) and follow its linking instructions, especially for bare React Native projects (`cd ios && pod install`).
• gotcha Like other modern React Native packages, `lucide-react-native` is designed for ESM (ECMAScript Modules). Using CommonJS `require()` statements for importing icons can lead to module resolution issues or incorrect bundling.
  Fix: Always use ES module `import` statements (e.g., `import { Activity } from 'lucide-react-native';`) for best compatibility and tree-shaking.
• gotcha Prior to version 1.1.0, some module resolution issues related to `preserveModulesRoot` could occur in specific bundler configurations, potentially leading to build failures or incorrect imports.
  Fix: Upgrade to `lucide-react-native@1.1.0` or newer to benefit from improved module resolution fixes. If encountering issues on older versions, review bundler configurations (e.g., Metro) for module path resolution.

Install

• npm install lucide-react-native npm
• yarn add lucide-react-native yarn
• pnpm add lucide-react-native pnpm

Imports

• Activity
  wrong:

  const Activity = require('lucide-react-native').Activity;

  correct:

  import { Activity } from 'lucide-react-native';

  Primary way to import individual icon components. Prefer named imports for tree-shaking benefits. CommonJS 'require' syntax is generally not supported or recommended for this ESM-first library.
• Bell
  wrong:

  import Bell from 'lucide-react-native/Bell';

  correct:

  import { Bell } from 'lucide-react-native';

  Icons are exported individually as named exports from the main package entry point. Direct deep imports like `lucide-react-native/Bell` are incorrect.
• LucideIcon
  wrong:

  import { LucideIcon } from 'lucide-react-native';

  correct:

  import type { LucideIcon } from 'lucide-react-native';

  Use `import type` for importing the TypeScript type definition for an icon component, especially when using 'isolatedModules' or similar TypeScript configurations.

Quickstart

This example demonstrates how to import and render various Lucide icons in a React Native application, applying custom colors, sizes, and stroke widths.

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';
import { Activity, Bell, Settings } from 'lucide-react-native';

// Ensure react-native-svg is installed and linked correctly.
// For bare React Native projects, run: npm install react-native-svg && cd ios && pod install

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.title}>Lucide React Native Icons</Text>
      <Activity color="#007bff" size={48} strokeWidth={2.5} style={styles.icon} />
      <Bell color="crimson" size={36} fill="rgba(220, 20, 60, 0.2)" style={styles.icon} />
      <Settings color="green" size={50} style={styles.icon} />
      <Text style={styles.description}>These icons are fully customizable SVG components.</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f4f8',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    color: '#333',
  },
  icon: {
    marginVertical: 15,
  },
  description: {
    marginTop: 30,
    fontSize: 16,
    color: '#555',
    textAlign: 'center'
  }
});

export default App;