Enijar Enijar - 1 year ago 156
iOS Question

How to Handle Image Sequences in React Native

I currently have a basic 1 page React Native app for iOS (iPad 4) which shows the camera feed and overlays an image sequence. This image sequence consists of 149 frames and it loops continually.

I achieve the image sequence loop by replacing the source of the

component 24 times per second.

Here is the app class (without the style props).

class App extends Component {

constructor(props) {

this.state = {
frame: 1

componentDidMount() {
setInterval(() => {
let frame = this.state.frame;


if (frame > 149) {
frame = 1;

}, 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`}}/>


Which gives this as the output.

Image of the app.

The problem I am getting is that the app crashes after varying time lengths. Sometimes it can run for 3 seconds before crashing and sometimes it can run for 2 minutes before crashing.

I'm guessing this is a memory issue, but in the debugger in Xcode it was only using ~10% of the available memory. Is there a way to somehow only load the images I need into memory and remove the images I don't or is this managed automatically?

Answer Source

Try react-native-sprite, which animates an image sequence using native UIImageView instead of a javascript setInterval solution.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download