When passing from the portrait mode to the landscape mode the view doesn't resize the fetch the new screen size.

When you are within a scollable tab component on Android, the whole page is changed rather than the carousel object.

https://github.com/appintheair/react-native-looped-carousel/blame/master/README.md#L36

https://www.dropbox.com/s/hfby4auhtv130rt/Screenshot%202015-04-03%2013.06.44.png?dl=0

When I put several images inside a slider, I got a weird graphical behavior (see gif). Have you an idea on how avoid that?

 const pagesData = [
    {
      img: require('../../img/svg/vector_409_06.svg'),
      text: language('homeSlideOne'),
      left: true
    },
    {
      img: require('../../img/svg/vector_417_01.svg'),
      text: language('homeSlideTwo'),
      left: false
    },
    {
      img: require('../../img/svg/vector_409_13.svg'),
      text: language('homeSlideThree'),
      left: true
    },
    {
      img: require('../../img/svg/vector_410_16.svg'),
      text: language('homeSlideFour'),
      left: false
    }
  ];

  const pages = [];

  pagesData.map((element, index) => {
    pages.push(
      <SliderPage
        key={'Slide' + index}
        img={element.img}
        text={element.text}
        left={element.left}
      />
    )
  });
 return (
    <View style={{flex: 1}}>
        <Carousel style={{flex: 1}} bullets={true} autoplay={false}>
          {pages}
        </Carousel>
</View>

Hi, have configured the carousel to have a width and height not equal to the screen size however, I can seem to drag the contents vertically. Is there a way to disable this?

I tried playing around the Scrollview props without any luck.

This is probably related to RN bug facebook/react-native#2127

G

Hi,

iOS works as expected, but Android has some issues. The loop doesn't work. Using 3 images it shows:
First pass: 1-2-3
Second Pass: 1-2-Stops

Also when I swipe the image to the right or to left, the next image doesn't move automatically to fit the screen. The transition stays in between the image before and the next one.

Trying to run the example in readme as-is without any modification.
RN 43, Windows, Android

Am I missing something?

Great control!

Is it possible to style the bullets (eg: color)?

What is the difference between the two as well as styling the component itself?

I want to specify the initial view to display when rendering the carousel.

Thanks!

Bullets looks good (circle) in iOS simulator, but in real device it looks like raindrop (iPhone SE iOS 10)

That'd be nice to disallow the swipe gesture to advance pages and rely on an explicit API to programmatically go to the next page.
This would make it possible to use this component for first time user experiences where you have to click on 'Next' buttons to advance in the tutorial.

On page load autoplay does not begin, however if i manually scroll 1 slide, it does autoplay after the expected delay.

I am using Readme example. Something with children length?

I am having issues loading my app with the code from master branch. The app shows an error "undefined is not an object (evaulating '_react2.default.propTypes.oneOfType')". I need the latest code as one of the issues I was having is fixed in the latest commit. Please let me know how soon this can be fixed.

Thanks!

It seems like when using the library on android, the currentPage property is not properly respected. Regardless of what you set for current page, it always goes to the first page. Moreover, it's not position childrenLength * width, but just 0, which means you have to page 2 pages over before you can scroll backwards.

This seems to be due to facebook/react-native#6849

Workaround seems to be putting _onLayout()'s call of _placeCritical() behind a setTimeout() callback, so that the scrollView.scrollTo() happens after the pages have been rendered.

RN 0.43, looped-carousel 0.1.5

Can You please look into it.

Thanks in advance

I'd guess a pretty common use case for carousel is something like the native iOS photo gallery. A carousel with zoomable images.

I understand that zooming might be out of scope of this project, but it would be nice to be able to put some zoomable images from a 3rd party library into carousel views. E.g. react-native-photo-view.

The problem is, that the Carousel catches majority of multitouch events happening over it and they don't propagate to the PhotoView under it.

Would it be feasible to make it possible for the children to be able to listen to gesture events without glitches?

Maybe I'm missing Is there a particular reason to use Dimensions size via internal state, can you just use flex: 1 in the main container?

IMO this will be a much cleaner code and maybe even faster.

When I click my TouchableOpacity Component, I push a viewController. Then the content in the Carousel have some distance away from the Carousel's top when I pop back to.
And I can drag the content down.
It seems that Vertical Bounce changed to true.

Hello I am rendering a lot slides so I prefer to do a lazy on each swipe call. ¿How could it be posible?

Is there a method for changing dynamically the current page ?
I tried with the currentPage props, but it only changes the initial page .

Thanks for this library !

here is my code:

let images = []
......some dynamic images operation
<Carousel
style={{width: WIN_WIDTH, height: WIN_HEIGHT, backgroundColor: 'rgba(0, 0, 0, 0.6)'}}
currentPage={this.state.selectIndex}
autoplay={false}
pageInfo={true}
pageInfoBackgroundColor='rgba(0,0,0,0.8)'
pageInfoTextStyle={{color: '#FFFFFF'}}
onAnimateNextPage={(p) => {
this.state.selectIndex = p
}}
>
{images}
< /Carousel>

the images array will add or reduce,when only has one element,the carousel crash

please help me out,thanks a lot

error stacks:
React.Children only expected to receive a sing React element child

Last changes are not release to npm :/

I want to get current <View /> child inside Carousel when it's looping,
is there any callback could help me?

thanks for your time.

After adding the carousel component in react-native 0.4.4, the view shows a blank screen.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Component,
  NavigatorIOS,
  View,
  TouchableHighlight,
  TextInput,
} = React;

