nick / react-native-carousel Goto Github PK

Hi, the width doesn't change when I change the orientation of the device. Any way to get this working?

Hi, all i have some troubles with plugin.
Video preview for details: http://take.ms/NqnKe

In summary then you change orientation carousel does not change width/height.
We have this bug in a few projects.

I'm working on a standard for displaying version support on React-Native module README files. I would love your feedback: react-native-version-support-table

I have a problem with navigator and carousel. I have my initialRoute to be a component which is an carousel with two pages in it. Now whenever I start the app, the initial route loads up and it start to flip on continuously from first page to next and vice versa ? is this the problem of navigator or carousel ?

I want to use carousel for showing the welcome screens/tour. I want to dismiss the carousel when you swipe on the last element in carousel. Ideally i want to render a navigator element from there to bootstrap my app.

Is there an api to support this case? Happy to PR if you can provide ideas.

Should I use a constant width like 375 in the example or how can I adapt the width to the different device sizes?
In android flex:1 seems to work, but not in iOS.

The current peerDependencies entry for package.json reads:

"peerDependencies": {
    "react-native": ">=0.4 <1.0"
  }

With that dependency list I am currently unable to install react-native-carousel with react-native-vector-icons and react-native version 0.16.0, because of npm/npm#8854.
react-native-vector-icons declares in its package.json these peerDependencies:

"peerDependencies": {
    "react-native": ">=0.4.0 || 0.5.0-rc1 || 0.6.0-rc || 0.7.0-rc || 0.7.0-rc.2 || 0.8.0-rc || 0.8.0-rc.2 || 0.9.0-rc || 0.10.0-rc || 0.11.0-rc || 0.12.0-rc || 0.13.0-rc || 0.14.0-rc || 0.15.0-rc || 0.16.0-rc || 0.17.0-rc"
  },

The issue reported in npm/npm#8854 correctly complains about 0.16.0-rc not being matched by >=0.4 <1.0

I wonder: Is declaring peerDependencies list necessary at all?
What does the author of this package want to express with a dependency list that accepts all version of react-native since 0.4 including future versions up to 1.0?
Does that mean that 1.0.1 will not be supported any longer?
Even >=0.4.0 could be dropped if you are willing to assume that nobody uses react-native versions before 4/20/2015 any longer.

Thank you in advance.

EDIT: Seem to be working I have given styling for my enclosing container which turned out to look like that Sorry

I'm using the react-native 0.7.1 version and tried to use your carousel for one of our app in production.

I'm getting this error:

怎么改轮播图的高度啊

I put together http://reactnativemodules.com last night and added your module. It's a community run list of react native modules. Hopefully it will make finding projects like these easier. Am I missing any that you know of?

The carousel is broken in android.The swiping is not working properly in android.

onPageChange is triggered when we swipe to change the page, but not triggered when pressing on the indicator.

I did such as your example and throw an error :unable to resolve modules react-native-carousel

In android when I am in the last view react native component the android view shows the overScroll effect.
Is it possible to disable overScroll on android with react native or in the carousel component?
Does anyone have any solution to disable the over scroll effect ?

React Native of v.>0.46 requires more recent build of React v.16 which drops React.createClass support.

I'm on React 16 and react native 48.

Passing an initialPage but it doesn't seem to be working anymore.
Only occurring on IOS. Android seems fine.

I was able to do a workaround by wrapping the scrollToPage within a setTimeOut.

  if (Platform.OS === 'ios') {
     setTimeout(() => {
       this.carousel.refs.pager.scrollToPage(this.props.initialPage, false);
     }, 0);
   }

When specifying a custom width and pressing on an indicator, the scrollTo doesn't use the given width prop (I think instead using the width defined from Dimensions at the top of the file).

I think the quickest fix would be to just change this:

  indicatorPressed(activePage){
    this.setState({activePage});
    this.refs.scrollView.scrollTo(0, activePage * width);
  },

to this:

  indicatorPressed(activePage){
    this.setState({activePage});
    this.refs.scrollView.scrollTo(0, activePage * this.props.width);
  },

I'm happy to open a PR for it instead if wanted.

Does react-native-carousel has a load more functionality when the last item was reached?

It works with View, but not working with ScrollView

Platform: Android 6

Module does not work with react-native 0.28 the view is not orderned

How can I resolve this error? Help!!

