how to use TabBarTop and TabBarBottom as component for custom navigation view?

Question

I'm using react-navigation and i want to put a custom component between the header and the tabs like this:

_______________
|  header     |
_______________
|  component  |
|             |
_______________
| tab1 | tab2 | 
_______________       
|             |
|    tab1     |
|             |
|             |
|             |
|             |
_______________

I followed the docs from reactnavigation.org https://reactnavigation.org/docs/custom-navigators.html. I created a custom navigator and added the TabBarTop from react-navigation.

this is my code:

    import...

    const CustomTabRouter = TabRouter(
    {
    Info: { screen: ScreenRestaurantInfo},
    News: { screen: ScreenRestaurantNews},
    Menu: { screen: ScreenRestaurantMenu},
    Gallery: { screen: ScreenRestaurantGallery}
    },
    {
    backBehavior:'none'
    }
    );

    export default class ScreenRestaurant extends React.Component {
      render(){
      const { routes, index } = this.props.navigation.state;
      const Component = CustomTabRouter.getComponentForState(this.props.navigation.state);
        return(
        <ScrollView style={{flex:1}}>
        <Image style={{height:200}} source={header} />
        <TabBarTop {...this.props}/> 
        {/*<TabBarTop navigation={this.props.navigation} />*/}
        <Component navigation={addNavigationHelpers({...this.props.navigation,state: routes[index]})}/>
        </ScrollView>
    )
    }
    }

But when I run the screen it show me this:

TypeError: undefined is not an object (evaluating 'navigationState.routes')

This error is located at:
    in TabBar (at TabBarTop.js:144)
    in TabBarTop (at ScreenRestaurant.js:320)
    .....

From my understanding it seems TabBarTop doesn't pass navigationState props to TabBar from 'react-native-tab-view'. But it work well when it is used in TabNavigator.

Any idea? Thank you !