Next and previous buttons on carousel

[bnap00]

It would really come in handy if we can implement next and previous buttons on the carousel

[jitenderbadoni]

Make below changes in node_modules/react-native-carousel-view/src/carousel.js

     componentDidMount() {
        this._resetPager();
        this.props.onRef(this);  // add this line
     }

Add this method :

     componentWillMount(){
         this.props.onRef(undefined);
     }

Change below changes in your component:

Add this method:

          _onNext = () => {
               this.child._animateNextPage() // do stuff
             }

Change this with below code:

          <Carousel
                    height={600}
                    indicatorAtBottom={true}
                    indicatorSize={20}
                    animate={false}
                    onRef={ref => (this.child = ref)}
                    >
              <View style={styles.contentContainer}>
                      <Text>Page 1</Text>
                    </View>
              <View style={styles.contentContainer}>
                      <Text>Page 2</Text>
                    </View>
              <View style={styles.contentContainer}>
                      <Text>Page 3</Text>
                    </View>
       </Carousel>
      <Button onPress={this._onNext}>
                        <Text style={styles.nextText}>Next</Text>
          </Button>

It works with me.!

[mehrdadfeller]

can you please calrify where to add this part:

      _onNext = () => {
           this.child._animateNextPage() // do stuff
         }

I am getting the following error:

E/ReactNativeJS( 2848): TypeError: undefined is not a function (evaluating 'this.props.onRef(this)')

[mehrdadfeller]

okay my bad I did not see this line

onRef={ref => (this.child = ref)}

when creating the carousel.

[jitenderbadoni]

work well now.?

[Spoutnik97]

@jitenderbadoni you should do a pull request ! :)

[vince83110]

Is there any other way ? without editing the plugin code ?

[jitenderbadoni]

@vince83110 didn't see any option yet.!

[vince83110]

Ok, in last version, this works :

_onNext = () => {
    this._carousel._animateNextPage(); // do stuff
};

And :

<Carousel
    // ... config
    ref={ (c) => this._carousel = c }
>

[jitenderbadoni]

@chilijung please review the above code!