As a requirement of my project, I want to stop the autoplay on user's gesture and manually stop autoplay. Can you help?

Heys!
I want to add a carousel in my app and this modules seems the be the best for it!
However, I want to have sneak peek of the previous and next card if there are any. Does this component allow it or not?
I found another component (react-native-carousel-control) but the possibilities, the controls are less interesting than react-native-carousel...

If it's doesn't have any way to get a sneak peek, it could be an interesting feature?

This is not an issue, a suggestion please add a current slide selector. Where we can set the current slide on initialization or later.

please add pic on readme

By any chance, does anyone know how to dynamically produce a set of components for the Carousel? For example, if I have an array of numbers and want to dynamically create the View components for them, how would that be done?

I'm not getting any love using "_.each"...

Example Code:

render: function() {
   return (
    <Carousel style={imgStyle}>
           { _.each([1, 2, 3, 4], function(num) {
              <View><Text>{num}</Text></View>
       })}
    </Carousel>
   );
}

I am gonna go to next page when click button in page.

Indicators can be positioned on either side of the view because only meeting documentation properties:
-indicatorAtBottom = {true} // Set to false to show the indicators at the top
-indicatorOffset = {250} // Indicator relative position from top or bottom

And what I want is a style property to change the properties of its container.

It's currently black... can I change the bg color w/out modifying the module?

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Get the above error when I import this module using require

import React, { Component } from 'react'
const config = require('../../../config')
import Icon from 'react-native-vector-icons'
import Mixpanel from 'react-native-mixpanel'
Mixpanel.sharedInstanceWithToken(config.mixpanel.token)

const Carousel = require('react-native-carousel')

import {
  View,
  Image,
  Text,
  TouchableOpacity,
  StyleSheet
} from 'react-native'

const Dimensions = require('Dimensions')
const windowSize = Dimensions.get('window')
const deviceWidth = windowSize.width
const deviceHeight = windowSize.height

export default class Onboarding extends Component {
  gotoApp() {
    this.props.navigator.push({
      id: 3,
      passProps: {
        loggedin: true,
        user: this.props.results
      }
    })
  }

  render() {
    return (
      <View style={styles.mainContainer}>
        <Carousel
          width={deviceWidth}
          indicatorOffset={20}
          animate={false}
          loop={false}
          indicatorColor="#ffffff"
          inactiveIndicatorColor="#5f6f81"
          indicatorAtBottom={true}>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Getting started is simple.'}</Text>
            <Image source={{uri: 'onboarding1_1x.png'}} style={styles.onboardImage} />
          </View>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Scan QR Code or enter table #.'}</Text>
            <Image source={{uri: 'onboarding2_1x.png'}} style={styles.onboardImage} />
          </View>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Interact with your Waiter.'}</Text>
            <Image source={{uri: 'onboarding3_1x.png'}} style={styles.onboardImage} />
          </View>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Review your experience.'}</Text>
            <Image source={{uri: 'onboarding4_3x.png'}} style={styles.onboardImage} />
          </View>
          <View style={styles.container}>
            <Text style={styles.titleText}>{'Thats It!'}</Text>
            <TouchableOpacity style={styles.onboardImage} onPress={() => this.gotoApp()}>
              <Icon
                name={'ion|ios-checkmark-outline'}
                size={50}
                color={'#ffffff'}
                style={{width: 50, height: 50, alignSelf:'center'}}
              />
            </TouchableOpacity>
          </View>
        </Carousel>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    width: deviceWidth,
    height: deviceHeight,
    justifyContent: 'center',
    backgroundColor: '#23292F'
  },
  container: {
    width: deviceWidth,
    height: deviceHeight,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
    flexDirection: 'column'
  },
  titleText: {
    color: '#fff',
    fontSize: 18,
    fontFamily: 'PTSans-CaptionBold'
  },
  onboardImage: {
    width: 0.9 * deviceWidth,
    height: 0.7 * deviceHeight,
    marginTop: 30,
    borderRadius: 10,
    justifyContent: 'center'
  }
})

Even

import Carousel from 'react-native-carousel' does not work.

Hello, thank you for this fantastic component.
I have a problem, when I change the slide swiping it to the right or to the left, the entire list its not centered anymore, what I am doing wrong?
When I press on the badges its changes perfect centered.

