Issue displaying multiple video instances in flatlist - ios

Question

Im having some troubles displaying videos in a flatlist. It seems to be a specific iOS issue on real devices as it works fine in simulator and on android. Using react-native-video and in the error logs im getting AVFoundationErrorDomain with error code 11839. After searching a while it seems that the real devices have limits on how many video instances they can show at a time.
So I'm getting a black screen in the video component with greyed out controls with a crossed out play button. The structure is flatlist -> child -> Video. I’ve tried changing the order and moving the video component up a level but same issue. The flatlist will render items 10 at a time and can contain images or videos.
I’ve tried saving the key of the item that renders with onViewableItemsChanged prop and save it and a maximum of ten in redux.Then i fetch this array where the video component is rendered to only render the video component where the id of the item is same as in the array from redux. This should in theory only render items that are viewed or has been viewed recently.
Before this the videos wasn’t loaded at all now they are rendered for a while but after a couple has been rendered and played the issues is back. The actual component is alwayes rendered (if the keys/id has been saved and fetched to redux) but has a black screen
Anyone with another solution or input on my code to help me with this issues is greatly appreciated.
Reducer:
let feedIdsArr = [...state.savedFeedIds];
let newFeedId = action.payload;
if (feedIdsArr.length < 10) {
if (!feedIdsArr.includes(newFeedId)) {
feedIdsArr.push(newFeedId)
}
} else {
feedIdsArr.shift()
}
console.log("SAVE_FEED_ID", feedIdsArr);
return {...state, savedFeedIds: feedIdsArr};
Action:
return dispatch => {
dispatch({
type: SAVE_FEED_ID,
payload: id
});
}
}
Render:
if (this.props.savedFeedIds.includes(this.props.feed.feedItemId)) {
return (
<Video
source={{uri: url}}
style={this.calculateVideoAspectRatio(videoGallery, orientation)}
controls={true}
paused={true}
resizeMode={orientation === 'portrait' ? "cover" : null}
fullscreen={false}
ref={r => this.player = r}
onError={err => console.log("VIDEO ERROR", err)}
/>
)
}
onViewableItemsChanged:
onViewableItemsChanged = ({viewableItems}) => {
viewableItems.forEach(item => {
if (item.item.videoGallery) {
this.props.feedItemIds(item.key)
}
})
};