How to add transition between screens within TabNavigation?

[lukaleli]

Is there any way to add transition between screens within TabNavigation? Adding NavigationStyles in defaultRouteConfig in NavigationProvider adds animation transition when navigating to another screen. But that's not the case when navigation is wrapped with TabNavigation as shown below:

<TabNavigation id="app" navigatorUID="app" initialTab="dashboard">
        <TabItem id="dashboard"
                 renderIcon={(isSelected) => this.renderIcon(isSelected, "Dashboard", Assets.icons.dashboard)}>
          <StackNavigation
            id="dashboard"
            initialRoute={Router.getRoute(Routes.DASHBOARD_SCREEN)}
            defaultRouteConfig={{
            styles: {
              ...NavigationStyles.SlideHorizontal,
            }}}
          />
        </TabItem>
        <TabItem id="profile"
                 renderIcon={(isSelected) => this.renderIcon(isSelected, "Profile", Assets.icons.profile)}>
          <StackNavigation
            id="profile"
            initialRoute={Router.getRoute(Routes.PROFILE_SCREEN)}
            defaultRouteConfig={{
            styles: {
              ...NavigationStyles.SlideHorizontal,
            }}}
          />
        </TabItem>
      </TabNavigation>