VolkenoMakers / intro-slider

intro-slider

Add it to your project

• Using NPM npm install @volkenomakers/intro-slider
• or:
• Using Yarn yarn add @volkenomakers/intro-slider

Usage

import React from "react";
import { View } from "react-native";
import IntroSlider from "@volkenomakers/intro-slider";
import { Icon, Text } from "react-native-elements";
import { SafeAreaView } from "react-native";
const data = [
  {
    title: "Le lorem ipsum est, en imprimerie,",
    description:
      "Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, le texte définitif venant ",
    image: "https://via.placeholder.com/150",
  },
  {
    title: "Le lorem ipsum est, en imprimerie,",
    description:
      "Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée à titre provisoire pour calibrer une mise en page, le texte définitif venant ",
    image: "https://via.placeholder.com/150",
  },
  {
    title: () => (
      <Text style={{ fontSize: 18, fontWeight: "bold", marginVertical: 20 }}>
        Title with custom component
      </Text>
    ),
    description: () => (
      <Text>
        Le lorem ipsum est, en imprimerie, une suite de mots sans signification
        utilisée à titre provisoire pour calibrer une mise en page Le lorem
        ipsum est, en imprimerie, une suite de mots sans signification utilisée
        à titre provisoire pour calibrer une mise en page Le lorem ipsum est, en
        imprimerie, une suite de mots sans signification utilisée à titre
        provisoire pour calibrer une mise en page Le lorem ipsum est, en
        imprimerie, une suite de mots sans signification utilisée à titre
        provisoire pour calibrer une mise en page Le lorem ipsum est, en
        imprimerie, une suite de mots sans signification utilisée à titre
        provisoire pour calibrer une mise en page
      </Text>
    ),
    image: "https://via.placeholder.com/150",
  },
];
const IntroSliderApp = () => {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#000" }}>
      <IntroSlider
        data={data}
        onEnd={() => console.log("slider end")}
        titleStyle={{ fontSize: 40, color: "#0969da" }}
        indicatorColor="#0969da"
        descriptionStyle={{ fontSize: 16 }}
        containerStyle={{ backgroundColor: "#EEE", flex: 1 }}
        imageProps={{ resizeMode: "contain" }}
        renderEndButton={() => (
          <View
            style={{
              padding: 15,
              borderRadius: 35,
              overflow: "hidden",
              backgroundColor: "#000",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Icon
              name="arrow-right"
              type="material-community"
              color={"#FFF"}
              size={20}
            />
          </View>
        )}
        renderNextButton={(activeIndex) => (
          <View
            style={{
              padding: 15,
              borderRadius: 35,
              overflow: "hidden",
              backgroundColor: "#0969da",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Icon
              name="arrow-right"
              type="material-community"
              color={"#FFF"}
              size={20}
            />
          </View>
        )}
      />
    </SafeAreaView>
  );
};

export default IntroSliderApp;

Properties

Property name	Type	Description
data	Array	array of object with keys (title,descriptio, imge)
onEnd	Function	callback to be called when the user click to the end button
imageProps	Object	props for the image
descriptionStyle	Object	Custom style for the text description
titleStyle	Object	Custom style for the title
containerStyle	Object	Custom style for the View container
indicatorColor	String	color of the indicators
indicatorSize	Number	size of the indicators
renderNextButton	Function	render the next button
renderEndButton	String	render the end button

ISC Licensed