Rendering from a list of data

[borgogelli]

When I use the map function to render the component (see the code below) I get the following error: Invariant Violation: input range must be monotonically non-decreasing

  return (
      <ParallaxSwiper
        speed={0.5}
        animatedValue={this.myCustomAnimatedValue}
        dividerWidth={8}
        dividerColor="black"
        backgroundColor="black"
        onMomentumScrollEnd={activePageIndex => console.log(activePageIndex)}
        showProgressBar={true}
        progressBarBackgroundColor="rgba(0,0,0,0.25)"
        progressBarValueBackgroundColor="white"
      >
      {this.props.images.map((image) => (
      <ParallaxSwiperPage key={image.id} 
                    BackgroundComponent={
                      <Image style={styles.backgroundImage}
                        source={{ uri: image.uri }}
                      />
                    }                     
                  />                 
          ))
      } 
      </ParallaxSwiper>
    );

[zachgibson]

If you make an Expo Snack I can take a look at it.

[nickmccomb]

@borgogelli you forgot to return the ParralaxSwiperPage items from the map function

[dhirajanand014]

When I use the map function to render the component (see the code below) I get the following error: Invariant Violation: input range must be monotonically non-decreasing

  return (
      <ParallaxSwiper
        speed={0.5}
        animatedValue={this.myCustomAnimatedValue}
        dividerWidth={8}
        dividerColor="black"
        backgroundColor="black"
        onMomentumScrollEnd={activePageIndex => console.log(activePageIndex)}
        showProgressBar={true}
        progressBarBackgroundColor="rgba(0,0,0,0.25)"
        progressBarValueBackgroundColor="white"
      >
      {this.props.images.map((image) => (
      <ParallaxSwiperPage key={image.id} 
                    BackgroundComponent={
                      <Image style={styles.backgroundImage}
                        source={{ uri: image.uri }}
                      />
                    }                     
                  />                 
          ))
      } 
      </ParallaxSwiper>
    );

Please remove showProgressBar={true}