This is a custom image slider and carousel. Please reload the application to make it work more correctly when you make a change for this component. My build versions: 1- react-native-reanimated: 2.14.4

Installation

1  npm install react-native-image-slider-carousel

Doc

react-native-reanimated

Usage

1    import ImageCarousel from "react-native-image-slider-carousel";
2
3    const imageData = [
4        {
5            image: {
6            uri: "https://cdn.tommylife.com.tr/p-siyah-beyaz-bagcikli-yuksek-taban-suni-deri-erkek-spor-ayakkabi-89111-spor-ayakkabi-tommylife-t11er-89111-173162-32-O.jpg",
7            },
8            text: "Item 1",
9        },
10        {
11            image: {
12            uri: "https://st-vans.mncdn.com/mnresize/1500/1500/Content/media/ProductImg/original/637639363468969344.jpg",
13            },
14            text: "Item 2",
15        },
16        {
17            image: {
18            uri: "https://cdn.cimri.io/image/1000x1000/pumasmashvbuckerkeksporayakkabgri_208856385.jpg",
19            },
20            text: "Item 3",
21        },
22        {
23            image: require("your local image path"),
24            text: "Item 4",
25        },
26    ];
27
28    <ImageCarousel
29        data={imageData}
30        square={false}
31        autoChange={true}
32        changeDuration={4000}
33        loop={true}
34        fullWidth={false}
35        showIndex={false}
36        showDots={true}
37        bgColorContainer={"white"}
38        imageBorderRadius={20}
39        imageBorderWidth={0}
40        imageBorderColor={"black"}
41        indexContainMarginTop={0}
42        dotContainMarginTop={0}
43        dotColor={"#0081A6"}
44        dotWidth={10}
45        dotHeight={5}
46        dotBorderRadius={10}
47        onChange={(item, index) => {
48            console.log("******");
49            console.log("onChange : " + index);
50            console.log("onChange : " + item.text);
51        }}
52        onPress={(item, index) => {
53            console.log("******");
54            console.log("onPress : " + index);
55            console.log("onPress : " + item.text);
56        }}
57    />;

API

prop	type	description	default
data	List	Image Data.	"notFound.png"
square	Boolean	Image square.	false
autoChange	Boolean	Image auto change.	true
changeDuration	Number	Image auto change duration.	4000
loop	Boolean	Image loop.	true
fullWidth	Boolean	Image fullWidth.	false
showIndex	Boolean	Image index.	false
showDots	Boolean	Image dots.	true
bgColorContainer	String	Image container backgroundColor.	"white"
imageBorderRadius	Number	Image borderRadius.	20
imageBorderWidth	Number	Image borderWidth.	0
imageBorderColor	String	Image borderColor.	"black"
indexContainMarginTop	Number	Image index marginTop.	0
dotContainMarginTop	Number	Image dots marginTop.	0
dotColor	String	Image dots color.	"#0081A6"
dotWidth	Number	Image dots width.	10
dotHeight	Number	Image dots height.	5
dotBorderRadius	Number	Image dots borderRadius.	10