react-native-ui-lib

{ "name": "Carousel", "category": "layout", "description": "Carousel for scrolling pages", "extends": [ "ScrollView" ], "extendsLink": [ "https://reactnative.dev/docs/scrollview" ], "modifiers": [], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CarouselScreen.tsx", "images": [ "https://user-images.githubusercontent.com/1780255/107120258-40b5bc80-6895-11eb-9596-8065d3a940ff.gif", "https://user-images.githubusercontent.com/1780255/107120257-3eebf900-6895-11eb-9800-402e9e0dc692.gif" ], "props": [ { "name": "initialPage", "type": "number", "description": "The initial page to start at", "default": "0" }, { "name": "pageWidth", "type": "number", "description": "The page width (all pages should have the same width). Does not work if passing 'loop' prop" }, { "name": "pageHeight", "type": "number", "description": "The page height (all pages should have the same height)." }, { "name": "itemSpacings", "type": "number", "description": "The spacing between the pages" }, { "name": "containerMarginHorizontal", "type": "number", "description": "Horizontal margin for the carousel container" }, { "name": "containerPaddingVertical", "type": "number", "description": "Vertical padding for the carousel container (Sometimes needed when there are overflows that are cut in Android)." }, { "name": "horizontal", "type": "boolean", "description": "Whether pages will be rendered horizontally or vertically", "default": "true" }, { "name": "loop", "type": "boolean", "description": "If true, will have infinite scroll (works only for horizontal carousel)" }, { "name": "onChangePage", "type": "(pageIndex, oldPageIndex, info) => void", "description": "Callback for page change event" }, { "name": "onScroll", "type": "function", "description": "Attach a callback for onScroll event of the internal ScrollView" }, { "name": "animated", "type": "boolean", "description": "Should the container be animated (send the animation style via containerStyle)" }, { "name": "containerStyle", "type": "ViewStyle", "description": "The carousel container style" }, { "name": "pageControlPosition", "type": "PageControlPosition", "description": "The position of the PageControl component ['over', 'under'], otherwise it won't display" }, { "name": "pageControlProps", "type": "PageControlProps", "description": "PageControl component props" }, { "name": "showCounter", "type": "boolean", "description": "Whether to show a page counter (will not work with 'pageWidth' prop)" }, { "name": "counterTextStyle", "type": "ViewStyle", "description": "The counter's text style" }, { "name": "pagingEnabled", "type": "boolean", "description": "Will block multiple pages scroll (will not work with 'pageWidth' prop)", "default": "true" }, { "name": "allowAccessibleLayout", "type": "boolean", "description": "Whether to layout Carousel for accessibility" }, { "name": "autoplay", "type": "boolean", "description": "Enable to switch automatically between the pages", "default": "false" }, { "name": "autoplayInterval", "type": "number", "description": "Time is ms to wait before switching to the next page (requires 'autoplay' to be enabled)", "default": "4000" }, { "name": "animatedScrollOffset", "type": "Animated.ValueXY", "description": "Pass to attach to ScrollView's Animated.event in order to animated elements base on Carousel scroll offset (pass new Animated.ValueXY())" } ], "snippet": [ "function Example(props) {", " const BACKGROUND_COLORS = [", " Colors.red50,", " Colors.yellow20,", " Colors.purple50,", " Colors.green50,", " Colors.cyan50,", " Colors.purple20,", " Colors.blue60,", " Colors.red10,", " Colors.green20,", " Colors.purple60", " ];", "", " const Page = ({children, style, ...others}) => {", " return (", " <View {...others} style={[{flex: 1, borderWidth: 1, borderRadius: 8}, style]}>", " {children}", " </View>", " );", " };", "", " return (", " <div>", " <View style={{width: 800}}>", " <Carousel", " autoplay", " // onChangePage={onChangePage}", " pageWidth={800 - Spacings.s5 * 2}", " itemSpacings={Spacings.s3}", " containerMarginHorizontal={Spacings.s2}", " initialPage={2}", " containerStyle={{height: 160}}", " pageControlPosition={Carousel.pageControlPositions.UNDER}", " // allowAccessibleLayout", " >", " {_.map([...Array(10)], (_item, index) => (", " <Page style={{backgroundColor: BACKGROUND_COLORS[index]}} key={index}>", " <Text margin-15>CARD {index}</Text>", " </Page>", " ))}", " </Carousel>", " </View>", " </div>", " );", "}" ], "docs": { "hero": { "title": "Carousel", "description": "The Carousel component allows users to navigate through a series of content in a linear way by swiping.", "type": "hero", "layout": "horizontal", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_preview.png" } ] }, "tabs": [ { "title": "Overview", "sections": [ { "type": "section", "title": "Usage", "description": "Carousels are useful when you want users to focus on one item at a time, especially with large content sets. They can hint at more content and save space by showing items without cluttering the layout.\nIt's best to arrange items so the most important ones appear first, making them easy for users to find.", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_usage.png" } ] }, { "type": "list", "items": [ { "title": "Cards", "description": "Card widths can adjust based on their content, keeping at least an S7-sized \"hint\" of the next or previous item visible.\nAll cards in a single carousel should have the same width, but widths can vary between carousels.", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_types_card.png" } ] }, { "title": "Gallery", "description": "Item Width: Full width.\nItem Height: Adjusts dynamically based on the content. \nSpacing: No spacing between items. \n\nCounter: a counter can be displayed to indicate the current slide number and the total number of slides. Upon swiping, the counter remains in place.", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_gallery.png" } ] }, { "title": "Custom Content", "description": "You can use the Carousel with custom content.The spacing between the items of the carousel can be customized.", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Carousel/carousel_overview_customContent.png" } ] } ], "layout": "horizontal", "title": "Content Types" } ] } ] } }