We can create a carousel in React Native using the built-in ScrollView component in horizontal mode.
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.
I made the example using Expo just to keep it simple to run and focus in the JavaScript and the style sheet.
the entire carousel fit in one component, and the main parts are explained in the README.
You can check the code example in the repository
navarroaxel
/
react-native-scrollview-carousel-example
The simplest carousel example in React Native using ScrollView horizontal
react-native-scrollview-carousel-example
The simplest carousel example in React Native using the built-in ScrollView in horizontal mode.
Setting up the development environment
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
Trying the example app
Start the local dev server for the app:
npm start
Then, follow the expo instructions to open the app in your phone or emulator.
How does ScrollView work?
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.
Performance issues
The ScrollView renders all its react child components. If you need…
What carousel component do you use in your app? leave a comment about this!
Top comments (1)
Awesome!