Android performance

App published to play store, functions worse than it does when running via Expo client.
Performance on both is very poor. I basically have a page which is rendering 5 images from s3 and upon clicking them it renders react-native Modal component with more images. Kinda like a basic instagram/snapchat stories.

Theres nothing crazy going on in the code, app seems to crash often when interacting with the modal, opening is very slow, sometimes crashes, closing also crashes.

I’m testing on a nexus 5, specs on nexus don’t seem too bad?

Processor 2.26GHz quad-core.
RAM 2GB.
Storage 16GB.

i guess its hard to give an opinion without seeing the code, this is the main feed page which renders very slow. This works perfect on iOS, simulator and iPhone 7 [works well on both, published app and expo client]

import React from 'react'
import {
  Text,
  View,
  ScrollView,
  Image,
  TouchableOpacity,
  ActivityIndicator,
  RefreshControl
} from 'react-native'
import TabBarIcon from '../components/TabBarIcon'
import { config, post } from '../config'

export default class Home extends React.Component {
  state = {
    feed: [],
    refreshing: false
  }

  async getFeed() {
    const { eventId } = this.props
    let postData = {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data'
        },
        body: JSON.stringify({
            eventid: eventId
        })
    }

    try {
      const res = await fetch(config.feedUrl, postData)
      const data = await res.json()

      return this.setState({
        feed: data.feed
      })
    } catch (err) {
      console.log('error reading feed', err)
    }
  }

  componentDidMount() {
    this.getFeed()
  }

  onRefresh = () => {
    this.setState({ refreshing: true })

    window.setTimeout(() => {
      this.getFeed()
      this.setState({ refreshing: false })
    }, 500)
  }

  render() {
    const { feed } = this.state
    const { setModal, focused } = this.props

    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>Whats the Story?</Text>
          <TouchableOpacity
            onPress={() => {
              setModal('settings')
            }}
          >
            <TabBarIcon
              size={30}
              focused={focused === 'settings'}
              name={`ios-settings${focused === 'settings' ? '' : '-outline'}`}
            />
          </TouchableOpacity>
        </View>

        <ScrollView
          horizontal={false}
          refreshControl={
            <RefreshControl
              tintColor={'#000'}
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh}
            />
          }
        >
          <View style={styles.feedWrapper}>
            {feed && feed.length > 0 ? (
              feed.map(item => {
                const itemId = item.split('/')[2]
                return (
                  <TouchableOpacity
                    key={item}
                    onPress={() => {
                      setModal('story', itemId)
                    }}
                  >
                    <Image
                      source={{
                        uri: config.imageUrl + '/' + item,
                        headers: {
                          cache: 'only-if-cached'
                        }
                      }}
                      style={styles.feedItem}
                    />
                  </TouchableOpacity>
                )
              })
            ) : (
              <ActivityIndicator
                size="large"
                color="#000"
                style={styles.loader}
              />
            )}
          </View>
        </ScrollView>
      </View>
    )
  }
}

I’m not 100% sure why it is so slow on your device but I can make some guesses.

  1. You have to remove all console.* lines in production because they are really bad for performance.
  2. Are you compressing those images? / How big are they?
  3. Can you shake your device, open the Perf Monitor and let me know the frames/ram usage?

Finally there are a lot of things that can cause bad performance. You can read this to learn all about React Native performance.

I have one more final question. Why are you using a Scrollview instead of a premade Flatlist? I think it is suitable in this situation, let me know if otherwise.

1 Like

Thank you for your response.

So turns out, it was the images. I have about 3-4 images but they were 300-400kb each. They were sized down to 100 via image width/height styles and had a border radius to make them circular.
Resizing the source image worked. But I also changed to FlatList. Reason i used ScrollView is because it was just quickly proving things out

Thanks for the help

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.