Search code examples
react-nativereact-native-router-flux

How do I prevent the current scene from rendering during a scene transition with react-native-router-flux?


I have a ListView component on Scene A that initially has nothing in it; it's a list of recent search terms tied to the store.

When the user enters a search term and clicks submit on Scene A, the recent search terms store is updated, then we immediately transition to Scene B. I get the "empty section headers" warning from the ListView that I believe is caused by Scene A starting to render as the scene is transitioning.

I tried using shouldComponentUpdate() on the Scene A component, but it doesn't seem to fire?! I was hoping to look at the current location and the new location and if they're different return false to prevent updating/rendering.

Anyone have a suggestion for this?

Setting enableEmptySections={true} prevents the warning message about empty section headers, but this seems like bandage rather than a permanent solution.


Solution

  • Are you passing an empty array into the ListView on the initial render and then an array with data once you have it?

    If so, its simply a warning that you are rendering a ListView with empty sections which in this case is probably the only section. You can either pass

    enableEmptySections={true}
    

    Or you can do a simple check to see if there is data for the ListView and if not return null instead. When the data comes through the view will re-render with the ListView

    In the render function

    if (!this.state.myVar) return null
    
    return <MyListView myData={this.state.myVar} />