Global component in React Native Navigation

Question

I want to create a music player app that has collapsed music player at the bottom of the screen, above the bottom tabs, similar to how Spotify and Apple Music have it. I just want to see how you would do a layout in that case. Any help is appreciated.

Answer 1

You can create custom tabs with additional view that displays the your player control. For example create CustomTabBar.js like following :

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class CustomTabBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <View>
        <View style={{height: 50}}>
          {/* Player controller view */}
        </View>
        {/* Custom Tab view */}
      </View>
    );
  }
}

export default CustomTabBar;

Above component will contains the player controller and custom tabs. Now you can use it with createMaterialTopTabNavigator. For example :

const HomeTabNavigator = createMaterialTopTabNavigator({
  Home: {
    screen: HomeStackNavigator,
  },
  Search: {
    screen: SearchStackNavigator
  },
  Library: {
    screen: Library,
  },
}, {
  ...,
  ...
  tabBarComponent: (props) => <CustomTabBar {...props} />, // use your custom tab layout
  ...
  ...
  },
});

Now, you player control will displays in all your page with tabs. However if you want to use animation effect like spotify or apple music then you have to use pan responder in your player controller view.