National Pizza Magistrate

    react-native-image-slider-banner

    1.0.3 • Public • Published

    react-native-image-slider-banner

    npm npm


    Support 💰

    Mudassir Raza


    IOS DEMO

    IOS Demo

    ANDROID DEMO

    Android Demo

    Install

    1. First, install our library | use below npm script

      npm i react-native-image-slider-banner

      yarn add react-native-image-slider-banner

    Well-done.

    Usage :

    list of available props for customization SliderBox:

    Props Value Type Description
    data Array of image path(or url) as string Set array of images path- these paths can contain http url link or local images path using require('./pathOfImage')
    localImg Boolean default (false) its define whats type image urls you provide if its true it means you provide local images path
    showHeader Boolean default (false) if its true its shows a header on slider
    headerRightComponent React Component default (null) for displaying right component in header
    headerLeftComponent React Component default (null) for displaying left component in header
    headerCenterComponent React Component default (null) for displaying Center component in header
    headerStyle Style object default {} for change style of header
    previewImageContainerStyle Style object for change style of previewImageContainer
    previewImageStyle Style object for change style of previewImage
    caroselImageContainerStyle Style object for change style of caroselImageContainer
    caroselImageStyle Style object for change style of caroselImage
    autoPlay Boolean default (false) for auto scrolling
    timer Number default 2000 timeinterval for changing slider
    showIndicator Boolean default (true) for Showing indicator
    activeIndicatorStyle Style object for change style of activeIndicator
    inActiveIndicatorStyle Style object for change style of inActiveIndicator
    indicatorContainerStyle Style object for change style of indicatorContainer
    onItemChanged Callback ((itemData) => {},) when item changed its give item data in parameter
    onClick Callback ((item, index) => {},) when click on any item its give item data in parameter
    closeIconColor colorCode #000 Image Preview cross icon color
    blurRadius Number default (50) Image Preview Background Blur Radius
    preview Boolean default true when preivew is false so slider not show IMAGE PREVIEW and then onClick works

    1- add below import in your code :

    import { ImageSlider } from "react-native-image-slider-banner";

    2- Show Simple Slider with Image Preview option enable Example

    ImageCarousel

    <ImageSlider 
        data={[
            {img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'},
            {img: 'https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg'},
            {img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'}
        ]}
        autoPlay={false}
        onItemChanged={(item) => console.log("item", item)}
        closeIconColor="#fff"
    />

    3- Show Slider with Header and onClick Example

    ImageCarousel

    <ImageCarousel 
        data={[
            {img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'},
            {img: 'https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg'},
            {img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'}
        ]}
        showHeader
        preview={false}
        headerLeftComponent={<Icon name="arrow-back" color="#fff" size={34} onPress={() => Alert.alert("alert")} />}
        headerCenterComponent={<Text style={{ color: '#fff', fontSize: 24, fontWeight: 'bold' }}>Header</Text>}
        headerStyle={{ padding: 10, backgroundColor: 'rgba(0,0,0, 0.6)', }}
        onItemChanged={(item) => console.log("item", item)}
        caroselImageStyle={{ resizeMode: 'cover' }}
        onClick={(item, index) => { alert('hello' + index) }}
        />

    4- Show Slider with Header, Children and onClick Example

    ImageCarousel

     <ImageCarousel 
        data={[
            { img: require('../../assets/images/slider1.png') },
            { img: require('../../assets/images/slider2.png') },
            { img: require('../../assets/images/slider1.png') }
        ]}
        localImg
        showHeader
        preview={false}
        headerLeftComponent={<Icon name="arrow-back" color="#fff" size={34} onPress={() => Alert.alert("alert")} />}
        headerCenterComponent={<Text style={{ color: '#fff', fontSize: 24, fontWeight: 'bold' }}>Header</Text>}
        headerStyle={{ padding: 10, backgroundColor: 'rgba(0,0,0, 0.6)', }}
        onItemChanged={(item) => console.log("item", item)}
        caroselImageStyle={{ resizeMode: 'cover' }}
        onClick={(item, index) => { alert('hello' + index) }}
        >
                <View style={{alignItems: 'center'}}>
                    <Text style={{color: '#000', fontSize: 24, fontWeight: 'bold'}}>Title</Text>
                </View>
        </ImageCarousel>

    Contribute And Update the Library

    Please subscribe and contribute with me to develop this library

    License MIT

    Install

    npm i react-native-image-slider-banner

    DownloadsWeekly Downloads

    518

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    28.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • mudassirraza