React-native-navigation: Bottom tabs: Incorrect componentDidAppear lifecycle method being executed

Created on 4 Jan 2021 · 3Comments · Source: wix/react-native-navigation

🐛 Bug Report

When using bottom tabs, if selecting a different default tab other than the first one, its componentDidAppear lifecycle method is not executed. Instead, the first tab's componentDidAppear method is executed.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

Install RNN according to the guides. npm i react-native-navigation and npx rnn-link.
Use the following index.js and Screen.js files.
index.js

import {Navigation} from 'react-native-navigation';
import Screen from './Screen';

Navigation.registerComponent('Screen', () => Screen);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setDefaultOptions({
    bottomTab: {
      selectedTextColor: 'red',
    },
  });

  Navigation.setRoot({
    root: {
      bottomTabs: {
        id: 'BottomTabs',
        options: {
          bottomTabs: {
            currentTabId: 'Screen2',
          },
        },
        children: [
          {
            component: {
              id: 'Screen1',
              name: 'Screen',
              options: {
                bottomTab: {
                  text: 'Screen 1',
                },
              },
            },
          },
          {
            component: {
              id: 'Screen2',
              name: 'Screen',
              options: {
                bottomTab: {
                  text: 'Screen 2',
                },
              },
            },
          },
        ],
      },
    },
  });
});

Screen.js

import React, {useEffect} from 'react';
import {Navigation} from 'react-native-navigation';
import {SafeAreaView, StyleSheet, Text} from 'react-native';

const Screen = ({componentId}) => {
  useEffect(() => {
    const unsubscribe = Navigation.events().registerComponentListener(
      {
        componentDidAppear: () =>
          console.log(`componentDidAppear ${componentId}`),
        componentDidDisappear: () =>
          console.log(`componentDidDisappear ${componentId}`),
      },
      componentId,
    );
    return () => unsubscribe.remove();
  }, [componentId]);
  return (
    <SafeAreaView style={styles.root}>
      <Text>Screen {componentId}</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
  },
});

export default Screen;