v4 Tabs - reset stack on changing tab

[fxhereng]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.17
• react-native v0.47.1

I have 4 tabs in my application with some subscenes, for example When I'm navigating in Tab1 - Scene 2 --> Scene 3, then on switching to Tab2, it keeps the routes of Tab1. So that when pressing android Back button, it removes the Scene3 and come back to the state Tab1 - Scene2. Behavior I would like to delete.

Is there a way to tell that when switching tabs, resetting the previous embeded tabs routes?

<Scene key='TabBar' tabs showIcon={true} showLabel={true} swipeEnabled={false} lazy={false} type={'reset'} activeTintColor={Colors.main_color} inactiveTintColor={Colors.gray_dark} indicatorStyle={Styles.indicatorStyle} labelStyle={Styles.labelStyle} tabStyle={Styles.tabStyle} iconStyle={Styles.iconStyle} upperCaseLabel={false} activeBackgroundColor='transparent' tabBarStyle{{backgroundColor: 'white'}} initial={true} tabBarPosition={'bottom'} navBar={(props) => this.renderNavigationBar(props)}>

	<Scene key='visits' title={LocalizedStrings.visits} icon={TabIcon} iconString={'visits'}>
		<Scene key='NextVisits' component={NextVisits} sceneStyle={Styles.sceneWithTabBar} hideNavBar />
	        <Scene key='VisitDetail' component={VisitDetail} sceneStyle={Styles.sceneWithTabBar} hideNavBar />
	        <Scene key='ReportVisit' component={ReportVisit} sceneStyle={Styles.sceneWithTabBar} hideNavBar />
	</Scene>
        <Scene key='dashboard' title={LocalizedStrings.dashboard} initial={true} icon={TabIcon} iconString={'dashboard'} type={'reset'}>
	    <Scene key='DashboardMain' component={DashboardMain} sceneStyle={Styles.sceneWithTabBar}  hideNavBar type={'reset'}/>
	</Scene>
	<Scene key='news' title={LocalizedStrings.news} icon={TabIcon} iconString={'news'}>
		<Scene key='News' component={News} sceneStyle={Styles.sceneWithTabBar} hideNavBar />
	</Scene>
	<Scene key='centers' title={LocalizedStrings.centers} icon={TabIcon} iconString={'centers'}>
	        <Scene key='DashboardMain' component={DashboardMain} sceneStyle={Styles.sceneWithTabBar} hideNavBar />
	</Scene>
</Scene>

[MakeAndyBetter]

try backBehavior="none" on your scene with the tabs

[fxhereng]

This setting doesn't solve my problem, it deactivates the behavior to select the initial tab on back when you have no routes in your stack. But it doesn't clear the stack on changing tabs.

[MakeAndyBetter]

A couple of things you could do

when you nav to the scene:
Actions.TABSCENE({type:ActionConst.RESET});

OR when you set up your router:
<Scene key='TABSCENE' type={ActionConst.RESET}/>

OR to initiate reset when on tab scene
const resetAction = NavigationActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'TABSCENE' }) ] }); setTimeout(this.props.navigation.dispatch.bind(null, resetAction), 200);

[aksonov]

@fxhereng @MakeAndyBetter is right, it should work (not everybody needs such 'feature' so I can't make it 'built-in' into RNRF).

[fxhereng]

Thanks for response,

The type={ActionConst.RESET} on the scene doesn't seem to work for me.

Other solution would work I suppose but how do you override the onTabClick event?

I saw there was a onTabPress={(scene) => {}} call back from react navigation but it doesn't override the navigation action.

Do you see what I mean?

[MakeAndyBetter]

attach the reset action to a timeout - within your own method for onTabClick I've had to do this from my navdrawer. Perhaps try use the specific tab key instead of the tab scene key

const resetAction = NavigationActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'TABSCENE' }) ] }); setTimeout(this.props.navigation.dispatch.bind(null, resetAction), 200);

[fxhereng]

Thanks for those precisions,

But how do you override the onTabClickevent? Is there a callback for this?

I understand I can call it from outside if needed, but when you click on the tabs explicitely, how do you override this onPress event?

Cheers,

[Ashishlog9]

