![](/.netlify/images?url=https%3A%2F%2Fuseful-tech-blog.assets.newt.so%2Fv1%2Ff44a2410-0a95-4f55-9369-e524278a4083%2FDALL%25C2%25B7E2024-06-1813.10.41-Createaflatandsimplefeaturedimageforablogposttitled%27ReactNative%25E3%2581%25A6%25E3%2582%2599nanoId%25E3%2581%258B%25E3%2582%2599%25E4%25BD%25BF%25E3%2581%2588%25E3%2581%25AA%25E3%2581%2584%25E6%2599%2582%25E3%2581%25AE%25E5%25AF%25BE%25E5%2587%25A6%25E6%25B3%2595%27.Theimageshouldbe1200pxwideand630pxtallinP.webp&w=1200&h=630)
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
![](/api/link-card/66710c740761cb47582872a1.webp)
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
なども同様と思われます。