render custom TabBar components anywhere in a scene

[bwillem]

More of a feature request than a bug.

Tab bar is always fixed, is there a way to have it scroll with the scene?

Rendering the TabBar into the scene itself would accomplish this, but I don't think the current API supports this?

Current behaviour

Tab bar can only be rendered top or bottom of scenes

Expected behaviour

Tab bar can be rendered independently of the renderTabBar prop. Use composition within a scene to put a tab bar anywhere.

Code sample

Exposing TabBarProps in renderScene would accomplish this - so renderScene would look something like this:

renderScene = ({ tabBarProps, route, jumpTo }) => {
    return (
        <Scene>
            <Header />
            <CustomTabBar { ...tabBarProps } />
            <Footer />
        </Scene>
    );
}

Thoughts?

[satya164]

You can render the tab bar anywhere as long as you ensure that the required props are passed, which isn't many, and you get all of those props in renderScene except navigationState: https://github.com/react-native-community/react-native-tab-view/blob/5adb9e42c723c2cc6c8ecad1b72331a14e7780c7/src/TabView.tsx#L158

[bartzy]

@satya164 How would that work exactly? Can I render the tab bar in a custom header, (outside of TabView's hierarchy)?

[lorenzomilesi]

@satya164 How would that work exactly? Can I render the tab bar in a custom header, (outside of TabView's hierarchy)?

Yes, you can, but I don't know if it's a good practice. In my case I saved position and layout in the component state, then in renderTabBar prop I did something like

renderTabBar={props => {
  if (props.position !== this.state.position || props.layout !== this.state.layout) {
    this.setState({
      layout: props.layout,
      position: props.position
    });
  }
  return null;
}}

This way I could render a <TabBar /> anywhere, passing it position, layoutand navigationState from the component state, a jumpTo to update the index of the navigationState and a renderLabel to render my custom tab