bottom tab tap don't pop to root on android

[ludwig-pro]

🐛 Bug Report

iOS and Android don't have the same behavior when you navigate inside a stack with bottom tabs and tap the active tab.

Have you read the Contributing Guidelines on issues?

yep !

To Reproduce

1. navigate inside a sub screen of a stack ( so have 2 screens inside the stack, the root and a second one)
2. tap on the current active tab

Expected behavior

When you are inside a stack, I expect the tap on active bottom tab to popToRoot()

Actual Behavior

when you are inside a stack, and tap on active bottom tab

• ✅ on iOS it's worked, popToRoot()
• ❌on android... nothing append

**ANDROID**

20210219_210325.mp4

**IOS**

RPReplay_Final1613820856.MP4

Your Environment

 "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-navigation": "^7.10.0"
  },

• Platform: Android
• Device info: tested on physical device, debug & release

Reproducible Demo

https://github.com/ludwig-pro/react-native-navigation-debug

1. Tap on the setting tab
2. Tap on the button "push new settings screen"
3. Tap on the current tab - Settings

i have found a workaround by listening event

  React.useEffect(() => {
    const listener = async (event) => {
      await Navigation.popToRoot('THE_HOME');
    };
    const unsubscribe = Navigation.events().registerBottomTabSelectedListener(
      listener,
    );
    return () => {
      unsubscribe.remove();
    };
  }, []);

you can test it on the home stack:

1. Tap on the Home tab
2. Tap on the button "push new screen"
3. Tap on the current tab - Home -> it's pop to root :)

[nericode]

Same issue

[SeamusY]

@svbutko question if you were to push on top of one of the tabs, and then tried to popToRoot... it would fail. Any fixable solution to this?

@yogevbd any idea as well?

[swabbass]

@SeamusY

Hey, can you provide a snippet, or a minimal reproducible demo, which have react-native and react-native-navigation version, to see how you implemented the described flow?

[SeamusY]

@swabbass

Index.js

Navigation.setRoot({
  root: {
    bottomTabs: {
      id: 'BottomTabsId',
      children: [
        {
          stack: {
            children: [{
              component: {
                name: 'QrCode',
                options: {
                  bottomTab: {
                    fontSize: 12,
                    text: 'Children1',
                  }
                }
              }
            }],
          }
        },
        {
          stack: {
            children: [{
              component: {
            name: 'Doc',
            options: {
              bottomTab: {
                text: 'Children2',
                fontSize: 12,
              }
            }
          }}],
        },
      },
      {
        stack: {
          children: [{
            component: {
          name: 'Profile',
          options: {
            bottomTab: {
              text: 'Children3',
              fontSize: 12,
            }
          }
        }}],
      },
    }
      ],
    }
  }
});

Children3:

export default class Children3 extends React.Component {
  constructor(props) {
    super(props);
  }
  
  editProfile = () => {
    Navigation.push(this.props.componentId, {
    component: {
        name: 'Edit',
        options: {
          bottomTabs: { visible: false, drawBehind: true, animate: true },
            topBar: {
                title: {
                    text: 'Edit '
                }
            }
        }
    }
  })};

  changePassForm = () => {
    Navigation.push(this.props.componentId, {
    component: {
        name: 'Pass',
        options: {
          bottomTabs: { visible: false, drawBehind: true, animate: true },
            topBar: {
                title: {
                    text: 'Push Navigation 1'
                }
            }
        }
    }
  })};

  render(){
    return (
      <NativeBaseProvider>
        <Center>
          <VStack space={4} safeAreaTop={16} bg="gray.200" px="32">
            <Heading textAlign="center" mb="8">
              Profile
            </Heading>
            <Pressable onPress={this.editProfile}>
              <Box textAlign="left" bg="lightBlue.100" >
                Edit 
              </Box>
            </Pressable>
            <Pressable onPress={this.changePassForm}>
              <Box textAlign="left" bg="lightBlue.100">
                Change
              </Box>
            </Pressable>
          </VStack>
        </Center>
      </NativeBaseProvider>
    );
};
}

Push Navigation 1:

import React from "react";
import { NativeBaseProvider, Center, Stack, FormControl, Input, Button } from "native-base";
import Auth from "@aws-amplify/auth";
import { Navigation } from "react-native-navigation";

export default class Edit extends React.Component {
    constructor(props) {
        super(props);
    }

      getOut = () => {
        Navigation.popTo(this.props.componentId, {
            component: {
                name: "Profile"
            }
        })
      }

    render() {
        const { isBusinessUser } = this.state
        return (
            <NativeBaseProvider>
                <Center flex={1} px={8}>
                    <Stack space={4}>
                        <Button onPress={this.getOut}>Get out</Button>
                        <Button onPress={()=> { console.log(Navigation)}}>Print</Button>
                    </Stack>
                </Center>
            </NativeBaseProvider>
        )
    }
}

[svbutko]

@SeamusY the issue described here covers the functionality of bottom tab tap specifically, I'd rather create a separate issue for your problem rather than have discussion in already closed one.

[swabbass]

@SeamusY I agree with @svbutko to open a new issue, please follow the guidelines, providing the minimal reproducible demo, that is runnable and can be checked locally:], and feel free to tag me!

[SeamusY]

@swabbass @svbutko updated now. Please refer to that video

[jbseppanen]

I'd like to know the status of the original issue here. It appears to be closed but also I see evidence of it being rolled back. I have cloned the original demo provided by @ludwig-pro and updated to the latest available version of react-native-navigation here. I am still seeing the same issue if I comment out the workaround.

[swabbass]

Hey all, sorry for the inconvenience, Android should be aligned with iOS and vice versa (whenever possible).

Just to clear things up, what you are trying to achieve is clicking on a bottom tab will clear its stack till root, am I getting it?

If that is the case, then soon (next week I think) will have a PR for it.
@jbseppanen
But first, did you try to pass popToRoot on bottomTabOptions? what is #7239 fix.