React-native-router-flux: Lazy property doesn't work on tab

[ValentinBlokhin]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.21 (v3 is not supported)
• react-native v0.47.2

Expected behaviour

Tab should be lazy loaded.

Actual behaviour

Tab information loads immediately on application load.

Steps to reproduce

I'm using this code:

<Scene
            key="one"
            tabs
            tabBarComponent={TabBarBottom}
            duration={1}
          >
            <Stack
              key="scene1"
              icon={MessageTab}
              title="scene1"
              hideNavBar
              lazy
            >
              <Scene
                key="subscene1"
                component={Subschene1}
                lazy
                title="subscene1"
                hideNavBar
              />
 </Stack>
 </Scene>

[aksonov]

It is first tab, what do you expect? It will be loaded because it is first.

[ValentinBlokhin]

It's not first tab, I removed some tabs from code example, it's 3 tab

[aksonov]

lazy doesn't work for containers, only for scenes - check lazy docs for TabNavigator (react-navigation).

[hugoh59]

lazy doesnt work for me, I've set it up in a scene and it's not working....

<Scene lazy key="auth" component={Auth} title="Facebook login"/>

[digitaldavenyc]

@aksonov lazy doesn't seem to be working for Scenes either, there's a duplicate issue open on it: https://github.com/aksonov/react-native-router-flux/issues/2846

Just to be clear, this should work right?

<Stack key="messages"
    icon={MessagesTab}
>
    <Scene key="messages"
        title="Messages"
        component={Messages}
        lazy={true}
        initial={true}
    />
    <Scene key="channel"
        component={Channel}
        hideNavBar={true}
        hideTabBar={true}
    />
</Stack>

[digitaldavenyc]

Anyone else experiencing this? It's causing some serious performance problems for us

[Samesh]

Yeap doesn't work properly, I'm guessing. Just in case, this is my code
Doesn't load on initial refresh, but keeps loading when navigating to a sister route. When I navigate to home, the friends component is mounted. I even tried adding tabs to all scenes. Still doesn't work. Please let me know if anyone finds a solution to this.
<Provider store={store}> <RouterWithRedux> <Scene key="root"> <Scene tabs={true} tabBarComponent={BottomNavigation} tabBarPosition="bottom" lazy={true} > <Scene key="profile" path="/profile/:userId" component={PostProfileContainer}/> <Scene key="reviewers" path="/reviewers/:userId" component={ReviewersProfileContainer} title="Reviewers" back={true}/> <Scene key="home" component={HomePageContainer}/> </Scene> <Scene key="signUp" component={SignUp} title="SignUp"/> <Scene key="traitsSelect" component={TraitsPageContainer} hideNavBar/> <Scene key="landing" component={LandingPageContainer} hideNavBar/> </Scene> </RouterWithRedux> </Provider>

[Samesh]

Hey animationEnabled={false} worked for me.

[digitaldavenyc]

@Samesh I tried adding animationEnabled={false} to a <Stack> and doesn't fix anything.... I'm getting so frustrated by this debating ripping out RNRF and just using React Navigation straight up

[Samesh]

`
hideNavBar
>
key="createPostModal"
component={CreatePostSelectType}
title="Login"
onExit={() => console.log('onExit')}
leftTitle="Cancel"
onLeft={Actions.pop}
/>

                <Scene key="root">
                    <Scene hideNavBar panHandlers={null}>
                        <Tabs
                            key="tabbar"
                            showLabel={false}
                            tabBarComponent={BottomNavigation}
                            tabBarPosition="bottom"
                            animationEnabled={false}
                            lazy
                        >
                            <Stack key="tab_1">
                                <Scene key="home" component={HomePageContainer} hideNavBar/>
                                <Scene key="comments" path="/comments/:postIdParam" component={CommentsContainer} title="Comments" hideTabBar/>
                                <Scene key="notifications" component={NotificationsContainer} title="Notifications"/>
                                <Scene key="singlePost" component={SinglePagePostContainer}/>
                                <Scene key="pendingComments" path="/pending_comments/:postIdParam" component={PendingCommentsContainer} title="Pending comments" hideTabBar/>
                                <Scene key="search" component={SearchPageContainer} navBar={SearchNavBar}/>
                                <Scene key="profile" path="/profile/posts/:userIdParam" component={PostProfileContainer}/>
                                <Scene key="reviewers" path="/profile/reviewers/:userIdParam" component={ReviewersProfileContainer} title="Reviewers"/>
                            </Stack>

                        </Tabs>
                        <Scene key="signUp" component={SignUp} title="SignUp"/>
                        <Scene key="traitsSelect" component={TraitsPageContainer} hideNavBar/>
                        <Scene key="landing" component={LandingPageContainer} hideNavBar/>
                    </Scene>
                </Scene>

                </Modal>
            </RouterWithRedux>
        </Provider>`

This is what works for me @digitaldavenyc. I don't really understand well as to how this works either but one thing is that the first nested route is rendered initially.

[wmonecke]

Not working for me neither. Trying to implement RAM Modules and this is a bottleneck in performance.