CODEWITHSUNDEEP
androidreact-native
oleg.semen
oleg.semen

Reputation: 3061

react-native app lags on android

I wrote simple app on react-native. It consists of <ListView> that shows <Image> in rows. Images are fetched from the network. It runs on iOS very well. But on Android if stucks when image appears. FPS is 0.9-3.2; I used systrace tool to figure out what is going on. Here is a screenshot of it.

enter image description here

It looks like everything is done on UI thread.

Here is a render function of my class:

render() {
    return (
        <View style={styles.container}>
            <ListView
                style={styles.list}
                dataSource={this.state.dataSource}
                renderRow={this.renderRow.bind(this)}
                />
        </View>
    );
}

renderRow(rowData) {
    return <Image
      style={{ width: 320, height: 320 }}
      source={{uri: rowData.coverPhoto}} />
}

I have aa filling that I missed something. Can somebody help me figure out what exactly ? Thanks!

Upvotes: 1

Views: 1981

Answers (2)

Daniel Sukmana
Daniel Sukmana

Reputation: 41

I ran into the same problem recently and figured out what's causing this and how to solve it (at least for me). I know this is old, but I'll leave this here in case somebody needs it.

The Cause

For me it was the image from the net. Its resolution is huge (more than 3000x4000) while my <Image /> component was styled to be small (50x50 to be exact).

The Solution

There's a prop for <Image /> specifically for Android, which is resizeMethod (this is different from resizeMode). I used resizeMethod: resize and the app runs well on Android. Here's the documentation for more info.

Upvotes: 4

han4wluc
han4wluc

Reputation: 1189

Try change

 renderRow={this.renderRow.bind(this)}

to

renderRow={this.renderRow}

Upvotes: -2

Related Questions