{"id":15436,"library":"framework7-react","title":"Framework7 React Integration","description":"Framework7 React is a wrapper library that integrates the Framework7 mobile UI framework with React, enabling developers to build full-featured iOS and Android applications. It provides React components that correspond to Framework7's extensive set of native-looking UI elements, abstracting away direct DOM manipulation and leveraging React's declarative paradigm. The library is currently stable at version 9.0.3 and maintains a frequent release cadence, with patch and minor updates often released weekly or bi-weekly, and major versions introducing significant UI overhauls, such as the new iOS 26 styles and updated Material You specifications in v9.0.0. Its key differentiators include a rich component library designed to mimic native mobile app aesthetics, seamless integration with Framework7's core APIs (like routing and modals), and strong support for hybrid app development workflows with tools like Cordova and Capacitor, making it a robust choice for PWA and hybrid mobile app projects.","status":"active","version":"9.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/framework7io/framework7","tags":["javascript","react","reactjs","mobile","framework","framework7","cordova","ios","iphone","typescript"],"install":[{"cmd":"npm install framework7-react","lang":"bash","label":"npm"},{"cmd":"yarn add framework7-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add framework7-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core UI framework that provides styles, components, and underlying functionality.","package":"framework7","optional":false},{"reason":"The core library for building user interfaces.","package":"react","optional":false},{"reason":"Provides DOM-specific rendering methods for React applications.","package":"react-dom","optional":false}],"imports":[{"note":"The primary component to initialize Framework7. Use named import. CommonJS `require` is generally not recommended for modern React/F7 applications.","wrong":"const App = require('framework7-react').App;","symbol":"App","correct":"import { App } from 'framework7-react';"},{"note":"This import from 'framework7-react' provides the TypeScript type and a reference to the global Framework7 instance after initialization. The actual instance becomes accessible via `Framework7.instance` once the `<App>` component mounts and initializes.","wrong":"import Framework7 from 'framework7';","symbol":"Framework7","correct":"import { Framework7 } from 'framework7-react';"},{"note":"A utility function specific to `framework7-react` to execute code when the Framework7 instance is fully initialized and ready, ensuring `Framework7.instance` is available. Prefer this over direct Framework7 core methods in a React context.","wrong":"Framework7.instance.ready(() => {});","symbol":"f7ready","correct":"import { f7ready } from 'framework7-react';"},{"note":"Most Framework7 React components are prefixed with `f7` to avoid naming conflicts and clearly denote their origin. Always use the `f7` prefixed versions when importing components.","wrong":"import { Page, Navbar } from 'framework7-react';","symbol":"f7Page, f7Navbar","correct":"import { f7Page, f7Navbar } from 'framework7-react';"}],"quickstart":{"code":"import React, { useEffect } from 'react';\nimport { \n  App, \n  View, \n  Page, \n  Navbar, \n  Block, \n  Button, \n  f7ready, \n  Framework7 \n} from 'framework7-react';\n\n// Framework7 parameters\nconst f7params = {\n  name: 'My F7 React App',\n  theme: 'auto', // Detect iOS or MD theme automatically\n  routes: [\n    {\n      path: '/',\n      component: () => (\n        <Page>\n          <Navbar title=\"Hello F7 React\" />\n          <Block strong>\n            <p>Welcome to a basic Framework7 React application!</p>\n            <p>This demonstrates a simple page with a functional button.</p>\n            <Button fill onClick={() => Framework7.instance?.dialog.alert('Button clicked!')}>\n              Click Me\n            </Button>\n          </Block>\n        </Page>\n      ),\n    },\n  ],\n};\n\nconst MyApp: React.FC = () => {\n  useEffect(() => {\n    f7ready(() => {\n      console.log('Framework7 instance is ready and accessible via Framework7.instance');\n      // Example: Framework7.instance.router.navigate('/some-other-page');\n    });\n  }, []);\n\n  return (\n    <App {...f7params}>\n      {/* Main View for the app */}\n      <View main url=\"/\" />\n    </App>\n  );\n};\n\nexport default MyApp;\n\n// To render, typically in index.tsx:\n// import React from 'react';\n// import { createRoot } from 'react-dom/client';\n// import MyApp from './MyApp';\n// import 'framework7/css/bundle'; // Crucial: Import Framework7 styles\n//\n// const rootElement = document.getElementById('root');\n// if (rootElement) {\n//   createRoot(rootElement).render(<MyApp />);\n// }\n","lang":"typescript","description":"Initializes a basic Framework7 React application with a single view and page, demonstrating app setup and component usage, including accessing the Framework7 API."},"warnings":[{"fix":"Refactor layouts to use static Navbars or implement custom solutions for dynamic header behavior. Review your app's navigation structure for compatibility.","message":"The `dynamicNavbar` functionality has been completely removed in v9.0.0. Components relying on this feature will break.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"If text is required for back links, explicitly set the `backLinkText` prop on `f7Navbar` or `f7Page` components.","message":"In v9.0.0, the default text for Navbar back links is now empty, favoring an icon-only approach.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Thoroughly review your application's UI after upgrading. Test components across both iOS and Material Design themes to identify and resolve visual regressions or inconsistencies.","message":"Version 9.0.0 introduces significant UI/UX changes for both iOS (new iOS 26 styles) and Material Design (updated Material You specs, new color schemes). Existing custom styles or themes might require adjustments.","severity":"gotcha","affected_versions":">=9.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure all calls to `Framework7.instance` or its APIs are placed within the `f7ready()` callback, or inside a `useEffect` hook that depends on `f7ready` having completed, guaranteeing the instance is available.","cause":"Attempting to access `Framework7.instance` or its methods (e.g., `Framework7.instance.dialog`) before the Framework7 app is fully initialized.","error":"TypeError: Cannot read properties of undefined (reading 'dialog')"},{"fix":"Run `npm install framework7-react framework7 react react-dom` (or `yarn add`). Also, ensure you have `import 'framework7/css/bundle';` (or specific theme CSS) in your root React component or main entry file.","cause":"The `framework7-react` package, its core `framework7` dependency, or the required CSS bundle is not installed or incorrectly referenced.","error":"Module not found: Can't resolve 'framework7-react' in '...' or 'Module not found: Can't resolve 'framework7/css/bundle''"},{"fix":"Ensure that all Framework7 React components are direct or indirect children of the `<App>` component provided by `framework7-react` to ensure they have access to the Framework7 context.","cause":"A component provided by `framework7-react` (e.g., `f7Page`, `f7Navbar`) is being rendered outside of the main `<App>` component wrapper.","error":"Framework7 components must be used inside Framework7 App component."}],"ecosystem":"npm"}