Add a persistent view to RNN inside a TabBar controller

Question

I want to add a persistent view inside of a tabbar like the Apple Music app showing below.

Currently, I can add this component to the bottom of each screen but it would be great if there was a way to attach it to the tabbar so that there is only one instance of it in the app and it hasn't have to re-rendered with new screen of tab pressed. Thanks.

Answer 1

for RNN v2, I solved this using @guy.gc suggestion of adding a persistent overlay that loads on the first screen's componentDidMount.

Answer 2

You can do that by defining your own TabBarComponent.

You can add a property name tabBarComponent in your TabNavigator like this -

export const TabBar =  TabNavigator({
    Music: Music,
    Artists: Artists,
    Composers: Composers,
    Recents: Recents,
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        return <YourIconComponent color={tintColor} />
      },
    }),
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'grey',
    },
    tabBarComponent: TabBarComponent,
    tabBarPosition: 'bottom',
  }
);

And then you can define your own TabBarComponent like this -

import React from 'react'
import { TabBarBottom } from 'react-navigation'
import { View, Text } from 'react-native'

class TabBarComponent extends React.PureComponent {
  render() {
    return (
      <View style={styles.yourTabBarContainerStyle}>
        <YourFixedComponent />
        <TabBarBottom {...this.props} />
      </View>
    )
  }
}

export default TabBarComponent;

...

Hope it helps.