HI ,
I have switched the position of tab . For eg tab1 , tab2,tab3,tab4 becomes tab1 ,tab3,tab2,tab1 .BUt when i switched position the whole navigation is affected . back navigation is not working properly . I think do i need to write something else .
See the code below , i have to bring booking tab on place of search tab . Please help i am suffering from this issue so log .

     <Router onStateChange={stateHandler} backAndroidHandler={onBackPress}>

            <Scene key="root" hideNavBar gesturesEnabled={false}>
                <Scene key="splash" component={Splash} title="Splash" hideTabBar />
                <Scene key="tabBar" swipeEnabled={false} tabs lazy={true} tabBarPosition="bottom" tabBarStyle={styles.tabBarStyle} showLabel={false} >
                    <Scene key="homeTab" initial={true} hideNavBar={true} icon={TabIcon} title="Home" tabBarOnPress={() => this.handleTabPress2('homeTab')} refresh >
                        <Scene key="landingPage" component={NewLandingPage} title="NewLandingPage" />
                        {/* <Scene key="landingPage" component={LandingPage} title="LandingPage" /> */}
                        <Scene key="login" clone={true} component={Login} title="LoginScreen" back={true} />
                        <Scene key="loginBookings" clone={true} component={Login} title="LoginScreen" back={true} hideTabBar />
                        <Scene key="existingUserLogin" clone={true} component={ExistingUserLogin} title="Extended Perks" back={true} />
                        <Scene key="existingUserLoginBooking" clone={true} component={ExistingUserLogin} title="Extended Perks" back={true} hideTabBar />
                        <Scene key="welcome" clone={true} component={Welcome} title="Welcome" />
                        <Scene key="forgetPassword" clone={true} component={ForgetPassword} title="ForgetPassword" back={true} />
                        <Scene key="forgetPasswordBooking" clone={true} component={ForgetPassword} title="ForgetPassword" back={true} hideTabBar />
                        <Scene key="resetPassword" clone={true} component={ResetPassword} title="ResetPassword" back={true} />
                        <Scene key="resetPasswordBooking" clone={true} component={ResetPassword} title="ResetPassword" back={true} hideTabBar />
                        <Scene key="registerUser" clone={true} component={RegisterUser} title="RegisterUser" />
                        <Scene key="registerUserBooking" clone={true} component={RegisterUser} title="RegisterUser" hideTabBar />
                        <Scene key="privacyPolicy" clone={true} component={PrivacyPolicy} title="privacyPolicy" />
                        <Scene key="validateGuestEmail" clone={true} component={ValidateGuestEmail} title="validateGuestEmail" back={true} />
                        <Scene key="editPayment" clone={true} component={EditPayment} title="Edit Payment" back={true} />
                        <Scene key="editPaymentBookings" clone={true} component={EditPayment} title="Edit Payment" back={true} hideTabBar />
                        <Scene key="offerLink" component={OfferLink} title="OfferLink" refresh />
                    </Scene>


                    <Scene key="searchTab" title={screenWidth > 340 ? "Book Now" : "Search"} icon={TabIcon} hideNavBar={true} tabBarOnPress={() => this.handleTabPress2('searchTab')}>
                        <Scene key="destinationSearch" component={DestinationSearch} title="DestinationSearch" />
                        <Scene key="propertyView" component={PropertyView} title="PropertyView" />
                        <Scene key="filterProperties" component={FilterProperties} title="filterProperties" />
                        <Scene key="roomDetail" clone={true} component={roomDetail} title="roomDetail" />
                        <Scene key="hotelDetailedInfo" clone={true} component={hotelDetailedInfo} title="hotelDetailedInfo" />
                        <Scene key="accessibilityFeaturesBookings" component={accessibilityFeatures} title="accessibilityFeatures" back={true} hideTabBar />
                        <Scene key="bookingDetails" clone={true} component={BookingDetail} title="bookingDetails" hideTabBar />
                        <Scene key="rateDetailInfoBookings" clone={true} component={RateDetailInfo} title="rateDetailInfo" back={true} hideTabBar />
                        <Scene key="searchMapView" component={SearchMapView} title="SearchMapView" />
                        <Scene key="filterProperties" component={FilterProperties} title="filterProperties" />
                        <Scene key="termAndConditions" component={termAndConditions} title="termAndConditions" />
                        <Scene key="guestDetails" component={GuestDetails} title="GuestDetails" />
                        <Scene key="amenitiesList" component={AmenitiesList} title="AmenitiesList" />
                        <Scene key="addPaymentBookings" component={AddPayment} title="Add Payment" hideTabBar />
                        <Scene key="calendar" component={Calendar} title="calendar" />
                        <Scene key="getDirectionsNearbyMap" clone={true} component={GetDirectionsNearByMap} title="GetDirectionsNearByMap" />
                        <Scene key="rateDetailInfo" clone={true} component={RateDetailInfo} title="rateDetailInfo" back={true} />
                        <Scene key="hotelDetailedInfo" clone={true} component={hotelDetailedInfo} title="hotelDetailedInfo" />
                        <Scene key="hotelDetail" clone={true} component={hotelDetail} title="hotelDetail" />
                        <Scene key="rateDetail" clone={true} component={rateDetail} title="RateDetail" back={true} />
                        <Scene key="accessibilityFeatures" clone={true} component={accessibilityFeatures} title="accessibilityFeatures" back={true} />
                        <Scene key="smokingPolicy" clone={true} component={smokingPolicy} title="smokingPolicy" back={true} />
                        <Scene key="addPayment" clone={true} component={AddPayment} title="Add Payment" />





                    </Scene>
                    <Scene key="bookingsTab" title="Bookings" icon={TabIcon} hideNavBar={true} tabBarOnPress={() => this.handleTabPress2('bookingsTab')} >
                        <Scene key="reservationHistory" component={ReservationHistory} title="reservationHistory" />
                        <Scene key="bookAgain" component={BookAgain} title="book again" />
                        <Scene key="viewBookingDetail" component={ViewBookingDetail} title="viewBookingDetail" />
                        <Scene key="reviewStay" component={StayReview} title="reviewStay" />
                        <Scene key="modifyBooking" component={ModifyBooking} title="ModifyBooking" />
                        <Scene key="modifyRoomType" component={ModifyRoomType} title="ModifyRoomType" />
                        <Scene key="modifyRateType" component={ModifyRateType} title="ModifyRateType" />
                        <Scene key="modifyGuestInfo" component={ModifyGuestInfo} title="modifyGuestInfo" />
                        {/** reservation confirmation and removed the clone*/}
                        <Scene key="reservationConfirmation" component={ReservationConfirmation} title="reservationConfirmation" back={true} />
                        <Scene key="modifyBookingConfirmation" component={ModifyBookingConfirmation} title="ModifyBookingConfirmation" />
                        <Scene key="calendar" component={Calendar} title="calendar" />

                    </Scene>

                    <Scene key="accountTab" title="Account" icon={TabIcon} hideNavBar={true} tabBarOnPress={() => this.handleTabPress2('accountTab')}>
                        <Scene key="profileAccountManagement" component={ProfileAccountManagement} title="ProfileAccount" refresh />
                        <Scene key="myInfo" component={MyInfo} title="MyInfo" />
                        <Scene key="preferences" component={EditPrefrences} title="Preferences" />
                        <Scene key="changePassword" component={ChangePassword} title="ChangePassword" back={true} />
                        <Scene key="deleteAccount" component={DeleteAccount} title="deleteAccount" />
                        <Scene key="accountDeleted" component={AccountDeleted} title="accountDeleted" />
                        <Scene key="payment" clone={true} component={PaymentList} title="Payment Methods" />
                        <Scene key="promoCodes" clone={true} component={PromoCodes} title="promoCodes" />
                        <Scene key="feedback" clone={true} component={Feedback} title="feedback" />
                        <Scene key="notifications" component={Notifications} title="Notifications" />
                    </Scene>
                    <Scene key="moreTab" title="More" icon={TabIcon} hideNavBar={true} tabBarOnPress={() => this.handleTabPress2('moreTab')} refresh>
                        <Scene key="menuPage" component={MenuScreen} title="MenuPage" />
                        <Scene key="faq" component={FAQ} title="faq" />
                        <Scene key="exploreHotels" component={ExploreHotels} title="exploreHotels" />
                        <Scene key="contactUs" component={ContactUs} title="contactUs" />
                        <Scene key="contactType" component={ContactType} title="contactType" back={true} />
                        <Scene key="brgClaim" component={BRGClaim} title="brgClaim" back={true} />
                        <Scene key="brgForm" component={BRGForm} title="brgForm" back={true} />
                        <Scene key="specialsAndPromotions" component={SpecialsAndPromotions} title="specialsAndPromotions" />
                        <Scene key="dealDetails" component={DealDetails} title="dealDetails" back={true} />
                        <Scene key="perksSearchResults" component={PerksSearchResults} title="PerksSearchResults" refresh />
                        <Scene key="redeemPerksDeals" component={RedeemPerksDeals} title="RedeemPerksDeals" refresh />
                        <Scene key="dealsLanding" component={DealsLanding} title="DealsLanding" refresh />
                        <Scene key="offerLink" component={OfferLink} title="OfferLink" refresh />
                        <Scene key="perksSearch" component={PerksSearch} title="search deals" />
                        <Scene key="aboutUs" component={AboutUs} title="aboutUs" />
                        <Scene key="favHistory" component={DealsFavHistory} title="favHistory" />
                        <Scene key="dealLocation" component={DealLocation} title="dealLocation" back={true} />
                    </Scene>
                </Scene>
            </Scene>
        </Router>