react native router flux & native base container

Question

I'm new to react-native, so I think perhaps a bit too much "HTML" instead of "native", so my question could look stupid.

I use react-native-router-flux for the routing, and native base for some nice components. I'd like to use the Header/Content/Footer from native base too but I didn't find a way to make it works.

In order to have Header/Content/Footer, those components must be wrapped inside a Container component. I didn't found a way to do that with react-native-router-flux.

My Header is around the navbar, and Content is inside each Scene components.

(for the header I did a custom navbar that extends the rnrf one :

import { Header } from 'native-base';
import { NavBar } from 'react-native-router-flux';

var NavbarLulu = React.createClass({
    render: function() {
        return <Header>
            <NavBar {...this.props} {...this.state} />
        </Header>
    }
});

var Root = React.createClass({
    render: function() {
        return <Router>
           <Scene key="root" navBar={NavbarLulu}>
               <Scene.......>
           </Scene>
        </Router>
    }
});

Any solution for the Container please ?

score 1 · Answer 1 · answered Jul 18 '17 at 10:56

i have an idea, maybe it can solve your problem, how if you just use native-base Header for your custom header, and hide navbar from RNRF, i have one example :

First is define the routes

const App = () => {
return (
      <Router>
        <Scene key="root">
            <Scene key="nav" component={MyContainer} title="Navigation" initial={true} hideNavBar>
              <Scene key="main"  component={ExampleContent} title="MainPage" />
            </Scene>
        </Scene>
      </Router>
   );
}

use hideNavBar in parent scene to hide RNRF Navbar. then make your own Header

class MyHeader extends Component{
  render(){
    return(
      <Header>
            <Left/>
            <Body>
                <Title>Header</Title>
            </Body>
            <Right />
      </Header>
    )
  }
}

and make content component for child scene

class ExampleContent extends Component{
  render(){
    return (
      <Content>
        <Text>This is some content</Text>
      </Content>
    )
  }
}

after that, make the container for wrapping the Header and Content

class MyContainer extends Component{
  render(){
    const state = this.props.navigationState;
    const children = state.children;
    return(
      <Container>
        <MyHeader />
        <DefaultRenderer navigationState={children[children.length - 1]} onNavigate={this.props.onNavigate} />
      </Container>
    )
  }
}

Default Renderer is for render child Scene, so you just create the Content without Container again

this is the full source code :

import React, { Component } from 'react';
import { Router, Scene, DefaultRenderer } from 'react-native-router-flux';
import { Container, Header, Content, Footer, Left, Right, Body, Title, Text } from "native-base";

class MyHeader extends Component{
  render(){
    return(
      <Header>
            <Left/>
            <Body>
                <Title>Header</Title>
            </Body>
            <Right />
      </Header>
    )
  }
}

class ExampleContent extends Component{
  render(){
    return (
      <Content>
        <Text>This is some content</Text>
      </Content>
    )
  }
}

class MyContainer extends Component{
  render(){
    const state = this.props.navigationState;
    const children = state.children;
    return(
      <Container>
        <MyHeader />
        <DefaultRenderer navigationState={children[children.length - 1]} onNavigate={this.props.onNavigate} />
      </Container>
    )
  }
}

const App = () => {
    return (
          <Router>
            <Scene key="root">
                <Scene key="nav" component={MyContainer} title="Navigation" initial={true} hideNavBar>
                  <Scene key="main"  component={ExampleContent} title="MainPage" />
                </Scene>
            </Scene>
          </Router>
    );
  }

export default App;

this is the screenshot of that example code

I hope it can be one solution for you, Thanks :)

react native router flux & native base container

1 Answers1