You'll notice that the useState hook returns two values in an array. Using the useState React hook, create an array of images called images with each image having a unique id in order to help you differentiate between each object in the array. Import the following statements, then create an IMAGES object by importing each image using Common JS require statements. If you'd like to follow along using the same images, you can find them stored here in the GitHub repo for this tutorial.Īfter setting up the source images we're going to use, open up the App.js file and initiate it with a title of the screen you'd like to display. For this example, I'm using some free, high-res images of Amsterdam pulled from Unsplash. Plus, it offers different layouts to configure the carousel view, right out of the box.Īfter installing the dependencies, let's bring in the image assets we'd like to use. I prefer to use react-native-snap-carousel because it does not require the configuration of any additional steps in order to be used on native devices. Open up a terminal window and run each command as mentioned in the following order: npx react-native init rnPreviewImageGallery To begin this tutorial, we want to set up a new React Native project and install all of the dependencies that are required to implement our customized carousel image gallery. Have react-native-cli installed, or use npx.Have access to a package manager like npm, yarn, or npx.To get the most out of this tutorial, you'll want to familiarize yourself with JavaScript/ES6 and meet the following requirements in your local dev environment: Of course, to achieve this synchronization between the two, we will use React Hooks such that you will be able to implement such a pattern in your own React Native apps. The construction of the syncing part between the two is to add a functionality such that when an image in the carousel is scrolled either left or right, the thumb in the FlatList is also going to be scrolled along with it. The FlatList is what we will use to display the thumbnail view for each image below the carousel. In this tutorial, we're going to create a custom gallery of images using react-native-snap-carousel and FlatList from React Native, and the open-source library is going to display each image in a carousel view. Using an open-source library like react-native-swiper, or something a bit more advanced like react-native-snap-carousel, provides us with the tools we need to create it, but what if you want to create a custom gallery view with additional functionality? In React Native, there are many different ways to go about displaying a collection of images in a gallery view, and a carousel is one of the most popular methods to achieve this.
0 Comments
Leave a Reply. |