when I am scrolling fast up and down it gives me a second blank screen after some seconds data will come
this same issue also face in Flatlist so I'm use Selection List but it also give me same issue
first I'm try to use section List in react native but it's give me some time blank screen then I'm using Flatlist it's working file but I want Strictly header but I don't know how to do in Flatlist so I'm using section List now how I remove blank screen in my project ?
`import React, { useState } from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
SectionList,
Image,
TouchableOpacity,
} from 'react-native';
import { DATA } from './DATA';
const App = () => {
const renderSectionHeader = ({ section: { title } }) => {
return (
<TouchableOpacity onPress={() => {}}>
<Text style={styles.header}>{title}</Text>
</TouchableOpacity>
);
};
const renderItem = ({ item, section: { id, title } }) => {
return (
<View style={{}}>
<View
style={{
borderColor: '#000',
borderWidth: 0.5,
height: 80,
justifyContent: 'center',
}}>
<View style={{ flexDirection: 'row' }}>
<Image
style={{ width: 50, height: 50, marginTop: 10 }}
source={{
uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4oOTHA8YZSX72pio8djNOBHxnOP5pFdUC6A&usqp=CAU',
}}
/>
<Text style={{ fontSize: 30, marginLeft: 10 }}>{item}</Text>
</View>
<Text style={{ fontSize: 25, marginLeft: 60, marginTop: -30 }}>
2902912712
</Text>
</View>
</View>
);
};
return (
<SafeAreaView style={styles.container}>
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={renderItem}
stickySectionHeadersEnabled
renderSectionHeader={renderSectionHeader}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 10,
//marginHorizontal: 16,
},
item: {
backgroundColor: '#f9c2ff',
},
header: {
fontSize: 32,
backgroundColor: '#fff',
},
title: {
fontSize: 24,
},
});
export default App;
`
export const DATA = [
{
title: 'A',
id: 1,
data: [
'Aadsar',
'Aalamuru',
'Aantra',
'Aau(Phalodi)',
'Aauwa',
'Abbigeri',
'Abhanpur',
'Abhona',
'Abhrampara',
'Abiramam',
'Abloli',
'Abohar',
'Abu Darshan',
'Abu Road',
'Abubshahar',
'Achampet',
'Achanta',
],
},
{
title: 'B',
id: 2,
data: [
'B.C Road',
'Bantwal',
'B.Nidamanuru',
'Babaganj',
'Babai',
'Babaliya',
'Babapur',
'Babapur',
'Babarpur',
'Babhaleshwar',
'Babhanpur',
'Babhulgaon',
'Babina',
'Babra',
'Babri',
'Babu Lal Nagar Indore',
'Babuganj',
],
},
{
title: 'C',
id: 3,
data: [
'Calangute',
'Calicut',
'Campirganj',
'Canacona',
'Chaba',
'Chabbewal',
'Chabhadiya',
'Chabi',
'Chadayamangalam',
'Chadhiar',
'Chadi',
'Chadiar',
'Chadotar',
'Chagalamarri',
'Chagallu',
'Chagran',
],
},
{
title: 'D',
id: 4,
data: [
'Dabani',
'Dabhadi',
'Dabhoi',
'Dabhol',
'Dabi',
'Daboh',
'Dabok',
'Dabra',
'Dabra',
'Dabri',
'Dabugaon',
'Dabwali',
'Dabwali',
'Dada Sibha',
'Dadal Dadar',
'Dadar',
'Dadhol',
'Dadma',
'Dadrewa',
'Dadva',
'Dag',
'Daggubadu',
'Dagguluru',
],
},
{
title: 'E',
id: 5,
data: [
'Eash',
'Eashan',
'Edhas',
'Edi',
'Ednit',
'Eeshwar',
'Eha',
'Ehimay',
'Eka',
'Ekaaksh',
'Ekaakshara',
'Ekaant',
'Ekaatmaa',
'Ekachakra',
'Ekachandra',
'Eman',
'Esahan',
'Evan',
'Ekon',
'Eae',
'Evo',
'Eson',
'Ehan',
],
},
{
title: 'F',
id: 6,
data: [
'Finn',
'Felix',
'Francisco',
'Finley',
'Fernando',
'Fabian',
'Frank',
'Franklin',
'Finnegan',
'Frederick',
'Forrest',
'Ford',
'Finnley',
'Fletcher',
'Flynn',
'Fisher',
'Felipe',
'Franco',
'Fox',
'Forest',
'Foster',
'Frankie',
'Finnian',
],
},
{
title: 'G',
id: 7,
data: [
'Gadhadhar',
'Gajbaahu',
'Gajdant',
'Gajendra',
'Gajendranath',
'Gajkaran',
'Gajpati',
'Gajrup',
'Gajvadan',
'Gambheer',
'Ganak',
'Gadin',
'Gadiva',
'Ganaka',
'Ganapathi',
'Ganapathy',
'Ganesh',
'Gil',
'Gaile',
'Geni',
'Geris',
'Geel',
'Gena',
],
},
{
title: 'H',
id: 8,
data: [
'Harshkha',
'Haresh',
'Harshad',
'Hina',
'Hansu',
'Hinal',
'Harshuk',
'Hari',
'Heeral',
'Harsh',
'H',
'Hani',
'Harskhuk',
'Hemsh',
'Harisa',
'Hanu',
'Haku',
'Hani',
'Haesh',
'Harina',
'Haruka',
'Hanish',
'Hanika',
],
},
{
title: 'I',
id: 9,
data: [
'Islampur',
'Isnapur',
'Ispurli',
'Iswal',
'Itarsi',
'Itawa',
'Itawa',
'Itempudi',
'Itia Thok',
'Ittamozhi',
'Itvaya',
'Itwa',
'Itwa',
'Ishan',
'Ishnai',
'Ishanu',
'Ibhanan',
'Ichaa',
'Idaspati',
],
},
{
title: 'J',
id: 10,
data: [
'Jeet',
'Jaai',
'Jaaijit',
'Jabaar',
'Jabar',
'Jag',
'Jeevan',
'Jagachandra',
'Jagadayu',
'Jagadbandu',
'Jagadeep',
'Jagadees',
'Jagadeesan',
'Jagadeesh',
'Jagadev',
'Jagadhidh',
'Jagadhish',
'Jagadish',
'Jagajeevan',
'Jagajeet',
'Jena',
'Jenil',
'Jenisha',
'Jenika',
],
},
{
title: 'K',
id: 11,
data: [
'Keshavi',
'Kaalappan',
'Kaalathi',
'Kaaliya',
'Kaalki',
'Kaamaari',
'Kaami',
'Kaamjaa',
'Kaan',
'Kaanan',
'Kaanishik',
'Kaapalin',
'Kaarikaa',
'Kaarmugilan',
'Kaarmuhilan',
'Kaarti',
'Kaartikey',
'Kaartikeya',
'Kaarvannan',
'Kaashinaath',
'Kaashinath',
'Kina',
'Kehs',
],
},
];
Description
I'm creating a contact page for my react native project
I am using a selection list
my data is more than 1K
when I am scrolling fast up and down it gives me a second blank screen after some seconds data will come
this same issue also face in Flatlist so I'm use Selection List but it also give me same issue
here is more info
Version
0.68.2
Output of
npx react-native infoPS C:\Users\dp312\Desktop\ReactNativeApp> npx react-native info
info Fetching system and libraries information...
System:
OS: Windows 10 10.0.22621
CPU: (4) x64 11th Gen Intel(R) Core(TM) i3-1115G4 @ 3.00GHz
Memory: 258.44 MB / 7.80 GB
Binaries:
Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-213.7172.25.2113.9014738
Visual Studio: Not Found
Languages:
Java: 11.0.16 - C:\Program Files\Java\jdk-11.0.16\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.2 => 0.68.2
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found
Steps to reproduce
first I'm try to use section List in react native but it's give me some time blank screen then I'm using Flatlist it's working file but I want Strictly header but I don't know how to do in Flatlist so I'm using section List now how I remove blank screen in my project ?
any one can give me solution??
Snack, code example, screenshot, or link to a repository
App.js
DATA.js