title: React Native List View Does not Render
body: <p>My code: </p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>const tabscreen = (screen, path, label, src) =&gt; {
    return {
      screen, path,
      navigationOptions: {
        tabBarLabel: label,
        tabBarIcon: ({
                       tintColor,
                       focused = true
                     }) =&gt; (&lt;TabIcon src={src} active={focused}/&gt;),
      }
    };
  };
  
  
  
  
  const MainTab = TabNavigator({
    Home: tabscreen(HomeScreen, '/home', 'home', 'home'),
    Chat: tabscreen(ChatScreen, '/chat', 'chat', 'chat'),
    Find: tabscreen(FindScreen, '/find', 'find', 'find'),
    Profile: tabscreen(ProfileScreen, '/profile', 'find', 'profile')
  }, {
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: false,
    //...other configs
    tabBarOptions: {
      // tint color is passed to text and icons (if enabled) on the tab bar
      activeTintColor: '#1BBC9B',
      inactiveTintColor: '#9B9B9B',
      showIcon: true,
      style: {
        backgroundColor: '#F4F4F4',
        borderTopWidth: 0,
        height: 49
      },
      labelStyle: {
        marginTop: 0,
        marginLeft: 0,
        marginRight: 0,
        marginBottom: 1.5
      }
    }
  });
  
  
   const AppNavigator = StackNavigator({
    Main: {
      screen: MainTab ,
      path: '/',
      navigationOptions: {
        header: null,
        headerVisible: false,
        gesturesEnabled: false,
      }
    },
  
  
  }, {
    initialRouteName: 'Main',
    mode: 'card',
    headerMode: 'screen',
    navigationOptions: {
        headerVisible: false,
        gesturesEnabled: true,
        headerStyle: styles.headerStyle,
        headerTitleStyle: styles.headerTitleStyle,
        headerTintColor: 'white',
        headerBackTitle: null,
    }
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/rguZd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rguZd.png" alt="enter image description here"></a></p>
  
  <p>This demo uses redux to control state. 
   In the <code>FindScreen</code>, I use the <code>List view</code> to render a list. The problem is when I click the <code>Find</code> tab. The <code>List view</code> does not render. <strong>I have to first swipe the screen, then the <code>List view</code> show.</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/d3ElI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d3ElI.png" alt="enter image description here"></a></p>
  
  <p>I used <code>connect</code> of <code>redux-react</code> to map the dispatch to <code>FindScreen</code> component. I request the data source of the <code>List view</code> in the <code>componentDidMount</code> lifecycle hook.</p>
  
  <pre class="lang-js prettyprint-override"><code>componentWillReceiveProps(nextProps) {
  
      if( nextProps.doctorList !== this.props.doctorList){
        debugger;
        this.setState({
          isRefreshing: false,
          dataSource: this.state.dataSource.cloneWithRows(nextProps.doctorList),
        })
      }
  }
  </code></pre>
  
  <p>As the code above, I set the debugger in the <code>componentWillReceiveProps</code> lifecycle hook. The breakpoint stops at the line of the debugger. Now, I know I request the data from the backend well.</p>
  
  <p>Do you know the reason of the <code>List view</code> does not render?
   What can I do to show the <code>List view</code> in the first render?</p>
  
  <p>I know one way of solving this problem is change <code>lazy: false,</code> to  <code>lazy: true</code>. Due to the <code>lazy: false</code> is written by my leader, so I had better not change it.</p>