React Native Full Page Width Swipeable Horizontal ScrollView Android iOS

ScrollView is used to show + add multiple components inside a consistent View. In our previous tutorial we have learn about Creating a Simple Horizontal ScrollView in react native with multiple components, You can read that tutorial here. Now today we are going to learn about something new in Horizontal ScrollView, things you can do with Horizontal ScrollView. So in this tutorial we would going to create a react native app with Full Page Width Swipeable Horizontal ScrollView in both Android and iOS application example tutorial using pagingEnabled = { true } prop. The main feature of this tutorial is ” Each View has filled on complete mobile screen & The second view did not show until user swipe horizontally on screen 🙂 .”

Contents in this project Full Page Width Swipeable Horizontal ScrollView in Android iOS React Native App:

1. Import StyleSheet, View, ScrollView, Text and Dimensions component in your project.

2. Create a global variable above the class named as Device_Width. This variable is used store the current device width, So the current view expand all over the screen. We would retrieve the device width using Dimensions.get(‘window’).width inbuilt method.

3. Create a Root View in render’s return block. This would be our main view.

4. Create ScrollView component inside the Root View.

horizontal = { true } : This prop would make the ScrollView Horizontal.

showsHorizontalScrollIndicator = {false} : This prop would hide the ScrollView’s own horizontal indicator bar.

pagingEnabled = { true } : This prop would only allows single view at a time on device screen and stops other views interrupting the opened view.

5. Now finally we would create 3 different View components inside the ScrollView. Each View has its unique background color.

6. Create Styles for All Views and Text component.

7. Complete source code for App.js File :

Screenshot in Android device :

Full Page Width Swipeable Horizontal ScrollView

Screenshots in iOS device :

Leave a Reply

Your email address will not be published.