CODEWITHSUNDEEP
react-native
MvdL
MvdL

Reputation: 253

Render something on every page inside my app

I try to render something inside every page but won't include it on every page. I am using react-router-flux so i hope that i can include something there, so i can render something on every page inside my app...

I wan't to do this so i can show a message on every page when there is no internet connection. For that, i think i'm going to use [https://github.com/gnestor/react-native-statusbar-alert/blob/master/README.md][1]. After that, i think i need this feature also to make in-app push notifications possible for iOS.

I hope someone can help me :-)

I tryed to do something like this, but i see than only the render of OnEveryPage and not Splash or FirstLaunch...:

Main.js

render () {
    return (
      <Router>
        <Scene key='root' component={OnEveryPage}>
          <Scene key='FirstLaunch'
            component={FirstLaunch}
            title='FirstLaunch'
            hideNavBar
            type={ActionConst.RESET}
          />
          <Scene key='Splash'
            component={Splash}
            hideNavBar
            initial
          />
        </Scene>
      </Router>
    );
  }

OnEveryPage.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class OnEveryPage extends Component {
    render(){
        return (
            <View><Text>Do This On Every Page</Text></View>
        );
    }
}

export default OnEveryPage;

Upvotes: 0

Views: 877

Answers (1)

Patrik Prevuznak
Patrik Prevuznak

Reputation: 2261

If you want to show something on every page, render it outside of the Router.

Main.js

render () {
    return (
      <View style={{flex: 1}}>
        <OnEveryPage />
        <Router>
          <Scene key='FirstLaunch'
            component={FirstLaunch}
            title='FirstLaunch'
            hideNavBar
            type={ActionConst.RESET}
          />
          <Scene key='Splash'
            component={Splash}
            hideNavBar
            initial
          />              
        </Router>
      </View>  
  );
}

Upvotes: 2

Related Questions