How to show <Image /> in React Native in a good way

Question

I'm using react-native-camera library. But I'm not sure if the problem is the library or the react native self. The problem occurs only on Android

I'm using react native version 0.39 and the android version is 6.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 somewhere that i need to add removeClippedSubviews={true} to scroll view, but it does not help.

On IOS it works just fine.

I would be infinitely grateful if someone has an idea?