V99Banner

Display a Carousel

II. Props

---

Name	Type	Default	Description
data	any[]	-	For simplicity, data is just a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.
renderItem	CarouselRenderItem<any>	-	Takes an item from data and renders it into the list. Typical usage: _renderItem = ({item}) => ( <TouchableOpacity onPress={() => this._onPress(item)}>( <Text>{item.title}</Text>( <TouchableOpacity/> ); Provides additional metadata like `index` if you need it.
autoplay	boolean	true	Set auto slide to next item
scrollDuration	number	2000	Set time of animation change item
sliderWidth	number	-	Set width of banner
sliderHeight	number	-	Set height of banner
loop	boolean	true	Set loop of banner

III. Import

import { V99Banner } from 'v99-kits'

Example

      <V99Banner
        data={[
          'https://raw.githubusercontent.com/mobile-yone/Assets/main/Image%20(1).png',
          'https://raw.githubusercontent.com/mobile-yone/Assets/main/Image%20(2).png',
          'https://raw.githubusercontent.com/mobile-yone/Assets/main/Image.png',
        ]}
        renderItem={renderPageItem}
      />

  const renderPageItem = ({ item, index }) => {
    const ratio = 343 / 158
    const sliderWidth = screenWidth - moderateScale(32)
    const sliderHeight = (screenWidth - moderateScale(32)) / ratio
    return (
      <V99Image
        width={sliderWidth}
        height={sliderHeight}
        source={{uri: item}}
      />
    )
  }

Demo

---