React Native で nanoId が使えない時の対処法

React Native (Expo) + Supabase でのアプリ開発中、Supabase にデータを post できない状況が発生しました。

特にエラーが出るわけでもないので困ってしまいましたが、問題なく post できている関数と比較してあたりをつけました。

問題ないコード

javascript

import { supabase } from '@/utils/supabase'

const postFoo = async (data) => {
  try {
    return supabase
      .from('foo')
      .insert({
        title: data.title,
      })
      .select()
      .single()
  } catch (error) {
    throw new Error('エラー!')
  }
}

問題のコード

javascript

import { nanoid } from 'nanoid'
import { supabase } from '@/utils/supabase'

const postBar = (data) => {
  try {
    return supabase
      .from('bar')
      .insert({
        foo_id: nanoid(),
        title: data.title,
      })
      .select()
      .single()
  } catch (error) {
    throw new Error('エラー!')
  }
}

違いは nanoId の有無のみですね。

調べてみたら nanoId のドキュメントにちゃんと書いてあった。

React Native does not have built-in random generator. The following polyfill works for plain React Native and Expo starting with 39.x.

GitHub - ai/nanoid: A tiny (124 bytes), secure, URL-friendly, unique string ID generator for JavaScript: A tiny (124 bytes), secure, URL-friendly, unique string ID generator for JavaScript - ai/nanoid

github.com

react-native-get-random-values を追加しろ、とのことです。

修正版

javascript

import 'react-native-get-random-values'
import { nanoid } from 'nanoid'
import { supabase } from '@/utils/supabase'

const postBar = (data) => {
  try {
    return supabase
      .from('bar')
      .insert({
        foo_id: nanoid(),
        title: data.title,
      })
      .select()
      .single()
  } catch (error) {
    throw new Error('エラー!')
  }
}

直った。

試していませんが uuid や ulid なども同様と思われます。