chilijung / react-native-carousel-view Goto Github PK

View Code? Open in Web Editor NEW

73.0 73.0 45.0 1.03 MB

react-native carousel, support in both Android and iOS

JavaScript 96.33% Python 0.85% Java 0.65% Objective-C 2.17%

carousel react-native slider

react-native-carousel-view's People

Contributors

Stargazers

Watchers

Forkers

techymanik batmaster nedjotodic jitenderbadoni rigobertoalag spoutnik97 mssmaster babukrishna alizainkazmi robertprislupsky thepembeweb tsidkenu ahsanplusplus ims7inc narendraitservice linecode cat12079801 heinhtetzawycc miticous fxamauri glaubervictor jtjisgod diego-pascual 1awaleed nullmicgo ochui proserve felipenakao cargoify irontony banyucenter adiopris pmtc abhineetk47 berinberchmans pz3r cmtanko msftenhanceprovenance seemadevganiya seemareactnative

react-native-carousel-view's Issues

Carousel child content not visible in screen

I used the example on the page and the children is not in visible mode. Only the indicators are visible. I don't know why. Please suggest any idea if you guys have any.

The following is the code I used.

<View style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
 }}>
            <View style={styles.container}>
                <Carousel
                    width={375}
                    height={300}
                    animate={false}
                    >
                        <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>
            </View>
    </View>

And the following is the snapshot for the screen.

image center view

https://stackoverflow.com/questions/34952984/react-native-flexbox-how-to-do-percentages-columns-responsive-grid-et/34981772#34981772

How to stop autoplay of carousel?

I am using this library. And it is running good. But i want to stop autoplay of carousel.

<Carousel width={width(100)} height={height(50)} delay={6000} indicatorAtBottom={true} indicatorSize={15} indicatorText="o" indicatorColor="#3b5998" >
I tried delay={6000000} I mean i have inserted very long value but it gives me warning that timer will keep awake.

Any help?

android setTimeout not working. don't know why

facebook/react-native#9436 (comment)

height of carousel

i want the carousel not to have a height, as the items are filled it should keep growing, how to do that to the carousel. (no static height)
I think if u can set the default props to null, this should work as needed

TouchableOpacity is not working inside View of Carousel

OnPress of TouchableOpacity is not working in my case in attached file

Home.js.zip

Auto play carousel

Hi, I am trying to get eh carousel to autoplay but its not working. Here is what I have in my code

<View style={styles.container}>
                    <Carousel
                        width={320}
                        height={200}
                        delay={2000}
                        animate={true}
                        loop={true}
                        indicatorAtBottom={true}
                        indicatorSize={20}
                        indicatorText="✽"
                        indicatorColor="red"
                    >
                        {imageArray}
                    </Carousel>
                </View>

Not sure why its not animating. Can some one please help. thanks in advance

Error: You have to set children inside Carousel component

Hi, I need to dynamically render the carousel pages from the props that I receive from the parent component, but this error Error: You have to set children inside Carousel component gets thrown. Is there any way to dynamically render pages within this carousel?
Here is my code:

render() {
	return (
		this.props.pages.length > 0 && (
			<Carousel
				width={'100%'}
				height={'96%'}
				delay={3000}
				indicatorAtBottom={true}
				indicatorSize={20}
				indicatorText='✽'
				indicatorColor='red'
			>
				{this.props.pages.forEach(page => (
					<View style={styles.contentContainer}>
						// page content
					</View>
				))}
			</Carousel>
		)
	);
}

onPageChange not called when pressing indicator

i have some animation on each subscreen in carousel. how can i restart animation on a screen when hitting the indicator button to switch between screens.

Stickiness Factor

Is there anything that can be done to control the stickiness of the pages? It seems like I have to swipe an extremely specific amount to prevent the page from snapping back to the previously displayed.

Love the package so far!

Page Number in indicator

HI ,

react-native-carousel-view this package is really cool, its work awesome ,

here is my few query on page indicator

1.How to show page number in indicator
2.How to add a css class to carousel

Thanks
hemanth

android hanging when refresh.

using haul android hang everytime when rebuild, don't know why

Force Re-render Carousel

Hi,

First, thanks for this amazing plugin. I'm currently challenge by this issue. Is there any way to actively re-render the carousel? Inside my carousel, there are several components that changes values which updates there respective views. But every time I re-loop the new data. It only renders the updated data on the second instance.

Please help.

Thanks!

How to add dynamic url in image prop

