Fix for Carousel defaults and example screen (#622)

Author: Inbal-Tish

demo/src/screens/componentScreens/CarouselScreen.js

@@ -1,11 +1,11 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Constants, View, Text, Carousel, Image, Card} from 'react-native-ui-lib'; // eslint-disable-line
-import _ from 'lodash';
+import {Constants, Spacings, View, Text, Carousel, Image} from 'react-native-ui-lib'; // eslint-disable-line
 
-const INITIAL_PAGE = 2;
-const WIDTH = Constants.screenWidth - 120;
 
+const INITIAL_PAGE = 2;
+const WIDTH = Constants.screenWidth - (Spacings.s5 * 2);
 const IMAGES = [
   'https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
   'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
@@ -29,16 +29,15 @@ class CarouselScreen extends Component {
   render() {
     return (
       <ScrollView>
-        <Text text30 margin-20>
-          Carousel
-        </Text>
+        <Text text30 margin-20>Carousel</Text>
+
         <Carousel
           migrate
           ref={r => (this.carousel = r)}
           // loop
           onChangePage={index => this.onChangePage(index)}
           pageWidth={WIDTH}
-          // itemSpacings={20}
+          // itemSpacings={Spacings.s3}
           initialPage={INITIAL_PAGE}
           containerStyle={{height: 160/* , flex: 1 */}}
           pageControlPosition={'under'}
@@ -106,7 +105,7 @@ const styles = StyleSheet.create({
   page: {
     flex: 1,
     borderWidth: 1,
-    borderRadius: 4
+    borderRadius: 8
   }
 });
 

src/components/carousel/index.js

@@ -80,7 +80,7 @@ export default class Carousel extends BaseComponent {
 
   static defaultProps = {
     initialPage: 0,
-    itemSpacings: 12,
+    itemSpacings: 16,
     pagingEnabled: true
   };
 
@@ -270,6 +270,7 @@ export default class Carousel extends BaseComponent {
       return (
         <PageControl
           size={6}
+          spacing={8}
           containerStyle={containerStyle}
           inactiveColor={Colors.dark60}
           color={Colors.dark20}