push a screen that is not in tabs wix v2

Question

I have a bottom tab that contain home screen and I want when clicking on a button to navigate to another screen that is not included in the stack.

Here's my screens.js where I've registered my three screens

export const registerScreens = (Provider, store) => { 
  Navigation.registerComponent('app.Drawer',() =>  Drawer, Provider, store);
  Navigation.registerComponent('app.Home',() =>  Home, Provider, store);
  Navigation.registerComponent('app.About', () => About, Provider, store);
};

Here's my navigator.js where I've set a root to navigation I've basically created a sideMenu with drawer and bottom tabs

Navigation.setRoot({
    root: {
        sideMenu: {
            left: {
                component: {
                    name: 'app.Drawer',
                },
            },
            center: {
                bottomTabs: {
                    children: [
                        {
                            component: {
                                name: 'app.Home',
                                options: {
                                    bottomTab: {
                                        text: 'Tab 1',
                                        icon: require('../assets/icons/account.png'),
                                    },
                                },
                            },
                        }],


                },
            },
        },
    });

and Home.js

export default class Home extends Component {
  render() {
    return (
      <View style={{
        backgroundColor: 'white', flex: 1, justifyContent: 'center', alignItems: 'center',
      }}
      >
        <Text>Home page</Text>
        <Button
          onPress={() => {
            Navigation.push(this.props.componentId, { <-- doesn't work
              component: {
                name: 'app.About',
              }
            });
          }}
          title="CLick to go to about page"
        />
      </View>
    );
  }
}

Answer 1

you should add all the screens that you want to navigate to in the center of the stack of your root. ( don't forget to register the screens too).

      center: {
              stack: {
                id: "sideDrawerComponents",
                children: [{
                  component: {
                    id: "complaintSD",
                    name: "example.ComplaintScreen"
                  },
                  component: {
                    id: "MainAppSD",
                    name: "example.MainApplicationScreen"
                  }                 
                }]
              },
           }