react-native-image-carousel-slider

This package is made to make it easier for you to display the image sliders


License
ISC
Install
npm install react-native-image-carousel-slider@1.1.4

Documentation

👨‍💻 react-native-image-carousel-slider

Node.js




https://www.npmjs.com/package/react-native-image-carousel-slider

BUILD SETUP

## Installation
Version 1.1.4

npm install react-native-image-carousel-slider --save


USAGE

import CarouselDisplay from react-native-image-carousel-slider
const image = ['https://www.bradykesner.com/wp-content/uploads/2016/11/clingmans-dome-sunset-smoky-mountain-national-park-1030x687.jpg',
'https://www.nps.gov/blri/learn/nature/images/Bear-Trap-Gap-MP-428-robert-Stevens-web.jpg?maxwidth=1200&maxheight=1200&autorotate=false',
'https://static.rootsrated.com/image/upload/s--U0wjV1dP--/t_rr_large_traditional/kzw1j2a9jcad36x6ytof.jpg'
]
class App extends Component {
    state={
        active:0
    }
     handleMovements = ({nativeEvent}) => {
    const slide = Math.ceil(
      nativeEvent.contentOffset.x / nativeEvent.layoutMeasurement.width,
    );
    if (slide !== this.state.active) {
      this.setState({
        active: slide,
      });
    }
  };
    render(){
        return(
            <CarouselDisplay 
            screen={'DisplayFullImages'} 
          fixedData={image}
          screenNavigation={this.props.navigation}
          active={this.state.active}
          handleMovements={this.handleMovements}
        />

       
        )
    }
}

Girl in a jacket

Current API(Property)

Property Type Description
screen PropTypes.string (optional)Screen Navigation and will passing property 'detailImage' as array
fixedData PropTypes.array (required) Array Of Image
screenNavigation PropTypes.function (optional) navigation function
active PropTypes.number display active image that choosed
handleMovements PropTypes.object Native Event

Project Documentation

  • Author Account
Arwy Syahputra Siregar
github.com/arwysyah

Copyright ©

by Arwy Syahputra Siregar