ios - How to Handle Image Sequences in React Native -

i have basic 1 page react native app ios (ipad 4) shows camera feed , overlays image sequence. image sequence consists of 149 frames , loops continually.

i achieve image sequence loop replacing source of image component 24 times per second.

here app class (without style props).

class app extends component {      constructor(props) {         super(props);          this.state = {             frame: 1         };     }      componentdidmount() {         setinterval(() => {             let frame = this.state.frame;              frame++;              if (frame > 149) {                 frame = 1;             }              this.setstate({frame});         }, 1000 / 24);     }      render() {         return (             <view style={styles.container}>                 <camera ref={(cam) => {this.camera = cam}}>                     <text>frame: {this.state.frame}</text>                     <image source={{uri: `./gifs/${this.state.frame}.gif`}}/>                 </camera>             </view>         );     }  } 

which gives output.

the problem getting app crashes after varying time lengths. can run 3 seconds before crashing , can run 2 minutes before crashing.

i'm guessing memory issue, in debugger in xcode using ~10% of available memory. there way somehow load images need memory , remove images don't or managed automatically?

try react-native-sprite, animates image sequence using native uiimageview instead of javascript setinterval solution.