Carregamento do FlatList com dados do Firebase trava o App no React Native

Ao renderizar dados no FlatList o app trava, essa tela está em um Tab e se por algum motivo abro ela não consigo mais navegar até que a lista seja preenchida. Não sei se estou fazendo algo errado.

segue meu código:

import React from 'react'; import FirebaseConfig from '../FirebaseConfig'; import { Alert, FlatList, View, ActivityIndicator, StyleSheet, TouchableOpacity } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; import { Container, Content} from 'native-base' import { ListItem } from 'react-native-elements'  var data = [];  const handleClick = (item) => {     Alert.alert('Button clicked!' + item.val().name); }  export default class VerOs extends React.Component {     constructor(props) {         super(props);         console.log('constructor VerOs');          this.state = {             isLoading: true,             fontLoaded: false,             listViewData: data         };      }      componentDidMount() {         var that = this         FirebaseConfig.database().ref('/user').on('value', snap => {             this.carregaList(that)           })      }       async carregaList(that) {         console.log('carrega VerOs ');         var newData = []         FirebaseConfig.database().ref('/user').orderByChild("type").equalTo('cliente').on('child_added', function (dat) {             newData.push(dat)             that.setState({                 listViewData: newData,                 isLoading: false             })          })     }       static navigationOptions = {         tabBarLabel: 'Ver O.S',         tabBarIcon: ({ tintColor }) => (             <Icon name='ios-aperture' color={tintColor} size={24} />         )     }        renderItem({ item }) {          return (             <TouchableOpacity onPress={() => handleClick(item)} >                 <ListItem                     title={item.val().name}                     subtitle={item.val().name}                     leftAvatar={{ source: { uri: item.val().age } }} />             </TouchableOpacity>         )      }      render() {         if (this.state.isLoading) {             return (                 <View style={styles.container}>                     <ActivityIndicator size="large" animating />                 </View>             )         } else {             return (                 <Container>                     <Content>                         <FlatList                             data={this.state.listViewData}                             renderItem={this.renderItem} />                      </Content>                 </Container>              )         }     } }  const styles = StyleSheet.create({     container: {         flex: 1,         alignItems: 'center',         justifyContent: 'center',     } }); 

Mobile Swipe: trava quando move o dedo na tela rapidamente

Olá, estou estudando os Touch Events e fazendo um exemplo de uma página com seções full que passa uma a uma na tela.

Fiz o CSS, HTML e Script, o básico funciona… Mas quando testo no celular, se movimentar o dedo para cima/baixo rapidamente ele da umas travadas e faz o scroll.

Segue o código:

