react-native-dw-carousel

A carousel container component.

Usage no npm install needed!

<script type="module">
  import reactNativeDwCarousel from 'https://cdn.skypack.dev/react-native-dw-carousel';
</script>

README

Carousel

Description

A carousel container component.

Props

Name Type Required Default value Description
Carousel.Page React.Node true - A component that will be rendered the pages Carousel
children React.Node false null A component that will be rendered inside the Carousel.Page.
initialPage Integer false 0 Set a initial page
hideIndicators Boolean false false Set to true to hide the indicators
indicatorColor String false #FFFFFF Active indicator color
indicatorSize Float false 30 Indicator bullet size
indicatorSpace Float false 15 Space between each indicator
inactiveIndicatorColor String false #DDDDDD Inactive indicator color
indicatorAtBottom Boolean false true Set to false to show the indicators at the top
indicatorOffset Float false 0 Indicator relative position from top or bottom
inactiveIndicatorText String false '•' Inactive indicator content ( You can customize to use any Unicode character )
indicatorText String false '•' Active indicator content ( You can customize to use any Unicode character )
animate Boolean false false Enable Carousel autoplay
delay Integer false 1000 Set Animation delay between slides
loop Boolean false false Allow infinite looped animation. Depends on Prop {...animate} set to true.
containerStyle TStyle false {} Style container - component Carousel
pageStyle TStyle false {} Style container - component Carousel.Page

Usage example

  import Carousel from 'react-native-dw-tooltip'
  ...

  render() {
    ...
    return (
      <Carousel
        indicatorColor="red"
      >
        <Carousel.Page>
          <View>
            <Text>Content 1 - Page 1</Text>
          </View>
          <View>
            <Text>Content 2 - Page 1</Text>
          </View>
        </Carousel.Page>
        <Carousel.Page>
          <View>
            <Text>Content 1 - Page 2</Text>
          </View>
          <View>
            <Text>Content 2 - Page 2</Text>
          </View>
        </Carousel.Page>
      </Carousel>
    )
  ...