How to use Prismic.io on React Native

Prismic is a Content Management System, also known as headless CMS or API CMS.

I was asked to integrate Prismic.io into a React Native project, so first thing I did was to check how it was implemented on the web project.

They were using prismic-javascript library which is deprecated already and no docs available either.

The recommended solution on Prismic site is to use prismic-client along with prismic-react for react projects, but no particular examples for react-native.

I followed prismic installation steps line to line but at the time of bundling the app (I'm using an ejected expo app) came up the first issue:

While trying to resolve module `imgix-url-builder` from file `/Path/to/project/node_modules/@prismicio/helpers/dist/index.js`, the package `/Path/to/project/node_modules/imgix-url-builder/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Path/to/project/node_modules/imgix-url-builder/dist/index.cjs`. Indeed, none of these files exist:

So imgix-url-builder is not being resolved, and the solution is to add a source extension to the metro config like this:

const { getDefaultConfig } = require("expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.sourceExts.push("cjs");

module.exports = defaultConfig;

Then I tried to bundle again, which succeeded but at the time of execute any prismic hook such as usePrismicDocumentByID I was receiving an error like:

error: Not implemented
node_modules/react-native/Libraries/Blob/URL.js:86:10 in URLSearchParams#set
...

After googling a little bit I found that according to this post

React Native react-native/Libraries/Blob/URL.js doesn't import all the Web API functionality due to size concerns

And to fix this we need to add a polyfill for this particular issue.

First you need to npm i react-native-url-polyfill, then add this line to your index.js:

import "react-native-url-polyfill/auto";

After that, and restarting your server (just in case), you will be able to start using the prismic hooks from prismic-react library.

Remember that you won't be able to use any Component exported from this mentioned library as this are intended to be used on web only but not on React Native.

Hope this hacks helps you to use this lib on your RN projects!