![]() After installation, create a data.js file in your root directory and paste the code below: const data = [īody: "Ut tincidunt tincidunt erat. The command above installs react-native-snap-carousel, which is the package we’ll use to create the carousel. To create a carousel, open your terminal, navigate to the project directory, and run the command below: npm install -save You should be presented with a screenshot similar to the one below:Ĭreating the carousel with react-native-snap-carousel The command above launches Metro Bundler in your browser, giving you the option of running the application on your chosen emulator. In the managed workflow section, choose a blank template:Īfter the template has installed all the necessary dependencies, navigate to the project directory in your terminal and start your project with the code below: expo start Navigate to a directory where you want to add your project and type the following command: expo init ReactNativeCarouselTutorial If you don’t have the Expo CLI installed already, open your terminal and type the code below to install it: npm install expo-cli -globalĪfter installing Expo, we can use it to initialize React Native. Getting started with React Native and Expoįirst, we’ll bootstrap our application with Expo. Creating the carousel with react-native-snap-carousel.Getting started with React Native and Expo.You can also check out the source code to follow along. To follow along with this tutorial, you’ll need the following: We’ll use the react-native-snap-carousel package, which makes implementing complex carousels easy. In this tutorial, we’ll create a carousel in a React Native mobile application with a Tinder-style swipe animation. Particularly on mobile applications, carousels are great for maximizing the available space. A carousel allows users to cycle through a series of content like videos or photos either vertically or horizontally without having to scroll towards the bottom of the page. One of the best ways to utilize a horizontal space on your UI is with a carousel. React Native carousel with react-native-snap-carouselĮditor’s note: This article was last updated 27 April 2022 to reflect the most up-to-date version of react-native-snap-carousel, 4.0.0-beta.6+. ![]() Samaila Bala Follow I'm a frontend engineer and technical writer.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |