Language: ENCN

Initialize App

As briefly shown in the app layout section, your root App.jsx component will typically have a top-level Framework7App component. This component is used to configure your app:

import {routes} from './routes';

//App.jsx
const App = () => (
  <Framework7App routes={routes} themeType="ios">
    ...
  </Framework7App>
);

In addition, if you're using Create React App, Webpack or Browserify, you might typically have an root-level app.js or index.js file that mounts your root app component:

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './components/App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Framework7App Props

Framework7App supports passing any Framework7 initialization parameter as a prop. It also supports the following props that are specific to Framework7 React:

Prop Type Default Description
routes array null An array of route objects that make up the pages of the app
themeType string null Either "ios" or "material", depending on the desired theme of your app
stateKernel object null An instance of a Framework7 state kernel from Framework7 Redux

Framework7App Event Props

Event Description
onFramework7Init Event will be triggered when Framework7App's internal instance of Framework7 is created. If a callback function is passed, the callback will be called with the Framework7 instance as the first argument.
onRouteChange Called whenever a route change occurs. If a callback function is passed, the callback will be called with the current route as the first argument. See the Navigation / Router docs for more info about routes.

One potential use for these two events is to make the current route and Framework7App's instance of Framework7 available throughout your app:

//App.jsx
export const App = () => {
  let framework7;
  let currentRoute;

  export const getFramework7 = () => framework7;
  export const getCurrentRoute = () => currentRoute;

  <Framework7App ... onFramework7Init={f7 => framework7 = f7} onRouteChange={route => currentRoute = route}>
    ...
  </Framework7App>
};

//MainViews.jsx
import {getFramework7, getCurrentRoute} from './App';          

const MainViews = () => (            
  <Views>
    <View navbarThrough dynamicNavbar={true} main url="/">
      {/* iOS navbar gets rendered under the view */}
      {!getFramework7().params.material ?
        <Navbar title="My App" />
      ) : null}
      <Pages>
        <Page>
          {/* Material navbar gets rendered under the page */}
          {getFramework7().params.material ?
            <Navbar title="My App" />
          ) : null}
          <ContentBlock>
            <ul>                      
            {
                Object.keys(getCurrentRoute().params).map((paramName, index) => (
                    <li key={index}><b>{`${paramName}: `}</b>{getCurrentRoute().params[paramName]}</li>;
                ))
            }                            
            </ul>
          </ContentBlock>
        </Page>
      </Pages>
    </View>
  </Views>
);          

Framework7App Context

Child components under Framework7App (in most cases, all of your app's components) can access certain properties via React context. Context is considered to be an advanced feature, and it is recommended to use it sparingly because it makes React components more difficult to understand. In most cases, your components will not need to access context, but it is useful in some cases. For example, the app theme type can be accessed via context instead of the method above:

const MainViews = (props, context) => (            
  <Views>
    <View navbarThrough dynamicNavbar={true} main url="/">
      {/* iOS navbar gets rendered under the view */}
      {context.framework7AppContext.theme.ios ?
        <Navbar title="My App" />
      ) : null}
      <Pages>
        <Page>
          {/* Material navbar gets rendered under the page */}
          {context.framework7AppContext.theme.material ?
            <Navbar title="My App" />
          ) : null}
        </Page>
      </Pages>
    </View>
  </Views>
);

MainViews.contextTypes = {
  framework7AppContext: PropTypes.object
};

Context Props

Prop Type Default Description
routes array null the array of route objects passed into the app's Framework7App component
theme object null Has two boolean properties: ios and material. Depending on the themeType prop passed into Framework7App ("ios" or "material"), the respective ios or material property will be true and the other will be false.

Context Methods

.getCurrentRoute() Get the currently active route. For more info about routes, see the Navigation / Router section.
.getRouter() Get the Framework7 React router. For more info about routes, see the Navigation / Router section.
.getFramework7() Get Framework7App's internal instance of Framework7