{"id":11775,"library":"react-native-helmet-async","title":"React Native Helmet Async","description":"react-native-helmet-async is a specialized fork of `react-helmet-async`, which itself is a modern, thread-safe solution for managing meta tags in React applications. This particular package addresses the specific needs of React Native by removing the `react-dom` peer dependency, making it suitable for environments where DOM rendering is not present. Its core differentiator is the use of a `` component to encapsulate Helmet state on a per-request or per-tree basis, crucial for asynchronous server-side rendering (SSR) to prevent state pollution across requests. It is currently at version 2.0.4 and appears to be actively maintained, providing an essential tool for SEO and head management in React Native web applications (when used with a web renderer) and isomorphic React projects where `react-dom` is not desired. It solves the thread-safety issues inherent in the original `react-helmet`'s `react-side-effect` dependency.","status":"active","version":"2.0.4","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/staylor/react-helmet-async","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-native-helmet-async","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-helmet-async","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-helmet-async","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for all React components.","package":"react","optional":false}],"imports":[{"note":"Since version 1.0.0, Helmet is a named export, not a default export. Ensure you destructure it.","wrong":"import Helmet from 'react-native-helmet-async';","symbol":"Helmet","correct":"import { Helmet } from 'react-native-helmet-async';"},{"note":"HelmetProvider is a named export and essential for providing context to Helmet. CommonJS `require` syntax is generally discouraged in modern React/TypeScript projects.","wrong":"const { HelmetProvider } = require('react-native-helmet-async');","symbol":"HelmetProvider","correct":"import { HelmetProvider } from 'react-native-helmet-async';"},{"note":"For Jest tests emulating SSR, you must explicitly set `HelmetProvider.canUseDOM = false;` before rendering to prevent DOM-dependent behavior.","wrong":"import { HelmetProvider } from 'react-native-helmet-async'; // Then forget to set canUseDOM","symbol":"HelmetProvider.canUseDOM","correct":"HelmetProvider.canUseDOM = false;"}],"quickstart":{"code":"import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { Helmet, HelmetProvider } from 'react-native-helmet-async';\n\nconst App = () => (\n
\n \n My Awesome React Native Web App\n \n \n \n

Welcome to the App!

\n

Check the document head for the meta tags.

\n
\n);\n\nconst container = document.getElementById('root');\nif (container) {\n const root = createRoot(container);\n root.render(\n \n \n \n );\n} else {\n console.error('Root element not found. Please ensure an element with id \"root\" exists.');\n}\n","lang":"typescript","description":"This quickstart demonstrates basic client-side usage of Helmet and HelmetProvider to manage document head tags."},"warnings":[{"fix":"Change `import Helmet from 'react-native-helmet-async';` to `import { Helmet } from 'react-native-helmet-async';`","message":"The default export for `Helmet` was removed in version 1.0.0. You must now use named imports.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Wrap your root component or the relevant part of your application with ``. For SSR, ensure you pass a `context` prop to the provider.","message":"Introduced the mandatory `HelmetProvider` component to encapsulate Helmet state. All Helmet components must be rendered within a `HelmetProvider`.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Replace `Helmet.renderStatic()` calls with extracting `helmetContext.helmet` after rendering the app wrapped in ``.","message":"Server-side rendering no longer uses static `rewind()` or `renderStatic()` methods. State is now extracted via the `context` prop passed to `HelmetProvider`.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Ensure you understand the specific purpose of this fork. If you need `react-dom`, consider `react-helmet-async`. If you're building for React Native (and a web platform through a renderer), this is appropriate.","message":"This package is a fork specifically for React Native environments and removes the `react-dom` peer dependency. Using it in a standard web-only React project with `react-dom` might indicate you should be using `react-helmet-async` instead.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Add `HelmetProvider.canUseDOM = false;` in your test setup or before rendering components that use Helmet in a Jest environment.","message":"When running Jest tests that emulate SSR, `HelmetProvider.canUseDOM` must be explicitly set to `false` to prevent DOM-dependent behavior.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `import Helmet from 'react-native-helmet-async';` to `import { Helmet } from 'react-native-helmet-async';`","cause":"Attempting to import `Helmet` as a default import when it's a named export.","error":"TypeError: Cannot destructure property 'Helmet' of 'react-native-helmet-async' as it is undefined."},{"fix":"Wrap your application or the specific components using `Helmet` with ``.","cause":"Rendering `` or related components without a parent ``.","error":"Error: Invariant Violation: Hooks can only be called inside the body of a function component. (e.g., when calling `useContext` outside of a functional component or `Helmet` outside of a provider)"},{"fix":"Ensure `const helmetContext = {};` is defined and passed as ``. After rendering, access properties via `helmetContext.helmet.title.toString()` etc.","cause":"Forgetting to pass a `context` object to `HelmetProvider` during server-side rendering, or not extracting the `helmet` object from that context.","error":"TypeError: helmet.title is undefined (or similar for meta, link, etc.) in SSR context"}],"ecosystem":"npm"}