var SideMenu = require('react-native-side-menu');

var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
  },

  render: function() {
    return (
      <View>
        <Text>Menu</Text>
        <Text onPress={this.about}>About</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  searchView: {
    flexDirection: 'row',
    padding: 25,
    marginTop: 100,
  },
  text: {
    color: 'black',
    backgroundColor: 'white',
    fontSize: 30,
    margin: 80
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  flowRight: {
    flexDirection: 'column',
    padding: 25,
    alignItems: 'center',
    alignSelf: 'stretch',
    marginTop: 100,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#009D6E',
    borderColor: '#008C5D',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
});

class Search extends Component {
  render() {
    return (
      <View style={styles.searchView}>
      <TextInput
        style={{ flex: 2, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
        onChangeText={(text) => this.setState({input: text})}
        placeholder="Search Appointment" />
      <TextInput
        style={{ flex: 1, height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 5}}
        onChangeText={(text) => this.setState({input: text})}
        placeholder="Location" />
      </View>
    );
  }
}

class Welcome extends React.Component {
  onExplorePressed() {
    this.props.navigator.push({
      title: 'Explore',
      component: Search,
    });
  }

  render() {
    return (
      <View style={styles.flowRight}>

        <Text style={styles.welcome}>
          Welcome to Docit!
        </Text>

        <TouchableHighlight style={styles.button} underlayColor='#009D3E'>
          <Text style={styles.buttonText}>Sign In with Facebook</Text>
        </TouchableHighlight>

        <TouchableHighlight style={styles.button} underlayColor='#009D3E'>
          <Text style={styles.buttonText}>Sign In with Email</Text>
        </TouchableHighlight>

        <Text style={styles.welcome}>OR</Text>

        <TouchableHighlight
          onPress={this.onExplorePressed.bind(this)}
          style={styles.button}
          underlayColor='#009D3E'>
          <Text style={styles.buttonText}>Explore Something</Text>
        </TouchableHighlight>

      </View>
    );
  }
}


class ContentView extends Component {
  render() {
    return (
      <NavigatorIOS
        style={styles.container}
        initialRoute={{
          component: Welcome,
          title: 'Welcome',
        }}/>
    )
  }
}

var Docit = React.createClass({
  render: function() {
    var menu = <Menu navigator={navigator}/>;

    return (
        <SideMenu menu={menu}>
          <ContentView/>
        </SideMenu>
      );
  }
});

AppRegistry.registerComponent('Something', () => Something);

This is my code before adding the carousel component. This also shows a blank screen if carousel component is installed in node_modules/ . I removed the require from index.ios.js, even then for some reason, the screen was blank. When I removed from node_modules, it started working again.

I don't know what issue is this, Is it because of some global variable ?
We have a need of carousel component and would appreciate if someone could look into it.

I'm also using react-native-side-menu component, it might be that it is conflicting with that ?

Could you update deps if it works for that version and release 0.0.11 with <0.25? Thanks.

I saw this line and I wonder what this property does since it's not documented in the react native docs.

Your component is very nice! Thank You!
Could you provide this with method setPage: actually I do it with
this.сarousel._setCurrentPage(cardNum);
this.сarousel._placeCritical(cardNum);

Also it would be nice to have isLooped prop :)

I am using react-native-looped-carousel with @exponent/ex-navigation and when I push a new route (view) to the NavigationStack where a looped-carousel need to render I find it pretty slow with multiple (4-8+)highres images. The transition/ animation to the new Route (View/Screen) is dropping frames/ slow with the carousel, but without it is smooth again. I also made an issue on the @exponent/ex-navigation repo page #224

I know that debugging is slow on iOS and Android with @exponent/ex-navigation. But I also tested the release version of the app. And my conclusion is the same as my expectations where.

So my question is: does the carousel renders the images all as once, or does it only renders the current image, and throws the other images in the list away?

And if it renders all the images at once, than I think that has to change because of performance.

Thanks in advance.

I don't want it to autoplay at all. I want to manually swipe all the time

I have updated my app to the latest version of react native (0.7.1) and the carousel stopped working. I'm getting the red screen with the following error:

'Error: \n stack: \n  
<unknown>  index.ios.bundle:22949\n 
 require    index.ios.bundle:254\n 
 <unknown>  index.ios.bundle:22003\n  
require    index.ios.bundle:254\n 
 <unknown>  index.ios.bundle:1480\n  
require    index.ios.bundle:254\n  
<unknown>  index.ios.bundle:1438\n  
require    index.ios.bundle:254\n  
require    index.ios.bundle:200\n 
URL: http://localhost:8081/index.ios.bundle\n line: 22949\n 
message: undefined is not an object (evaluating \'RCTScrollViewConsts.KeyboardDismissMode.None\')'

Any thoughts?

The style property for arrowsStyle is actually arrowstyle... see line 36 of index.js

Has this component has been abandoned? I see there are many old pending pull-reqs. I've forked and added stuff but won't bother with submitting a PR if there's no one maintaining it.

Thank you for sharing this.

When I tried to implement this dynamically I got problem.

This is the component ( Within the modal )-
{ DynamicContent }

The popup is looks fine with the dynamic content. But it can't able to load the currentPage. And I need only the Carousel not loop. So if it is possible please add option to stop the loop. It will be better.

In order to avoid warnings when using your (great) package in rn 0.25+, you need to change your imports to:

import React from 'react';

import {
  StyleSheet,
  Text,
  ScrollView,
  View
} from 'react-native';

Thanks

HI,

According to package.json this repo is not compatible with RN 0.24 or this is just a typo (missing <=)?

"peerDependencies": {
"react-native": ">=0.16.0 <0.24"
},

npm WARN [email protected] requires a peer of react-native@>=0.16.0 <0.24 but none was installed.

This is my code
render()
{
return(


{this.renderImg()}


);
}

renderImg(){
var imageViews=[];
for(var i=0;i<this.state.adList.length;i++){
imageViews.push(
<Image
key={i}
style={{height: this.state.pHeight,
resizeMode: 'stretch',
width:common.screenWidth}}
source={{uri:this.state.adList[i]}}
/>
);
}
return imageViews;
}

so ,the question is "React.Children.only expected to receive a single React element child"

When I change the autoplay property from outside the component

<Carousel
     autoplay={!this.state.modalVisible}
....

then this does not change the autoplay state in the component.

I can do a PR but the change is pretty straight forward:

This is because the componentWillUpdateProps call needs to consider the autoplay and delay properties and start and stop the timer appropriately

  componentWillReceiveProps(nextProps) {
    let childrenLength = 0;
    if (nextProps.children) {
      childrenLength = nextProps.children.length ? nextProps.children.length : 1;
    }
    this.setState({ childrenLength });

    // START update autoplay or delay if changed

    if (nextProps.autoplay !== this.props.autoplay || nextProps.delay !== this.props.delay) {
        if (childrenLength && nextProps.autoplay && nextProps.delay > 0) {
            this.timer = setTimeout(this._animateNextPage, nextProps.delay);
        } else {
            clearTimeout(this.timer);
        }
    }

    // END
  }

❯ npm i react-native-looped-carousel -S
npm WARN peerDependencies The peer dependency react-native@^0.13.0 included from react-native-looped-carousel will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/iojs" "/usr/local/bin/npm" "i" "react-native-looped-carousel" "-S"
npm ERR! node v4.2.1
npm ERR! npm  v2.14.7
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react-native@^0.13.0

Is react-native-looped-carousel supported for 0.14.x ?

The carousel is slow

Hi, really nice work on this Carousel!

I was wondering if you could provide the source of the example displayed in the README.
You have the fullscreen carousel + static elements that don't move when you swipe.
React-native beginners like me will have a better understanding of how it works with it.

Thank you.

I have a 4 page carousel.
Sometimes, not always, on Android, when I try going forward, I get stuck after the 2nd page. only when I go back one step, and then forward again, I can go more step forward.
Also I get weird inconsistent jumps with the animation.

Here's how it looks:

my code:

<Carousel
                    style={carouselStyle.carousel}
                    chosenBulletStyle={carouselStyle.chosenBullet}
                    bulletStyle={carouselStyle.bullet}
                    autoplay={false}
                    bullets={true}
                    pageInfo={false}
                    onAnimateNextPage={(p) => this.pageChange(p)}
                >
                    <FCarouselItem title={strings.tutorial.content[0].title} text={strings.tutorial.content[0].text} image={icons.logo_with_text}/>
                    <FCarouselItem style={{backgroundColor:FetchyColors.primaryColorAlpha}} title={strings.tutorial.content[1].title} text={strings.tutorial.content[1].text} image={icons.tutorial_fab_screen}/>
                    <FCarouselItem style={{backgroundColor:FetchyColors.primaryColorAlpha}} title={strings.tutorial.content[2].title} text={strings.tutorial.content[2].text} image={icons.delivery_add_screen}/>
                    <FCarouselItem style={{backgroundColor:FetchyColors.primaryColorAlpha}} title={strings.tutorial.content[3].title} text={strings.tutorial.content[3].text} image={icons.trip_add_screen}/>
                </Carousel>

this.pageChange(p) changes the bottom text with setState for the parent component, but even without this - the bug still occurs

When I finished rendering the component , I just watch the memory usage and just do nothing.The memory usage is inscreasing second by second . Then after about 3 minutes , the memory usage is above 200M ! Is that a bug for this component , or not ? Thanks for your answer.

The component yields an this.updater.enqueueCallback is not a function error, as react 16.0.0-alpha6 removes the callback functionality from setState.

There is a problem with manual navigation via the bullets. Going forward is working as expected, but there are some problems with going backward. You can see this in the example app, just add bullets={true} prop to the Carousel. For example - when you go from the third screen to the second, the first one is visible for a brief moment during the transition.
Also, clicking on the active bullet triggers the animation, but that should be easy to fix (return if clicked button is active or something like this).

I'm wondering where you found this prop?