Реагируйте на элементы SectionList Native, мерцающие с динамическим содержимым c высоты

Question

Я пытаюсь создать список разделов, содержащий элементы разной высоты, по какой-то причине я не знаю, что элементы мерцают. Внутри Предметов я создаю серию касаний, основанную на ответах сервера, и использую flex box, чтобы ограничить количество элементов в строке. Я подозреваю, что что-то в этом может быть источником ошибки, но я не могу понять, что это такое. Я что-то игнорирую в списках разделов, которые вызывают эту проблему?

Нажмите сюда, чтобы посмотреть видео, о котором я говорю

Это мой компонент экрана:

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { SectionList } from 'react-native';

import ScmHeader from '../../components/ScmHeader';
import ProgressLoader from '../../components/ProgressLoader';
import TimeTab from '../../components/TimeTab';
import ModalityCard from '../../components/ModalityCard';

import { Header, HeaderText } from './styles';
import GradientBackground from '../../styles/background';

import { alert } from '../../utils';
import request from '../../services/axiosRequest';

export default function EventOddsDetails({ navigation }) {
  const eventId = navigation.getParam('eventId');
  const [isLoading, setIsLoading] = useState(false);
  const [event, setEvent] = useState(null);
  const [currentPeriod, setCurrentPeriod] = useState('FT');

  const getEventById = () => {
    request({
      action: `evento/listarDetalhado`,
      params: {
        eventoId: eventId,
        aoVivo: false,
      },
      callbackFunction: response => {
        if (response.meta.status === 'success') {
          setEvent(response.data);
        } else {
          alert({ message: response.meta.message });
        }
      },
      loaderStateSetterFunction: setIsLoading,
    });
  };

  const getSectionListData = () => {
    const filteredPeriod = event.cotacao.find(
      timePeriod => timePeriod.tempo === currentPeriod
    );

    const data = filteredPeriod.modalidades.map(item => ({
      title: item.nomeModalidade,
      data: [
        {
          name: item.nomeModalidade,
          odds: item.cotacoes,
        },
      ],
    }));

    return data;
  };

  useEffect(getEventById, []);

  return (
    <>
      <ScmHeader title="Cotações" enableGoBackButton />
      <GradientBackground>
        {isLoading ? (
          <ProgressLoader />
        ) : (
          <>
            <TimeTab setPeriod={setCurrentPeriod} />
            {event && (
              <SectionList
                sections={getSectionListData()}
                keyExtractor={modality => modality.name}
                removeClippedSubviews
                renderItem={({ item: modality }) => {
                  return <ModalityCard modality={modality} />;
                }}
                renderSectionHeader={({ section: { title: modalityName } }) => (
                  <Header>
                    <HeaderText>{modalityName}</HeaderText>
                  </Header>
                )}
              />
            )}
          </>
        )}
      </GradientBackground>
    </>


EventOddsDetails.propTypes = {
  navigation: PropTypes.shape().isRequired,
};

EventOddsDetails.propTypes = {
  navigation: PropTypes.shape().isRequired,
};

Это компонент, который я передаю для renderItem.

import React from 'react';
import PropTypes from 'prop-types';

import {
  Card,
  OddWrapper,
  OddSelector,
  OddValueText,
  OddTypeText,
} from './styles';

export default function ModalityCard({ modality }) {
  return (
    <Card>
      <OddWrapper>
        {modality.odds.map((odd, index) => {
          const multipleRows = modality.odds.length > 3;
          const disabled = odd.valor <= 1;
          const finalOddText =
            odd.cabecalho !== null
              ? `${odd.cabecalho} ${odd.chave}`
              : odd.chave;

          return (
            <OddSelector
              key={`${index}${modality.name}${finalOddText}`}
              onPress={() => alert('Odd selector touched...')}
              disabled={disabled}
              multipleRows={multipleRows}
            >
              <OddValueText disabled={disabled}>
                {odd.valor.toFixed(2)}
              </OddValueText>
              <OddTypeText disabled={disabled}>{finalOddText}</OddTypeText>
            </OddSelector>
          );
        })}
      </OddWrapper>
    </Card>
  );
}

ModalityCard.propTypes = {
  modality: PropTypes.shape().isRequired,
};

И это стиль компоненты, которые я использую для компонента ModalityCard

import styled from 'styled-components/native';

import theme from '../../styles/theme';

export const Card = styled.View`
  justify-content: center;
  background-color: ${theme.accentColor};
  padding: 5px;
  border-radius: 2px;
  margin-top: 3px;
  border-radius: 2px;
`;

export const OddWrapper = styled.View`
  flex: 1;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid ${theme.primaryColor};
  border-radius: 2px;
`;

export const OddSelector = styled.TouchableOpacity`
  flex: 1;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-basis: 30%;
  padding: 5px;

  ${({ multipleRows }) => multipleRows && `max-width: 33%;`}
`;

export const OddTypeText = styled.Text`
  color: ${props => (props.disabled ? theme.secondarycolorDisabled : '#000')};
`;

export const OddValueText = styled.Text`
  color: ${props => (props.disabled ? theme.secondarycolorDisabled : '#000')};
  font-weight: bold;
  font-size: 15px;
`;