I'm trying to manipulate this Carousel so that it can scroll just left to right, so that users can't scroll backwards. However I'm having a problem in that the ScrollView doesn't start on my first passed View prop, the slider starts on the middle View it receives, so it seems. Are you able to make an option somewhere to allow one way transitions and so that it begins on the first View it receives. Would be great if you could!

I'm trying to load items dynamically from a redux store (which fetches from firebase. The initial Carousel will be empty until the data is received). My render methods look like this:

    _renderAd(ad){
      return (
        <TouchableHighlight onPress={() => this.onPress(ad.url, ad.title)}>
          <ResponsiveImage source={{uri: ad.image}} initWidth="415" initHeight="70"/>
        </TouchableHighlight>
      )
    }

    render() {
        return (
          <View style={{flexDirection: 'row', height: 54}}>
          <Carousel animate={true} delay={5000}>
            {this.props.ads.map( ad => this._renderAd.bind(this, ad))}
          </Carousel>
          </View>
        )
    }

When I do this using either map or listview I get a ton of errors saying:

Sticky header index 0 was outside the range {0, 0}

Not sure if it's related this this issue:
facebook/react-native#2173

Thanks for this library.

I think it would be a good idea to have a control over space between indicator.

no matter whatever value is set for delay, the delay time between slides does not change...

Nevermind! I swear I read docs, please close.

My ios app is normal. but in android, this component can't turn up. My RN version is 0.39.2

Hi ,

Is there any way to get current page selection with item details?

I am planning to open selected item on a model screen to view more details.

Regards
Hema

It is possible?

Add support to arrows - left and right - to help create slider controllers.

if am mapping and showing a list of the image it's working but when I add a new image to the list it gets added and show the increased count in indicator but the image is not showing only white space is shown in that place

please give a solution for this issue

Hi There,

I've noticed on Android my Carousel doesn't animate after the specified delay (works fine on iOS).

I've got the following props set:

        animate={true}
        delay={4000}
        loop={true}

This line gets called, but the timer never seems to come back. https://github.com/nick/react-native-carousel/blob/master/Carousel.js#L110.

Has anyone seen this before? Any potential fixes?

Thanks,

animate={false}, does not work. It automatically moves to the next slide on a click, and then when you click again, it transitions to the next slide even faster until it's moving between slides at 80mph.

this.refs.scrollView.scrollTo(0,activePage * width);

to
this.refs.scrollView.scrollTo({x:0,y:activePage * width,animated:true});

It's not possible to update the animate property after the initial render.

A use case for it is one wants to stop animate if the user changes the page manually.

The carousel needs to implement componentWillReceiveProps for that...

For the use case would be nice also to be able to distinguish between automatic page change and user page change.

Hi, I'm getting:

Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `ReactStrap`.
 stack: 
  instantiateReactComponent                          index.ios.bundle:8188
  Object.ReactChildReconciler.instantiateChildren    index.ios.bundle:22284
  ReactMultiChild.Mixin.mountChildren                index.ios.bundle:21993
  ReactNativeBaseComponent.Mixin.initializeChildren  index.ios.bundle:19306
  ReactNativeBaseComponent.Mixin.mountComponent      index.ios.bundle:19471
  Object.ReactReconciler.mountComponent              index.ios.bundle:6696
  ReactCompositeComponentMixin.mountComponent        index.ios.bundle:8494
  wrapper [as mountComponent]                        index.ios.bundle:5858
  Object.ReactReconciler.mountComponent              index.ios.bundle:6696
 URL: undefined
 line: undefined
 message: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `ReactStrap`.

when trying to use the carousel module,
any idea what's going on here?

I like this -- it works great. However, my use case is 20 fullscreen images. I think how it works is that all of the compressed JPG get uncompressed into memory when the app starts. So it takes a bit of time to start on an iPad Air 2 (I don't have an iPad 1st generation to compare). It works but I'm worried about running on older iPads.

I think my problem is outside of the core of what this project is aimed at but do you have any thoughts on it or not so much? I am thinking I need to implement my own carousel that just renders the current page, the next page and the prior page (so swiping is fast). Maybe it is current +2 on each side -- whatever tradeoff feels right. But that direction seems likely or going to direct native (I hesitate though -- my app isn't very complicated and I got it together about 95% in a day but I imagine that will translate into quite a bit more time on native).