React Native Application crashing in iOS - reactjs

Question

Can anyone please help me to figure out this. I am using Flatlist and Inviewport dependencies for a video player integrated list view. I am facing memory issues but works fine in Android devices. It just crashing on iOS (in high end Android devices with RAM 6 Gig works perfectly)
Error logs
VideoPlayer.js
import React, {Component} from 'react';
import { View, StyleSheet, Dimensions, StatusBar } from 'react-native';
import { Video } from 'expo-av';
import InViewPort from 'react-native-inviewport';
export default class VideoPlayer extends React.Component {
pauseVideo = () => {
if(this.video) {
this.video.pauseAsync();
}
}
stopVideo = () => {
if(this.video) {
this.video.stopAsync();
}
}
playVideo = () => {
if(this.video) {
this.video.playAsync();
}
}
handlePlaying = (isVisible) => {
isVisible ? this.playVideo() : this.stopVideo();
}
render() {
//console.log(this.props);
return (
<View style={styles.container}>
<InViewPort onChange={this.handlePlaying}>
<Video
ref={ref => {this.video = ref}}
source={{ uri: 'https://dubaistack.com/beat/'+this.props.url }}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="contain"
isLooping={true}
shouldPlay
style={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height - StatusBar.currentHeight, backgroundColor: 'black' }}
/>
</InViewPort>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center'
}
});
ShortVideos.js
import React, {useState} from 'react';
import {
View ,
ScrollView,
StyleSheet ,
Text,
Dimensions,
FlatList,
StatusBar
} from 'react-native';
import VideoPlayer from '../components/VideoPlayer';
function Item(item) {
return (
<VideoPlayer url={item.item.location}/>
);
}
function ShortVideos(props) {
const [loading, setLoading] = useState(true);
const [data, setData] = useState([]);
fetch('https://dubaistack.com/beat/posts/get.php?lvid')
.then((response) => response.json())
.then((responseJson) => {
//console.log(responseJson);
setLoading(false);
setData(responseJson);
})
if(loading){
return(
<Text style={{color:'red'}}>Loading</Text>
);
}else{
return(
<FlatList
data={data}
renderItem={({item}) => <Item item={item} /> }
keyExtractor={item => item.id}
pagingEnabled
/>
);
}
}
const styles = StyleSheet.create({
item: {
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
backgroundColor: '#336699',
justifyContent: 'center',
alignItems: 'center'
},
title: {
fontSize: 32,
color: 'white',
},
})
export default ShortVideos;

Answer 1

To remove - this warning you need to use componentWillUnmount like this below and rebuild: -
class Home extends Component {
_isMounted = false;
constructor(props) {
super(props);
}
componentDidMount() {
this._isMounted = true;
-----
}
componentWillUnmount() {
this._isMounted = false;
}
render() {
...
}
}