├── .eslintignore ├── carousel-demo ├── .watchmanconfig ├── .gitignore ├── App.js ├── assets │ └── icons │ │ ├── app-icon.png │ │ └── loading-icon.png ├── .babelrc ├── package.json ├── app.json └── src │ ├── MainPage.js │ ├── CarouselPage.js │ └── CarouselDemo.js ├── carousel-example ├── .watchmanconfig ├── .gitignore ├── assets │ └── icons │ │ ├── app-icon.png │ │ └── loading-icon.png ├── .babelrc ├── package.json ├── app.json └── App.js ├── .gitignore ├── .babelrc ├── .eslintrc ├── src ├── index.js ├── components │ ├── CarouselMiniHeader.js │ ├── PageControl.js │ ├── Carousel.js │ ├── CarouselCard.js │ ├── ViewPager.js │ └── CarouselHeader.js └── CarouselComponent.js ├── LICENSE.md ├── package.json ├── dist ├── components │ ├── CarouselMiniHeader.js │ ├── PageControl.js │ ├── ViewPager.js │ ├── CarouselCard.js │ ├── Carousel.js │ └── CarouselHeader.js ├── index.js └── CarouselComponent.js ├── README.md ├── docs └── README.md └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /carousel-demo/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /carousel-example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | carousel-example/node_modules 3 | npm-debug.* 4 | -------------------------------------------------------------------------------- /carousel-demo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | -------------------------------------------------------------------------------- /carousel-example/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | -------------------------------------------------------------------------------- /carousel-demo/App.js: -------------------------------------------------------------------------------- 1 | import CarouselDemo from './src/CarouselDemo'; 2 | export default CarouselDemo 3 | -------------------------------------------------------------------------------- /carousel-demo/assets/icons/app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-carousel-component/HEAD/carousel-demo/assets/icons/app-icon.png -------------------------------------------------------------------------------- /carousel-example/assets/icons/app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-carousel-component/HEAD/carousel-example/assets/icons/app-icon.png -------------------------------------------------------------------------------- /carousel-demo/assets/icons/loading-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-carousel-component/HEAD/carousel-demo/assets/icons/loading-icon.png -------------------------------------------------------------------------------- /carousel-example/assets/icons/loading-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacklam718/react-native-carousel-component/HEAD/carousel-example/assets/icons/loading-icon.png -------------------------------------------------------------------------------- /carousel-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /carousel-example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2016", 4 | "react-native" 5 | ], 6 | "env": { 7 | "development": { 8 | "plugins": ["flow-react-proptypes"] 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "installedESLint": true, 4 | "parser": "babel-eslint", 5 | "ecmaFeatures": { 6 | "jsx": true 7 | }, 8 | "env": { 9 | "es6": true 10 | }, 11 | "plugins": [ 12 | "react", 13 | "jsx-a11y" 14 | ], 15 | "rules": { 16 | "import/no-extraneous-dependencies": 0, 17 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /carousel-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "carousel-example", 3 | "version": "0.0.0", 4 | "description": "Hello Expo!", 5 | "author": null, 6 | "private": true, 7 | "main": "node_modules/expo/AppEntry.js", 8 | "dependencies": { 9 | "expo": "^19.0.0", 10 | "react": "16.0.0-alpha.12", 11 | "react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz", 12 | "react-native-carousel-component": ".." 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /carousel-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "carousel-demo", 3 | "version": "0.0.0", 4 | "description": "Hello Expo!", 5 | "author": null, 6 | "private": true, 7 | "main": "node_modules/expo/AppEntry.js", 8 | "dependencies": { 9 | "expo": "^19.0.0", 10 | "react": "16.0.0-alpha.12", 11 | "react-native": "https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz", 12 | "react-native-deprecated-custom-components": "^0.1.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import CarouselComponent from './CarouselComponent'; 2 | import Carousel from './components/Carousel'; 3 | import CarouselCard from './components/CarouselCard'; 4 | import CarouselHeader from './components/CarouselHeader'; 5 | import CarouselMiniHeader from './components/CarouselMiniHeader'; 6 | import ViewPager from './components/ViewPager'; 7 | import PageControl from './components/PageControl'; 8 | 9 | export { 10 | Carousel, 11 | CarouselCard, 12 | CarouselHeader, 13 | CarouselMiniHeader, 14 | ViewPager, 15 | PageControl, 16 | }; 17 | 18 | export default CarouselComponent; 19 | -------------------------------------------------------------------------------- /carousel-demo/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "carousel-demo", 4 | "description": "An empty new project", 5 | "slug": "carousel-demo", 6 | "privacy": "public", 7 | "sdkVersion": "19.0.0", 8 | "version": "1.0.0", 9 | "orientation": "portrait", 10 | "primaryColor": "#cccccc", 11 | "icon": "./assets/icons/app-icon.png", 12 | "loading": { 13 | "icon": "./assets/icons/loading-icon.png", 14 | "hideExponentText": false 15 | }, 16 | "packagerOpts": { 17 | "assetExts": ["ttf", "mp4"] 18 | }, 19 | "ios": { 20 | "supportsTablet": true 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /carousel-example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "carousel-example", 4 | "description": "An empty new project", 5 | "slug": "carousel-example", 6 | "privacy": "public", 7 | "sdkVersion": "19.0.0", 8 | "version": "1.0.0", 9 | "orientation": "portrait", 10 | "primaryColor": "#cccccc", 11 | "icon": "./assets/icons/app-icon.png", 12 | "loading": { 13 | "icon": "./assets/icons/loading-icon.png", 14 | "hideExponentText": false 15 | }, 16 | "packagerOpts": { 17 | "assetExts": ["ttf", "mp4"] 18 | }, 19 | "ios": { 20 | "supportsTablet": true 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/CarouselMiniHeader.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import React from 'react'; 4 | import type { ReactElement } from 'react'; 5 | import { Animated, StyleSheet, PixelRatio } from 'react-native'; 6 | 7 | const styles = StyleSheet.create({ 8 | miniHeader: { 9 | backgroundColor: 'white', 10 | flexDirection: 'row', 11 | alignItems: 'center', 12 | position: 'absolute', 13 | left: 12, 14 | top: 0, 15 | right: 12, 16 | paddingVertical: 9, 17 | borderBottomWidth: 1 / PixelRatio.get(), 18 | borderBottomColor: '#E1E1E1', 19 | }, 20 | }); 21 | 22 | type Props = { 23 | style?: any; 24 | children: any; 25 | } 26 | 27 | const defaultProps = { 28 | style: null, 29 | }; 30 | 31 | export default function CarouselMiniHeader({ children, style }: Props): ReactElement { 32 | return ( 33 | 37 | {children} 38 | 39 | ); 40 | } 41 | 42 | CarouselMiniHeader.defaultProps = defaultProps; 43 | -------------------------------------------------------------------------------- /carousel-demo/src/MainPage.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, StyleSheet, Button } from 'react-native'; 3 | import { Navigator } from 'react-native-deprecated-custom-components'; 4 | 5 | const styles = StyleSheet.create({ 6 | container: { 7 | flex: 1, 8 | backgroundColor: 'white', 9 | padding: 20, 10 | justifyContent: 'center', 11 | }, 12 | }); 13 | 14 | export default class MainPage extends Component { 15 | toCarouselPage = () => { 16 | this.props.navigator.push({ title: 'Carousel Page', name: 'carouselPage' }); 17 | } 18 | 19 | render() { 20 | return ( 21 | 22 | 23 |