react-native-swiper + react-native-photo-view = App crash

[demoNoc]

react-native-swiper + react-native-photo-view = App crash

[lefoy]

You won't get much help by posting something like this.. describe what is happening. My app is working fine using react-native-swiper and react-native-photo-view.

[bemaverick]

@demoNoc I have the Same problem @lefoy Can you show your code, please ?

[lefoy]

There's a lot of things that could cause your app to crash and without any information it's hard to investigate. Anyways here's the code I use to render react-native-photo-view inside react-native-swiper.

<Swiper
  ref={swiper => {
    this.swiper = swiper;
  }}
  index={this.currentIndex}
  loop={false}
  showsPagination={false}
  scrollEnabled={true}
  onMomentumScrollEnd={this.onScrollEnd.bind(this)}
  style={this.fullwidth}
>
  {this.processedImages.map((item, i) => (
    <View key={i} style={styles.slide}>
      <PhotoView
        source={{ uri: this.getImageUrl(item) }}
        minimumZoomScale={1}
        maximumZoomScale={5}
        androidScaleType="fitCenter"
        style={[styles.imagePreview, this.fullwidth]}
        resizeMode={Platform.OS === "android" ? "" : "contain"}
      />
    </View>
  ))}
</Swiper>;

[bemaverick]

@lefoy i change androidScaleType="center" to "fitCenter" and add resizeMode={Platform.OS === "android" ? "" : "contain"} and everything works fine Thank you

[ashokkumar88]

@lefoy I am getting crash while scrolling next images. The below prop is required? onMomentumScrollEnd={this.onScrollEnd.bind(this)}

[lefoy]

@ashokkumar88 it is not required, I use it to keep track of the current displayed index.

onMomentumScrollEnd={(event, state) => this.setState({ currentIndex: state.index })}

[ashokkumar88]

ok thanks. I m using about 75+ images 1200px X 800px (~200kb each). Is this the reason of crash. I am getting outOfMemory error.

[lefoy]

@ashokkumar88 My gallery also can have a very large number of images. To prevent memory errors, I'm only displaying the previous and next image in the swiper. I don't really have the time to make an example, but here's what I'm doing;

Each elements in my swiper are wrapped inside a custom component with it's own state so I can control if the component should be displayed or not. In my parent component (the one I'm using to display the swiper component) I keep track of the current index and I pass that index to each custom images component. With that index, I can use a function in each images component to check if I should display it or not.

I hope my explanation is useful, english is not my primary language.

[ashokkumar88]

@lefoy I got it. I was loading all images at once. I will now load previous and next images.