Create sticky component for bottom tab with react navigation

user_8200145 0
Viewed 1891

Goal: Make the Player Component stateful when switching between bottom tabs, Home and Settings in react navigation, using createBottomTavNavigator.

I have tried using Player component in both Home and Setting components. But I have a problem with that when I change the text in Player screen by clicking the button when I am inside Home component and then switch to the Settings tab, the text I entered in Home screen is not carried over to the Settings screen. I guess it is because Settings component imports a new Player component.

So my question is how to make the Player component stateful when switching between those two bottom tabs?

I am kind of hoping to build a player like in Spotify app in which the player stays stateful when I am switching between those bottom tabs as shown in the image below.

Spotify stateful player

Expo snack here!

import React from 'react';
import { Text, View, Button } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        <Player />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
        <Player />
      </View>
    );
  }
}

class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text : 'text'
    }
  }

  changeText = () => {
    this.setState({
      text: 'hello'
    })
  }
  
  render() {
    return (
      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Text>{this.state.text}</Text>
        <Button
          title="Press"
          onPress={() => this.changeText()}/>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

export default createAppContainer(TabNavigator);

How to reproduce the problem

1. In Home, click the Press button which will change the text in Player component.

2. Go the Settings tab in the bottom. Now the text you entered in Home screen is gone!

react-navigation react-native
1 Answers

tabBarComponent is all you need:

import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';

const TabBarComponent = props => <BottomTabBar {...props} />;

    const TabScreens = createBottomTabNavigator(
          {
            // other screens
          },
          {
            tabBarComponent: props => (
              <View>
                  <YourPlayerComponent />
                  <TabBarComponent {...props} style={{ borderTopColor: '#605F60' }} />
              </View>
            ),
          }
    );

Related here: https://reactnavigation.org/docs/pt-BR/bottom-tab-navigator.html

user_26388490
Related