Rendering ParallaxSwiperPage components in an other class (I'm new in React-Native)

[gabgagnon]

Hi, it's probably the wrong place to ask that, but I think many users will find it usefull. I would like to call another class for rendering ParallaxSwiperPage components, but I can't find a way to do with clean codes. Do you have any good suggestions?

Classic example:

class PrlxSwiper extends React.Component {
  render() {
      let prlxSwiperRef;
      return (
      <ParallaxSwiper
        ref ={(psref) => { prlxSwiperRef = psref; }}
      >
        <PageFrame/>
        <PageFrame/>
        <PageFrame/>
      </ParallaxSwiper>
      );
  }

class PageFrame extends React.Component{
  render() {
        <ParallaxSwiperPage
           BackgroundComponent={
            <ImageBackground source={{ uri: "" }} style={styles.backgroundImage}></ImageBackground>
           }
           ForegroundComponent={
            <View style={styles.foregroundContainer}> Hi. </View>
           }
        />
  }
}

For course, with this example, a warning saying "Failed prop type: Invalid component 'PageFrame' supplied to ParallaxSwiper, Use 'ParallaxSwipePage' instead" will pop-up.

I tried extends ParallaxSwiperPage, it just doesn't call the rendering function.

[zachgibson]

Hey @gabgagnon! Go ahead and use ParallaxSwiperPage. If you want to componentize further you can do so with BackgroundComponent and ForegroundComponent. Also you can map over data to have even less code.

e.g.

<ParallaxSwiper>
    {PAGES.map((page, index) => (
        <ParallaxSwiperPage
            BackgroundComponent={
                <MyCustomBackgroundComponent image={page.image} />
            }
            ForegroundComponent={
                <MyCustomForegroundComponent title={page.title} text={page.text} />
            }
        />
    ))}
</ParallaxSwiper>