Last Updated: 3/9/2026

React Native

Using Nano ID in React Native applications requires a polyfill for the Web Crypto API.

Quick Setup

1. Install Dependencies


npm install nanoid react-native-get-random-values

2. Import Polyfill First


import 'react-native-get-random-values'
import { nanoid } from 'nanoid'
 
const id = nanoid()
console.log(id) //=> "V1StGXR8_Z5jdHi6B-myT"

⚠️ Important: Import the polyfill before Nano ID in every file that uses it.

Why Polyfill Needed?

React Native doesn’t include the Web Crypto API (crypto.getRandomValues) that Nano ID requires. The react-native-get-random-values package provides this functionality.

Compatibility

✅ Plain React Native: Works with RN 0.60+
✅ Expo: Works with Expo SDK 39+
✅ iOS: Full support
✅ Android: Full support

Usage Examples

Basic Usage


import 'react-native-get-random-values'
import { nanoid } from 'nanoid'
import { useState } from 'react'
import { View, Button, Text } from 'react-native'
 
function App() {
  const [items, setItems] = useState([])
  
  const addItem = () => {
    setItems([...items, {
      id: nanoid(),
      text: `Item ${items.length + 1}`
    }])
  }
  
  return (
    <View>
      <Button title="Add Item" onPress={addItem} />
      {items.map(item => (
        <Text key={item.id}>{item.text}</Text>
      ))}
    </View>
  )
}

With AsyncStorage


import 'react-native-get-random-values'
import { nanoid } from 'nanoid'
import AsyncStorage from '@react-native-async-storage/async-storage'
 
async function saveItem(data) {
  const item = {
    id: nanoid(),
    ...data,
    createdAt: Date.now()
  }
  
  await AsyncStorage.setItem(
    `item:${item.id}`,
    JSON.stringify(item)
  )
  
  return item
}

With Redux


import 'react-native-get-random-values'
import { nanoid } from 'nanoid'
import { createSlice } from '@reduxjs/toolkit'
 
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({
        id: nanoid(),
        text: action.payload,
        completed: false
      })
    }
  }
})

Expo Setup

Install


npx expo install react-native-get-random-values nanoid

Usage


import 'react-native-get-random-values'
import { nanoid } from 'nanoid'
 
export default function App() {
  const id = nanoid()
  return <Text>{id}</Text>
}

Common Issues

❌ Error: crypto.getRandomValues is not a function

Cause: Polyfill not imported or imported after Nano ID.

Solution: Import polyfill first:


// ✅ Correct order
import 'react-native-get-random-values'
import { nanoid } from 'nanoid'
 
// ❌ Wrong order
import { nanoid } from 'nanoid'
import 'react-native-get-random-values'

❌ Error: Unable to resolve module

Cause: react-native-get-random-values not installed.

Solution:


npm install react-native-get-random-values
# or
yarn add react-native-get-random-values

❌ IDs Not Unique

Cause: Multiple instances of Nano ID with different polyfills.

Solution: Ensure polyfill imported in entry file:


// index.js or App.js (entry point)
import 'react-native-get-random-values'
 
// Then import in other files
import { nanoid } from 'nanoid'

Performance

The polyfill uses native random generation:

iOS: SecRandomCopyBytes
Android: java.security.SecureRandom

Performance is similar to native Nano ID (~3-4M ops/sec).