(Android) Images loading causes that app crashes

I’m using:

react-native: 0.39.0 npm: 4.0.2 node: 6.9.1

The problem is when I try to take a few pictures in a row, after fifth taken image the app crashes. I’m not getting any errors of warnings.

It crashes also if the camera is opened and if I wait for about 15-20 seconds with camera opened, without taking photo.

On newer, better phone (s8 galaxy) and newer android versions (7) it works as expected, but on this one it isn’t working. Thus, I suppose that it has something to do with memory issues. But I’m not sure.

I’ve added largeMemoryHeap to the manifest file.

In android studio I get log file as follows:

Thus, no errors, nothing. But the app doesn’t work.

The stuck of code where those photos are rendered is as follows:

<ScrollView removeClippedSubviews={true}>
      <StatusBar backgroundColor="blue" barStyle="light-content"/>
      <Zoom visible={this.state.zoomVisible} close={() => this.setState({zoomVisible: false})} image={this.state.zoomImage} imageIndex={this.state.zoomIndex} pictures={this.state.zoomPictures} remove={this.onRemoveImage.bind(this)} />
      <View style={{width: width, height: 1, backgroundColor: '#ddd'}} />
           <View style={styles.container}>
               {cards}
           </View>
 </ScrollView>

And one card is as follows, and I have a stuck of 10:

<TouchableHighlight onPress={this.props.onPress} style={styles.card} underlayColor={s.color}>
       <View style={styles.innerCard}>
             <View style={styles.innerImageContainer}>
                  <Image contain='contain' style={styles.innerImage} source={this.props.image}/>
              </View>
              <View style={[styles.innerTitle, {borderBottomWidth: 4, borderBottomColor: this.props.mandatory ? this.props.noImage ? s.paletteMandatory : s.success : '#fff'}]}>
                   <Text style={styles.textTitle} allowFontScaling={false} numberOfLines={1} ellipsizeMode={'tail'}>{this.props.title}</Text>
              </View>
        </View>
</TouchableHighlight>

I found here that I need to add removeClippedSubviews={true} to ScrollView, but it does not help.

On IOS it works just fine.

It looks something like:

When they click on one of the cards the camera is opened and after they take the photo, the get something like:

Thus, on IOS and on Android phones with more memory (Samsung S8) it works as expected.

[flynnch]

1. resizeMethod={‘resize’} http://facebook.github.io/react-native/docs/image.html 2.use Flatlist

[deehuey]

@flynnch You are a god amongst men. Thank you, we were displaying shop logos in a ScrollView and getting crashes the further you scrolled down. Now I can quintuple the list length without a single performance hit, all with adding resizeMethod="resize".

Dumb, but glad to have found the issue 😃