rnc

react-native-carousel-wrapper

This library is React Native wrapper of popular Native carousel library [iCarousel](https://github.com/PhilJay/MPAndroidChart) for ios and [CarouselLayoutManager](https://github.com/Azoft/CarouselLayoutManager), [Coverflow](https://github.com/crosswall/A

Showing:

Popularity

Downloads/wk

15

GitHub Stars

4

Maintenance

Last Commit

3yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.2KB

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-carousel-wrapper

This library is React Native wrapper of popular Native carousel library iCarousel for ios and CarouselLayoutManager, Coverflow for Android.

Android is coming soon.

Getting started

$ npm install react-native-carousel-wrapper --save

Mostly automatic installation

$ react-native link react-native-carousel-wrapper

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-carousel-wrapper and add RNCarouselWrapper.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNCarouselWrapper.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.reactlibrary.RNCarouselWrapperPackage; to the imports at the top of the file
  • Add new RNCarouselWrapperPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-carousel-wrapper'
    project(':react-native-carousel-wrapper').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-carousel-wrapper/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-carousel-wrapper')
    

Usage

Property Type

iCarousel supports the following built-in display types:

  • iCarouselTypeLinear
  • iCarouselTypeRotary
  • iCarouselTypeInvertedRotary
  • iCarouselTypeCylinder
  • iCarouselTypeInvertedCylinder
  • iCarouselTypeWheel
  • iCarouselTypeInvertedWheel
  • iCarouselTypeCoverFlow
  • iCarouselTypeCoverFlow2
  • iCarouselTypeTimeMachine
  • iCarouselTypeInvertedTimeMachine

example:

<RNCarouselWrapper type={RNCarouselWrapper.Type.iCarouselTypeRotary}>
</RNCarouselWrapper>  
import RNCarouselWrapper from 'react-native-carousel-wrapper';

// TODO: What to do with the module?

export default class App extends Component<{}> {
  render() {
    return (
      <RNCarouselWrapper style={styles.container}  type={RNCarouselWrapper.Type.iCarouselTypeRotary}>
        <View style={{width: 100, height: 100, backgroundColor: 'blue', margin: 5}}><Text>1</Text></View>
        <View style={{width: 100, height: 100, backgroundColor: 'blue', margin: 5}}><Text>2</Text></View>
        <View style={{width: 100, height: 100, backgroundColor: 'blue', margin: 5}}><Text>3</Text></View>
        <View style={{width: 100, height: 100, backgroundColor: 'blue', margin: 5}}><Text>4</Text></View>
        <View style={{width: 100, height: 100, backgroundColor: 'blue', margin: 5}}><Text>5</Text></View>
      </RNCarouselWrapper>
    );
  }
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100