React-native-dw-carousel NPM

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>
    )
  ...

Carousel react-native react

react react-native react-native-Carousel

@everything-registry/sub-chunk-2577 @infinitebrahmanuniverse/nolb-react-native-d

0.0.1

5 years ago