Render global footer in react-native-router-flux 3.x

Question

I have an app where on all scenes I want to render a global navigation footer at the bottom of the screen. This was a very easy thing to do in RNRF 2.x with the footer prop, but I'm having quite a lot of trouble implementing it in 3.x since the footer prop does not exist anymore. Anyone know how to go about doing this?

Answer 1

You can do this with only React Native. Just wrap your old main component in a new View that contains the old main component and the footer. Then the footer will always be shown.

Assuming you have a main component named MainComponent in a file path/to/main/component.js:

// path/to/main/component.js
export default class MainComponent extends React.Component {
    ...
}

Just change it to this:

// path/to/main/component.js
class MainComponent extends React.Component {
    ...
}

export default () => (
    <View styles={styles.newMainComponent}>
        <MainComponent />
        <GlobalFooter />
    </View>
);

You may need to move some styles from your old main component to the new view that wraps it.