React Native List View Does not Render - react-native

Question

My code:
const tabscreen = (screen, path, label, src) => {
return {
screen, path,
navigationOptions: {
tabBarLabel: label,
tabBarIcon: ({
tintColor,
focused = true
}) => (<TabIcon src={src} active={focused}/>),
}
};
};
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,
}
});
This demo uses redux to control state.
In the FindScreen, I use the List view to render a list. The problem is when I click the Find tab. The List view does not render. I have to first swipe the screen, then the List view show.
I used connect of redux-react to map the dispatch to FindScreen component. I request the data source of the List view in the componentDidMount lifecycle hook.
componentWillReceiveProps(nextProps) {
if( nextProps.doctorList !== this.props.doctorList){
debugger;
this.setState({
isRefreshing: false,
dataSource: this.state.dataSource.cloneWithRows(nextProps.doctorList),
})
}
}
As the code above, I set the debugger in the componentWillReceiveProps lifecycle hook. The breakpoint stops at the line of the debugger. Now, I know I request the data from the backend well.
Do you know the reason of the List view does not render?
What can I do to show the List view in the first render?
I know one way of solving this problem is change lazy: false, to lazy: true. Due to the lazy: false is written by my leader, so I had better not change it.

Answer 1

Add removeClippedSubviews={false} to your ListView.
You can refer to https://github.com/react-community/react-navigation/issues/1279 for the fix.
Please note that this is not an ideal fix because this is disabling a performance optimization.
You can read about the performance optimization here https://facebook.github.io/react-native/docs/listview.html#removeclippedsubviews