React-native-swiper: Swiper inside Animated.View doesn't load view until touch event

[wrannaman]

I have an Animated.View that hods the Swiper. The animated view does a simple height interpolation. The views in the slider don't load until there is a touch event on the Swiper. It works fine with a regular View. Any pointers on how to kill whatever is causing this behavior?

Thank you!

<Animated.View style={[styles.cityWrap, {height: this.state.up}]}>
    <Swiper style={styles.sliderWrapper}
          showsButtons={true}
          loop={true}
          height={250}
          autoplay={false}
          autoplayTimeout={0}
          >
          <View style={styles.slide1}>
            <Image source={{uri: this.props.city.path }} style={styles.backgroundImage}>
              <Text style={styles.cityName}> { this.props.city.name } </Text>
            </Image>
          </View>
          <View style={styles.slide2}>
            <Text style={styles.text}>Beautiful</Text>
          </View>
          <View style={styles.slide3}>
            <Text style={styles.text}>And simple</Text>
          </View>
    </Swiper>
</Animated.View>

https://drive.google.com/file/d/0BxPljASXfL4PX1E2NDBvQm1LX2c/view?usp=sharing

[yazgazan]

Did you try setting removeClippedSubviews to false ? This fixed it for me.

[rendomnet]

@yazgazan where to put removeClippedSubviews={false]?
My content of swiper only appear when I make slight changes in style of layot and "hot reloading" updates emulator.

[yazgazan]

@rendomnet removeClippedSubviews={false} need to be put in the Swiper component (it is set to true in the defaults: https://github.com/leecade/react-native-swiper/blob/master/src/index.js#L160).