Изображение не отображается в Flatlist, но появляется при открытии модального окна

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

Сначала я получаю нужные мне данные из бэкэнда.

componentWillMount() {
    apiService.getAlarmList().then((res) => {
        console.info('NotificationHistory:componentWillMount:getAlarmList:res:', res);
        for (let i = 0; i < res.length; i++) {
            const thisHistory = res[i];
            thisHistory.image = null;
            thisHistory.idx = i;
            this.getItemImage(thisHistory.path, thisHistory.idx);
        }
        this.setState({ cameraHistory: res });
    });
}

this.state.cameraHistory теперь имеет массив со всеми необходимыми данными.

renderCameraHistory() {
    return (<FlatList
        data = {this.state.cameraHistory}
        renderItem = {({ item, index }) => {                        
            // console.info('NotificationHistory:renderCameraHistory:item:', item, index);
            // console.info('this is rendering the flat list', item.image);
            if (item.image !== null) {
                return (
                    this.renderSingleHistory(item, index)
                );
            }
        }}
        //Because we're using the indexes(which are ints) we need to convert them to strings first
        keyExtractor = {(item, index) => index.toString()}
        // keyExtractor = {(item) => item.path}
        //this needs unique keys, however the current array has multiple copies of the same item
        //item.key is supposed to work, but still 
        //extraData = {this.state.toggleRefresh}
    />);
}

содержит компонент плоского списка.

Затем каждое изображение визуализируется с помощью функции, представленной ниже. При щелчке по изображению открывается модальное окно и появляется увеличенная версия изображения, а также кнопка для закрытия модального окна и возврата к списку изображений.

renderSingleHistory(item) {
    const dateNTime = item['date-time'];
    const dateArr = dateNTime.split(' ');
    const dateOnly = dateArr[0];
    const timeOnly = dateArr[1];
    const logoPic = Config.images.homeIcon;
    const picForFlatList = item.image;

    return ( 
    <View style = {styles.cardView}>
        <View style = {styles.pictureView}>
            <TouchableOpacity
                onPress = {() => {
                    this.getBigPicture(item);
                }}
            >
                <View
                    style = {{
                        width: 100,
                        height: 100,
                    }}
                >
                    <Image
                        source = {{ uri: picForFlatList }}
                        style = {{
                            resizeMode: 'contain'
                        }}
                    />
                </View>
            </TouchableOpacity>
        </View>
        <View style = {styles.textView}>
            <View style = {styles.topTextView}>
                <Text>{item.serial}</Text>
            </View>
            <View style = {styles.bottomTextView}>
                <View style = {styles.bottomLeftTextView}>
                    <Text>{dateOnly}</Text>
                </View>
                <View style = {styles.bottomRightTextView}>
                    <Text>{timeOnly}</Text>
                </View>
            </View>
        </View>

    </View>
    );
}

Дополнительное примечание: если я использую статическое изображение в качестве источника, отображается плоский список статического изображения, ОДНАКО, когда я нажимаю на изображение, изображение, которое находится внутри массива, загружается в модальное окно (изображение, которое я хочу загрузить в списке).