react-navigation Customize component produced by TabNavigator

Question

Using react-navigation, in order to achieve this:

I am nesting TabNavigator inside a StackNavigator. Code as follow:

const HomeTabs = TabNavigator(
  {
    Portfolio: { screen: PortfolioScreen },
    Holding: { screen: HoldingScreen }
  },
  {
    //other configs
  }
)

const RootNavigator = StackNavigator(
  {
    Home: { screen: HomeScreen },
  },
  {
    // other configs
  }
)

//in App.js render()
return (
  <Provider store={Store}>
    <View style={{flex: 1}}>
      <RootNavigator />
    </View>
  </Provider>
)

Now, I need a Floating Action Button on both Portfolio and Holding tabs. I do not want to add it twice in both PortfolioScreen and HoldingScreen components.

Is there a way where I can customize the HomeTabs component produced by TabNavigator? Like giving it extra stuffs to render? Is there a HOC API that I am missing? Something like:

class CustomizedHomeTabs extends React.Component {
  onFabPress = () => { // do stuffs }

  render() {
    return (
      <FAB onPress={this.onFabPress}></FAB>
    )
  }
}

export default withTabNavigator(routes, config)(CustomizedHomeTabs) //something like this would be cool!