React Native UUID Generator

Common errors

• TypeError: uuid.v4 is not a function

  cause Incorrect import: attempting to destructure `uuid` as a named export when it's the name of the default export object, or calling the default import as a function directly.
  fix Use `import uuid from 'react-native-uuid';` and then call `uuid.v4();` OR use the named import `import { v4 } from 'react-native-uuid';` and then call `v4();`.

• Error: crypto.getRandomValues() not supported

  cause The JavaScript runtime (e.g., React Native with Hermes, or older browser environments) does not natively provide the `crypto.getRandomValues()` API, which `react-native-uuid` (especially since v2.0.4) attempts to use for stronger randomness.
  fix Ensure you are on `react-native-uuid` version 2.0.4 or newer. If the error persists, install `react-native-get-random-values` (`npm install react-native-get-random-values`) and add `import 'react-native-get-random-values';` at the very top of your application's entry file (e.g., `index.js` or `App.js`) to polyfill the API.

• Cannot find module 'react-native-uuid'

  cause The package has not been correctly installed or dependencies are not linked/resolved in your project.
  fix Run `npm install react-native-uuid` or `yarn add react-native-uuid`. If using React Native, ensure your caches are clear (`npx react-native start --reset-cache`) and rebuild your project (`npx react-native run-ios` / `npx react-native run-android`).

Warnings

• breaking Version 2.0.0 introduced a complete rewrite of react-native-uuid, transitioning to a zero-dependency TypeScript codebase. This major version change likely broke API compatibility with version 1.x, requiring code adjustments for migration.
  Fix: Review migration guides or package documentation when upgrading from 1.x. Specific fixes for default exports were provided in v2.0.1, so ensure your import statements are aligned with the new API surface.
• breaking Following the v2.0.0 rewrite, version 2.0.1 specifically addressed and fixed issues related to default exports. Code relying on initial v2.0.0 default export behavior might have broken when upgrading to 2.0.1.
  Fix: Ensure your import statements correctly handle the default export, which is an object containing UUID generation methods (e.g., `import uuid from 'react-native-uuid'; uuid.v4();`). Review `ARCHITECTURE.md` for correct import patterns.
• gotcha Prior to version 2.0.4, `react-native-uuid` primarily relied on `Math.random` for its pseudo-random number generation. While v2.0.4 fixed RNG to use `Uint8Array` for `crypto.getRandomValues()` API compatibility, older React Native environments (especially with Hermes) or older versions of this library might still default to `Math.random` if `crypto.getRandomValues` is unavailable or not polyfilled. `Math.random` is generally not considered cryptographically secure.
  Fix: Upgrade to `react-native-uuid` version 2.0.4 or newer. For environments where `crypto.getRandomValues()` is still unsupported (e.g., specific React Native versions or debugging with Chrome), consider installing a polyfill like `react-native-get-random-values` and importing it at your app's entry point (`import 'react-native-get-random-values';`).

Install

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

Imports

• uuid (default export object)
  wrong:

  import { uuid } from 'react-native-uuid';

  correct:

  import uuid from 'react-native-uuid';

  The default export is an object containing methods like `v1`, `v3`, `v4`, `v5`, `parse`, `stringify`, etc. Use `uuid.v4()` to generate a version 4 UUID. Since v2.0.1, default exports were explicitly fixed.
• v4 (named export)
  wrong:

  import uuidV4 from 'react-native-uuid';

  correct:

  import { v4 } from 'react-native-uuid';

  Individual UUID version generation functions like `v4` are also available as named exports. This is often preferred for tree-shaking.
• CommonJS require
  wrong:

  const { v4 } = require('react-native-uuid');

  correct:

  const uuid = require('react-native-uuid');

  For CommonJS environments, `require` returns the default export object. Access specific UUID generation methods via properties, e.g., `uuid.v4()`. While some libraries allow destructuring named exports from `require`, `react-native-uuid` primarily exposes its API via the default object for CJS.

Quickstart

Demonstrates generating different UUID versions (v4 and v1) using both default and named imports within a React Native functional component, showing how to update state with new UUIDs.

import uuid, { v4, v1 } from 'react-native-uuid';
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const App = () => {
  const [generatedUuids, setGeneratedUuids] = React.useState<string[]>([]);

  const generateNewUuids = () => {
    const newV4Uuid = v4() as string; // Using named export for v4
    const newV1Uuid = uuid.v1() as string; // Using default export for v1
    const anotherV4Uuid = uuid.v4() as string; // Using default export for v4
    setGeneratedUuids(prev => [
      `v4 (named): ${newV4Uuid}`,
      `v1 (default): ${newV1Uuid}`,
      `v4 (default): ${anotherV4Uuid}`,
      ...prev.slice(0, 4) // Keep only the latest 5 UUIDs
    ]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Generated UUIDs:</Text>
      {
        generatedUuids.length === 0 ?
        <Text style={styles.noUuids}>Press the button to generate UUIDs.</Text> :
        generatedUuids.map((id, index) => (
          <Text key={index} style={styles.uuidText}>{id}</Text>
        ))
      }
      <Button title="Generate New UUIDs" onPress={generateNewUuids} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f0f0f0'
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10
  },
  uuidText: {
    fontSize: 14,
    marginBottom: 5,
    fontFamily: 'monospace'
  },
  noUuids: {
    fontSize: 16,
    color: '#888',
    marginBottom: 20
  }
});

export default App;