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!
Top comments (0)