Cells/Rows in the <SectionList/> loading slowly on Android - react-native

Question

I use the new API <SectionList/> to build a list UI, but I found issues running on Android devices.
While scrolling down with SectionList, only a few new cells/rows can be displayed at once. You need to scroll SectionList down again to display the next a few new cells/rows, and wait for the next cells are ready to be displayed. It works not the same on the iOS.
When reaching the last item in the SectionList, I tried to scroll up quickly to the first item in the SectionList, and it display a blank view with a few seconds till the cells are rendered.
I have hundred rows (country list) for display, and the user experience is bad. The user takes many seconds to reach the last item in the country list, and takes many seconds to show the previous rows after scrolling up quickly.
export default class LoginCountryList extends React.Component {
props: LoginCountryListProps;
static defaultProps = {
data: {},
};
renderRow = (rowItem: any) => {
console.log('render row:');
return (
<TouchableHighlight
onPress={() => this.props.onSelectRow(rowItem.item)}
>
<View style={styles.row}>
<Text style={styles.rowLeftText}>{rowItem.item.name}</Text>
<Text style={styles.rowRightText}>{`+${rowItem.item.ccc}`}</Text>
</View>
</TouchableHighlight>
)
};
renderSectionHeader = (sectionItem: any) => (
<View
style={styles.sectionHeader}
>
<Text style={styles.sectionHeaderText}>{sectionItem.section.title}</Text>
</View>
);
render() {
console.log('re-render section list')
return (
<View style={styles.container}>
<NavigationBar.TextStyle
title={title}
leftText={leftText}
onLeft={this.props.onBack}
/>
<SectionList
style={styles.listView}
sections={this.props.data}
renderItem={this.renderRow}
renderSectionHeader={this.renderSectionHeader}
/>
</View>
);
}
}
// data:
const data = [
// first section
{
"title": "A",
"key": "A",
"data": [
// first row
{
"ccc": "93",
"countryCode": "AF",
"currencyCode": "AFN",
"currencySymbol": "؋",
"name": "Afghanistan",
"key": "AF"
},
{
"ccc": "355",
"countryCode": "AL",
"currencyCode": "ALL",
"currencySymbol": "Lek",
"name": "Albania",
"key": "AL"
},
...
]
},
...
]
I tried to log in the renderItem callback when SectionList did display, and it calls renderItem hundred times for displaying only 15 rows in the first section.
Log a constant string render row: with hundred times when the SectionList did display:
Log the indexes of the items when the SectionList did display. The same row did render multiple times when the SectionList did display.
Did use SectionList wrongly? How do I do to fix it?
Environment
react-native -v: 0.45.1 & 0.46.1 (tried both version)
node -v: v7.8.0
npm -v: 4.2.0
yarn --version (if you use Yarn): 0.22.0
Target Platform (e.g. iOS, Android): Android
Development Operating System (e.g. macOS Sierra, Windows 10): macOS
Build tools (Xcode or Android Studio version, iOS or Android SDK version, if relevant): Android SDK 25.0.2