How to hide BottomTabNavigator in certain screen in React Navigation (4.x)

Question

I need to hide the bottom tab navigator in my 'Chat' screen in my app built with React Native and React Navigation. I have the following code:

 const UserNavigation= createStackNavigator({ Profile:{screen:Profile}, Search:{screen:Search}, Feedback:{screen:Feedback}, Chat: {screen:Chat}, //I need to hide the bottom tab navigation bar in this screen }, const TabNavigator = createBottomTabNavigator({ User: UserNavigation, Settings: SettingsNavigation, // etc... });

How can I achieve this?

Answer 1

You no need to hide the BottomNavBar, instead you can make the Chat Fragment into DialogFragment. So it covers the Full Screen

in Style.xml copy the following code

<style name="MY.DIALOG" parent="AppTheme">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

extend your ChatFragment from Fragment to DialogFragment, then copy the following

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NORMAL, R.style.MY_DIALOG);
    }

    @Override
    public void onStart() {
        super.onStart();
        Dialog dialog = getDialog();
        if (dialog != null) {
            int width = ViewGroup.LayoutParams.MATCH_PARENT;
            int height = ViewGroup.LayoutParams.MATCH_PARENT;
            dialog.getWindow().setLayout(width, height);
        }
    }

pass the instance of DialogFrament

loadDiaogFragment(new ChatFragment);

create the following function

private void loadDialogFragment(DialogFragment fragment) {
    FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
    fragment.show(transaction, "Load Fragment");
}

to close the DialogFragment use following inside onClickLister

dismiss();