Package to render a simple carousel with React Native. Works on Android and iOS.
example component for basic usage
example component for basic usage card layout
npm i --save @wecraftapps/react-native-simple-carousel
import { SimpleCarousel } from '@wecraftapps/react-native-simple-carousel';
...
const carouselRef = useRef(null);
...
return (
<SimpleCarousel ref={carouselRef}>
<View style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow'}}>
<Text>PAGE 0</Text>
</View>
<View style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center', backgroundColor: 'green'}}>
<Text>PAGE 1</Text>
</View>
</SimpleCarousel>
);| Prop | Type | Optionnal | Description | Default |
|---|---|---|---|---|
setIndex |
function | true | function to be called to update the current page index | null |
layout |
CAROUSEL_LAYOUTS |
true | string that indicates the type of layout the carousel will have (see the Types section for details) |
FULLSCREEN |
cardLayoutOptions |
CardLayoutOptions |
true | object describing the carousel layout using layout = 'CARD' (see the Types section for details) |
null |
scrollEnabled |
boolean | true | boolean that indicates if the carousel can be scrolled | true |
initialSlide |
number | true | initial slide index | 0 |
Following methods are available using a ref
| Name | Arguments | Description |
|---|---|---|
previousPage |
function to navigate to the previous slide if possible | |
nextPage |
function to navigate to the next slide if possible |
enum CAROUSEL_LAYOUTS {
FULLSCREEN = 'FULLSCREEN',
CARD = 'CARD',
}
interface CardLayoutOptions {
offset: number, // horizontal space to see the adjacent cards. Default is 40,
adjacentCardsScale: number, // scale of the adjacent cards. Default is 0.85,
adjacentCardsOpacity: number, // default is 0.5,
}
Special thanks to @chanonroy for tutorial : https://chanonroy.medium.com/building-a-netflix-style-card-carousel-in-react-native-649afcd8d78e