├── .gitignore ├── Carousel.js ├── LICENSE ├── README.md ├── demo.gif └── imgs ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # React Native 2 | node_modules/ 3 | npm-debug.log 4 | yarn-debug.log 5 | yarn-error.log 6 | 7 | # Expo 8 | .expo/ 9 | .expo-shared/ 10 | 11 | # Build output 12 | android/build/ 13 | android/app/build/ 14 | ios/build/ 15 | ios/Pods/ 16 | ios/Podfile.lock 17 | ios/Flutter/Flutter.framework/ 18 | ios/Flutter/Flutter.podspec 19 | ios/Flutter/Flutter.podspec.json 20 | 21 | # macOS 22 | *.DS_Store 23 | 24 | # Android Studio 25 | *.iml 26 | .idea/ 27 | *.gradle/ 28 | .gradle/ 29 | local.properties 30 | 31 | # VSCode 32 | .vscode/ 33 | 34 | # Logs 35 | *.log 36 | 37 | # Temporary files 38 | *.tmp 39 | *.swp 40 | 41 | # Environment files 42 | .env 43 | 44 | # Coverage 45 | coverage/ 46 | 47 | # IDE-specific 48 | *.sublime-workspace 49 | *.sublime-project 50 | 51 | # Fastlane 52 | fastlane/report.xml 53 | fastlane/Preview.html 54 | fastlane/screenshots/ 55 | fastlane/test_output/ 56 | 57 | # Misc 58 | *.lock 59 | *.pid 60 | *.seed 61 | *.gz 62 | *.tar 63 | 64 | # Webpack 65 | webpack-stats.json 66 | 67 | # macOS Finder 68 | *.DS_Store 69 | 70 | # JetBrains IDEs 71 | .idea/ 72 | *.iml 73 | 74 | # React Native specific 75 | *.lock 76 | react-native.config.js 77 | 78 | # Other 79 | *.swp 80 | *.swo 81 | *.sublime-project 82 | *.sublime-workspace 83 | *.code-workspace 84 | -------------------------------------------------------------------------------- /Carousel.js: -------------------------------------------------------------------------------- 1 | import React, {useState} from 'react'; 2 | import { 3 | StatusBar, 4 | FlatList, 5 | SafeAreaView, 6 | Image, 7 | View, 8 | Text, 9 | Dimensions, 10 | StyleSheet, 11 | } from 'react-native'; 12 | 13 | import * as images from './imgs'; 14 | 15 | const {width} = Dimensions.get('window'); 16 | 17 | const imageArray = Object.entries(images).map(([key, number]) => ({ 18 | key, 19 | uri: number, 20 | })); 21 | 22 | const Carousel = () => { 23 | const [currentIndex, setCurrentIndex] = useState(0); 24 | 25 | const handleScrollEnd = ev => { 26 | const index = Math.floor(ev.nativeEvent.contentOffset.x / width); 27 | setCurrentIndex(index); 28 | }; 29 | 30 | return ( 31 | 32 | 48 | ); 49 | }; 50 | 51 | const IMAGE_WIDTH = width * 0.75; 52 | const IMAGE_HEIGHT = IMAGE_WIDTH * 1.5; 53 | 54 | const styles = StyleSheet.create({ 55 | container: { 56 | flex: 1, 57 | }, 58 | imageContainer: { 59 | width, 60 | justifyContent: 'center', 61 | alignItems: 'center', 62 | shadowColor: '#000', 63 | shadowRadius: 30, 64 | shadowOpacity: 0.2, 65 | shadowOffset: { 66 | width: 0, 67 | height: 0, 68 | }, 69 | }, 70 | image: { 71 | width: IMAGE_WIDTH, 72 | height: IMAGE_HEIGHT, 73 | borderRadius: 30, 74 | }, 75 | indexText: { 76 | color: 'black', 77 | fontSize: 18, 78 | fontWeight: '500', 79 | textAlign: 'center', 80 | marginTop: 10, 81 | }, 82 | }); 83 | 84 | export default Carousel; 85 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 iCodeCraft 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple React Native Carousel 2 | 3 | A simple and easy-to-use carousel component for React Native. This snippet demonstrates a straightforward implementation of a carousel using `FlatList` for horizontal image scrolling. 4 | 5 | Simple React Native Carousel 6 | 7 | ## Features 8 | 9 | - Horizontal scrolling carousel 10 | - Paging enabled for smooth transitions 11 | - Displays the current image index 12 | - Easy to integrate and customize 13 | - Easily use local images by importing them directly. 14 | 15 | ## Usage 16 | 17 | 1. **Add images to your project:** 18 | 19 | Create an `imgs.js` file (or any name you prefer) in the same directory and export your images. Example: 20 | 21 | ```javascript 22 | // imgs.js 23 | import img1 from './assets/img1.png'; 24 | import img2 from './assets/img2.png'; 25 | // Import more images as needed 26 | 27 | export default { 28 | img1, 29 | img2, 30 | // Export more images as needed 31 | }; 32 | ``` 33 | 34 | 2. **Use the Carousel component:** 35 | 36 | ```javascript 37 | import React from 'react'; 38 | import { SafeAreaView } from 'react-native'; 39 | import Carousel from './Carousel'; // Adjust the import path if needed 40 | 41 | const App = () => { 42 | return ( 43 | 44 | 45 | 46 | ); 47 | }; 48 | 49 | export default App; 50 | ``` 51 | 52 | ## Props 53 | 54 | - **`images`** (required): An object containing the images to be displayed in the carousel. The keys should be unique identifiers for each image, and the values should be the image imports. 55 | 56 | ## Code 57 | 58 | Here's the code for the `Carousel` component: 59 | 60 | ```javascript 61 | import React, { useState } from 'react'; 62 | import { 63 | StatusBar, 64 | FlatList, 65 | SafeAreaView, 66 | Image, 67 | View, 68 | Text, 69 | Dimensions, 70 | StyleSheet, 71 | } from 'react-native'; 72 | 73 | import * as images from './imgs'; // Adjust the import path if needed 74 | 75 | const { width } = Dimensions.get('window'); 76 | 77 | const imageArray = Object.entries(images).map(([key, number]) => ({ 78 | key, 79 | uri: number, 80 | })); 81 | 82 | const Carousel = () => { 83 | const [currentIndex, setCurrentIndex] = useState(0); 84 | 85 | const handleScrollEnd = ev => { 86 | const index = Math.floor(ev.nativeEvent.contentOffset.x / width); 87 | setCurrentIndex(index); 88 | }; 89 | 90 | return ( 91 | 92 | 108 | ); 109 | }; 110 | 111 | const IMAGE_WIDTH = width * 0.75; 112 | const IMAGE_HEIGHT = IMAGE_WIDTH * 1.5; 113 | 114 | const styles = StyleSheet.create({ 115 | container: { 116 | flex: 1, 117 | }, 118 | imageContainer: { 119 | width, 120 | justifyContent: 'center', 121 | alignItems: 'center', 122 | shadowColor: '#000', 123 | shadowRadius: 30, 124 | shadowOpacity: 0.2, 125 | shadowOffset: { 126 | width: 0, 127 | height: 0, 128 | }, 129 | }, 130 | image: { 131 | width: IMAGE_WIDTH, 132 | height: IMAGE_HEIGHT, 133 | borderRadius: 30, 134 | }, 135 | indexText: { 136 | color: 'black', 137 | fontSize: 18, 138 | fontWeight: '500', 139 | textAlign: 'center', 140 | marginTop: 10, 141 | }, 142 | }); 143 | 144 | export default Carousel; 145 | ``` 146 | 147 | ## License 148 | 149 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 150 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-carousel-snippet/6fee77bbbc46973de6effdbd0bf6e99e43232e12/demo.gif -------------------------------------------------------------------------------- /imgs/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-carousel-snippet/6fee77bbbc46973de6effdbd0bf6e99e43232e12/imgs/1.png -------------------------------------------------------------------------------- /imgs/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-carousel-snippet/6fee77bbbc46973de6effdbd0bf6e99e43232e12/imgs/2.png -------------------------------------------------------------------------------- /imgs/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-carousel-snippet/6fee77bbbc46973de6effdbd0bf6e99e43232e12/imgs/3.png -------------------------------------------------------------------------------- /imgs/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-carousel-snippet/6fee77bbbc46973de6effdbd0bf6e99e43232e12/imgs/4.png -------------------------------------------------------------------------------- /imgs/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-carousel-snippet/6fee77bbbc46973de6effdbd0bf6e99e43232e12/imgs/5.png -------------------------------------------------------------------------------- /imgs/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-carousel-snippet/6fee77bbbc46973de6effdbd0bf6e99e43232e12/imgs/6.png -------------------------------------------------------------------------------- /imgs/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-carousel-snippet/6fee77bbbc46973de6effdbd0bf6e99e43232e12/imgs/7.png -------------------------------------------------------------------------------- /imgs/index.js: -------------------------------------------------------------------------------- 1 | import img1 from './1.png'; 2 | import img2 from './2.png'; 3 | import img3 from './3.png'; 4 | import img4 from './4.png'; 5 | import img5 from './5.png'; 6 | import img6 from './6.png'; 7 | import img7 from './7.png'; 8 | 9 | export {img1, img2, img3, img4, img5, img6, img7}; 10 | --------------------------------------------------------------------------------