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

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

Во-первых, я получаю нужные мне данные из бэкенда.

componentWillMount() {
    apiService.getAlarmList().then((res) => {
        console.log('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.log('NotificationHistory:renderCameraHistory:item:', item, index);
            // console.log('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}
    />);
}

содержит компонент flatlist.

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

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>
    );
}

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