The simplest carousel example in React Native using ScrollView horizontal
MIT License
The simplest carousel example in React Native using the built-in ScrollView in horizontal mode.
Install the Expo CLI command line utility:
npm install -g expo-cli
Clone the repository and install the dependencies:
git clone https://github.com/navarroaxel/react-native-scrollview-carousel-example.git
cd react-native-scrollview-carousel-example
npm install
Start the local dev server for the app:
npm start
Then, follow the expo instructions to open the app in your phone or emulator.
The ScrollView renders all its react child components vertically, but we can arrange them horizontally in a row using:
<ScrollView horizontal>
In this example, we show how to overlap the Image
component on the header
to get a cool effect. The touch is so fluid and fast that the user has a sense
of a highly performance application.
The ScrollView
renders all its react child components. If you need to render
a carousel with more than 10 items, you can get better performance by using the
FlatList
built-in component.
We will call the View
number 1 "Header", this should have a fixed height
because the ScrollView
extends himself with a flex: 1
style.
💡 You can use a proportional height based on the device screen using the
useWindowDimensions
hook.
const {height} = useWindowDimensions();
The ScrollView
is the number 2, I used a marginTop: -70
to overlap the
carousel on the header for a cool effect. 😎
The View
number 3 is the "Carousel Item". I used a carousel of images because
is the most use case for carousels in real life.
💡 A tool to create the image's shadow: https://ethercreative.github.io/react-native-shadow-generator
Don't worry about this loop:
Array.apply(null, Array(6)).map((_, index) => ( /* ... */ ));
This is just the functional form to:
for (i = 0; i < 6; i++) {
items.push( /* ... */ );
}
Every item has a marginLeft: 70
to start in the middle of the screen. But
for the last item we should use marginRight
to end with the same margin:
lastItem: {
marginLeft: 70,
marginRight: 70,
},
The View
number 4 is a placeholder for the text associated with the image.
This style is required to keep everything centered in the View
number 3 - the
carousel item.
itemContent: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
itemText: {
textAlign: 'center',
},