images={[{
uri: 'https://avatars3.githubusercontent.com/u/7250217?v=4&s=200',
}, {
uri: 'https://avatars7.githubusercontent.com/u/1216029?v=4&s=460',
}, {
uri: 'https://via.placeholder.com/350x150',
}, {
uri: 'https://via.placeholder.com/100x200',
}]}

I can not add dynamic url in this library

flow remove types

https://flow.org/en/docs/install/

Auto Play Caraosel on IOS

in IOS if play auto it's like makeing show 4 images of 3 images with in number 4 image blank.
if u play scroll by finger or touch it's fine only 3 images cannot show blank image at number 4

<Carousel> causes exception on Android-Emulator

It works fine on my Android-Device, but causes a TypeError on my Emulator.

TypeError: Cannot read property 'length' of undefined

This error is located at:
    in Carousel (at StudentRating.js:198)
    in RCTView (at View.js:71)
    in View (at StudentRating.js:197)
    in RCTView (at View.js:71)
    in View (at KeyboardAvoidingView.js:199)
    in KeyboardAvoidingView (at StudentRating.js:262)
    in RCTView (at View.js:71)
    in View (at ScrollView.js:717)
    in RCTScrollView (at ScrollView.js:811)
    in ScrollView (at StudentRating.js:261)
    in RCTView (at View.js:71)
    in View (at StudentRating.js:259)
    in StudentRating (created by Connect(StudentRating))
    in Connect(StudentRating) (at requireAuth.js:29)
    in Authentication (created by Connect(Authentication))
    in Connect(Authentication) (at navigationStore.js:319)
    in Wrapped (at SceneView.js:31)
    in SceneView (at CardStack.js:412)
    in RCTView (at View.js:71)
    in View (at CardStack.js:411)
    in RCTView (at View.js:71)
    in View (at CardStack.js:410)
    in RCTView (at View.js:71)
    in View (at createAnimatedComponent.js:147)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:454)
    in RCTView (at View.js:71)
    in View (at CardStack.js:383)
    in RCTView (at View.js:71)
    in View (at CardStack.js:382)
    in CardStack (at CardStackTransitioner.js:97)
    in RCTView (at View.js:71)
    in View (at Transitioner.js:192)
    in Transitioner (at CardStackTransitioner.js:49)
    in CardStackTransitioner (at StackNavigator.js:60)
    in Unknown (at createNavigator.js:52)
    in Navigator (at createNavigationContainer.js:210)
    in NavigationContainer (at SceneView.js:31)
    in SceneView (at CardStack.js:412)
    in RCTView (at View.js:71)
    in View (at CardStack.js:411)
    in RCTView (at View.js:71)
    in View (at CardStack.js:410)
    in RCTView (at View.js:71)
    in View (at createAnimatedComponent.js:147)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:454)
    in RCTView (at View.js:71)
    in View (at CardStack.js:383)
    in RCTView (at View.js:71)
    in View (at CardStack.js:382)
    in CardStack (at CardStackTransitioner.js:97)
    in RCTView (at View.js:71)
    in View (at Transitioner.js:192)
    in Transitioner (at CardStackTransitioner.js:49)
    in CardStackTransitioner (at StackNavigator.js:60)
    in Unknown (at createNavigator.js:52)
    in Navigator (at createNavigationContainer.js:210)
    in NavigationContainer (at Router.js:70)
    in App (at Router.js:91)
    in Router (at Router.js:39)
    in ThemeProvider (at Router.js:38)
    in RouterComponent (at App.js:30)
    in Provider (at App.js:29)
    in App (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
Carousel._initPositionsAndInterpolators
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\smart-mixin\index.js:62:4
Carousel.proxiedMethod
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\react-proxy\modules\createPrototypeProxy.js:44:29
Carousel.componentDidMount
    
Carousel.proxiedComponentDidMount
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\react-proxy\modules\createPrototypeProxy.js:61:39
commitLifeCycles
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:8979:21
commitAllLifeCycles
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10214:8
Object._invokeGuardedCallback
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:134:9
invokeGuardedCallback
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:67:26
commitRoot
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:10327:8
completeRoot
    C:\Users\mkyil\IdeaProjects\Bemima_App\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:11502:35

remove babel

vertical carousel

deprecation warning for ViewPagerAndroid

rn -v @0.59.0
Problem:
viewpagerandroid has been extracted from react-native core and will be removed in a future release

Scnshot:

Possible fix:

Change ViewPagerAndroid component to ScrollView

How can I show the one more slider image at once?

I used this library for the slider image, but I can see only one image at once.
I would like to show the several image at once.
How can I do it?

Next and previous buttons on carousel

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

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.