add style props for flatlist

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,7 @@
+Hey! :wave: Thanks for taking the time to submit an issue, it's much appreciated! :raised_hands:
+
+Please make sure these boxes are checked before submitting your issue!
+
+- [ ] I ran `[envinfo](https://www.npmjs.com/package/envinfo)` and added results to issue (if bug related)
+- [ ] I created a reproduction example in [expo](https://snack.expo.io) (if bug related)
+

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,19 @@
+### What did you do:
+
+<!--- If not covered in the title or related issue -->
+
+### Does this relate to an open issue? If so which one?
+
+<!--- Add issue link here, can just do `#<issue_number>` -->
+
+### Screenshots:
+
+<!--- Add SCREENSHOTS/GIFS here if visuals needed -->
+
+### Checklist:
+
+<!--- Go over all the following points, before creating a PR -->
+
+- [ ] I added link to related issue if there is one
+- [ ] I added a screenshot/gif (if appropriate)
+- [ ] I ran `yarn lint` and `yarn flow`

README.md

@@ -6,10 +6,12 @@ A simple, cross-platform React Native swipeable carousel with sensible defaults
 ![demo2](./example-assets/spaced-tesla.gif)
 
 ## Why Another Carousel?
-Because I found all other options too heavy or not polished enough.
+Most solutions I found were very focused on mobile and adopt a paging pattern which limits what you can do on tablet and when you want the child to page when its smaller than the viewport.
+
+On top of that most solutions were either one-size-fits-all or not really polished.
 
 ## What Makes Your Solution So Special?
-Nothing. It's just a tiny simple carousel with a pretty flexible API. If you need more check out another solution, if you need less you might not need a carousel because this whole thing is ~150 lines. 😎
+Nothing. It's just a tiny simple carousel with a pretty flexible API. If you need more check out another solution, if you need less you might not need a carousel because this whole thing is ~200 lines. 😎
 
 ___
 
@@ -75,6 +77,12 @@ type CarouselProps = {
 
   // style for the FlatList element
   style?: Styles,
+
+  // style for the FlatList element
+  flatListStyle?: Styles,
+
+  // style for the FlatList element
+  contentContainerStyle?: Styles,
 
   // offset from start/end edges of carousel
   contentOffset?: number,
@@ -139,6 +147,8 @@ export default class SweetCarousel extends Component {
         renderItem={({ itemIndex, currentIndex, item, animatedValue }) => (
          <CustomComponent
             {...item}
+            index={itemIndex}
+            currentIndex={currentIndex}
             animatedValue={animatedValue}
           />
         )}

src/carousel.js

@@ -97,7 +97,15 @@ export default class SideSwipe extends Component<CarouselProps, State> {
   };
 
   render = () => {
-    const { style, data, contentOffset, extractKey, renderItem } = this.props;
+    const {
+      style,
+      flatListStyle,
+      contentContainerStyle,
+      data,
+      contentOffset,
+      extractKey,
+      renderItem,
+    } = this.props;
     const { currentIndex, scrollPosAnim, animatedValue } = this.state;
 
     const dataLength = data.length;
@@ -109,14 +117,17 @@ export default class SideSwipe extends Component<CarouselProps, State> {
       >
         <AnimatedFlatList
           horizontal
-          contentContainerStyle={{ paddingHorizontal: contentOffset }}
+          contentContainerStyle={[
+            { paddingHorizontal: contentOffset },
+            contentContainerStyle,
+          ]}
           data={data}
           getItemLayout={this.getItemLayout}
           keyExtractor={extractKey}
           ref={this.getRef}
           scrollEnabled={false}
           showsHorizontalScrollIndicator={false}
-          style={styles.flatList}
+          style={[styles.flatList, flatListStyle]}
           scrollEventThrottle={1}
           onScroll={Animated.event(
             [{ nativeEvent: { contentOffset: { x: scrollPosAnim } } }],

types/index.js

@@ -57,6 +57,8 @@ export type CarouselProps = CarouselDefaultProps & {
   data: Array<*>,
   index?: number,
   style?: Styles,
+  flatListStyle?: Styles,
+  contentContainerStyle?: Styles,
 };
 
 export type CarouselRenderProps = {