$  (function () {         // Touch Events         window.addEventListener("touchstart", handleStart, false);         window.addEventListener("touchmove", handleMove, false);         window.addEventListener("touchcancel", handleCancel, false);         window.addEventListener("touchend", handleEnd, false);         var posIniY = 0;         var posFimY = 0;         var changePage = false;         function handleStart(evt) {             console.log('Start');             posIniY = evt.touches[0].screenY;             changePage = false;         }         function handleMove(evt) {             console.log('Move');             posFimY = evt.touches[0].screenY;             changePage = true;         }         function handleEnd() {             console.log('End');             var scrollActive = $  ('#navegacao').find('.scroll.active').parent();             if( changePage ) {                 var difY = (posIniY - posFimY);                 if( difY > 50 ) {                     // Move para baixo                     scrollActive.next('.nav-item').find('.scroll').click();                     changePage = false;                 } else if( difY < -50 ) {                     // Move para cima                     scrollActive.prev('.nav-item').find('.scroll').click();                     changePage = false;                 } else {                     scrollActive.find('.scroll').click();                     return false;                 }             }             changePage = false;         }         function handleCancel() {             console.log('Cancel');             changePage = false;         }          // Navegação vertical         var scrollLinkY = $  ('.scroll');         scrollLinkY.eq(0).click().addClass('active');          // Scroll suave         scrollLinkY.click(function (e) {             console.log('scroll suave');             var $  this = $  (this);             if ($  this.hasClass('scroll')) {                 e.preventDefault();                 $  ('body,html').animate({                     scrollTop: $  (this.hash).offset().top                 }, 1000);             }             if (!$  this.hasClass('active')) {                 scrollLinkY.removeClass('active');                 $  this.addClass('active');             }         });          // Usa as teclas         window.addEventListener("keydown", function (e) {             var itemActive = $  ('#navegacao').find('.scroll.active').parent();             $  ('.scroll.d-md-none').remove();             switch (e.key) {                 case 'ArrowUp':                     itemActive.prev('.nav-item').find('.scroll').click();                     break;                 case 'ArrowDown':                     itemActive.next('.nav-item').find('.scroll').click();                     break;                 case 'Home':                     scrollLinkY.eq(0).click();                     break;                 case 'End':                     scrollLinkY.eq(-1).click();                     break;             }         }, true);          // Animações no scroll         var secoes = $  ('section'),             classAnima = 'animated';         function animeOnScroll() {             setTimeout(function () {                 var disTop = $  (document).scrollTop() + 200;                 secoes.each(function () {                     var itemTop = $  (this).offset().top;                     if (disTop >= itemTop) {                         $  (this).addClass(classAnima);                     }                 });             }, 1000);         }         animeOnScroll();     });
@import url('https://fonts.googleapis.com/css?family=Roboto');          * {             margin: 0;             padding: 0;             border: 0 none;             outline: 0 none;         }         body {             font: 16px 'Roboto', sans-serif;         }         section {             display: flex;             height: 100vh;             align-items: center;             justify-content: center;         }          section h3 {             color: #fff;             font-size: 42px;         }          .blue {             background-color: #0d527d;         }         .purple {             background-color: #8c4267;         }         .wine {             background-color: #4b0000;         }         .red {             background-color: #a61615;         }         .orange {             background-color: #f54b06;         }         .green {             background-color: #308c4a;         }          /* Menu lateral seções */         #navegacao {             position: fixed;             top: 50%;             right: 40px;             padding: 0;             -webkit-transform: translateY(-50%);             -moz-transform: translateY(-50%);             -ms-transform: translateY(-50%);             -o-transform: translateY(-50%);             transform: translateY(-50%);             z-index: 10;         }         #navegacao .nav-item {             margin: 6px 0;             list-style: none;         }         #navegacao .nav-item .nav-link {             display: block;             padding: 0;             background-color: transparent;         }         #navegacao .nav-item .nav-link::before {             content: '';             display: block;             width: 7px;             height: 7px;             background-color: #fff;             -webkit-border-radius: 50%;             -moz-border-radius: 50%;             border-radius: 50%;             opacity: .15;         }         #navegacao .nav-item .nav-link:hover::before,         #navegacao .nav-item .nav-link.active::before {             opacity: 1;         }         #navegacao .nav-item .nav-link span {             position: absolute;             top: -3px;             width: 150px;             color: rgba(255,255,255,1);             text-align: right;             pointer-events: none;             opacity: 0;             -webkit-transform: translate3d(-100%, 0, 0);             transform: translate3d(-100%, 0, 0);         }         #navegacao .nav-item .nav-link:hover span {             animation: fadeInLeft .8s cubic-bezier(.5,.9,.1,.9);             animation-fill-mode: forwards;         }
<nav id="navegacao" class="navbar d-none d-md-block">     <ul class="nav nav-pills flex-column">         <li class="nav-item"><a class="nav-link scroll" href="#secao01"><span>Seção 01</span></a></li>         <li class="nav-item"><a class="nav-link scroll" href="#secao02"><span>Seção 02</span></a></li>         <li class="nav-item"><a class="nav-link scroll" href="#secao03"><span>Seção 03</span></a></li>         <li class="nav-item"><a class="nav-link scroll" href="#secao04"><span>Seção 04</span></a></li>         <li class="nav-item"><a class="nav-link scroll" href="#secao05"><span>Seção 05</span></a></li>         <li class="nav-item"><a class="nav-link scroll" href="#secao06"><span>Seção 06</span></a></li>     </ul> </nav> <section id="secao01" class="blue"><h3>Seção 01</h3></section> <section id="secao02" class="purple"><h3>Seção 02</h3></section> <section id="secao03" class="wine"><h3>Seção 03</h3></section> <section id="secao04" class="red"><h3>Seção 04</h3></section> <section id="secao05" class="orange"><h3>Seção 05</h3></section> <section id="secao06" class="green"><h3>Seção 06</h3></section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>