Create a React Native Carousel Slider in 9 minutes

Опубликовано: 11 Февраль 2022
на канале: Jeremy

3,411

A lot of apps that display images often allow users to scroll horizontally across these and will display their place within that list of images. This is what I refer to as a carousel slider. I looked online and found libraries to solutions, but they didn't work as I had wanted them to. Fortunately, I found a video that showed how to do this with zero dependencies, but they didn't include all of the features that I wanted. So I thought I'd show you guys how to create a carousel slider that allows users to interact with it in more ways than just sliding left and right.

It should be noted that in the video I use the component "ReactView" for the component "View" that can be imported from React Native.
(ie import {View as ReactView} from "react-native";)
I did this because I have a local component called View in my project and don't want to mix up the local View component and the View component from react native.

Timestamps:
0:00 - 0:28 - Intro
0:29 - 0:40 - Shout out
0:41 - 3:12 - Configuring the FlatList
3:13 - 3:20 - Progress Check - FlatList
3:21 - 4:15 - Pagination Component
4:16 - 4:22 - Progress Check - Pagination
4:23 - 5:31 - Number Your Images
5:32 - 5:42 - Progress Check - Numbers
5:43 - 8:35 - Back Button & Rating Display
8:38 - 9:01 - Final Product on iPhone & Android

Смотрите видео Create a React Native Carousel Slider in 9 minutes онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Jeremy 11 Февраль 2022. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 3,411 раз и оно понравилось 26 посетителям.

5,776