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>
)
}
}