Enijar Enijar - 4 months ago 39
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

Image
component 24 times per second.

Here is the app class (without the 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 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

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

Comments