How to render contents in all components using react native?

Question

I want to add header and footer in all pages like below.

Example :

Then how render header and footer in other components ?

That means write code once then how render it in various pages?

Answer 1

Using react-native-router-flux makes what you aim for pretty easy if I got your question right. Check out the documentation https://github.com/aksonov/react-native-router-flux

Answer 2

i never try that react-native-router-flux, but when i see the docs, maybe you can do something like this:

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import PageOne from './PageOne';
import PageTwo from './PageTwo';

export default class App extends Component {
  render() {
    return (
      <View style={{ flex:1 }}>
        <YourHeaderComponent />
        <Router>
          <Scene key="root">
            <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
            <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
          </Scene>
        </Router>
        <YourFooterComponent />
      </View>
    )
  }
}

You can wrap the Router with View which its sibling is your header and footer component.