DEV Community

skptricks
skptricks

Posted on

React Native Full Page Width Swipeable Horizontal ScrollView

Source : React Native Full Page Width Swipeable Horizontal ScrollView

This tutorial explains how to create react native full page width swipeable horizontal scrollView layout for android or ios device. In this example we have created simple swipeable horizontal view and when you can perform swipe left and right operation in your android or iOS device using below code, then you will find below observation:

  1. when user swipe left in the device, then it will navigate user to next page or view.
  2. when user swipe right in the device, then it will navigate user to previous page or view.

Basically, react native ScrollView component provides a very special property named as pagingEnabled = { boolean } , in which Boolean can have one of two values either true or false . pagingEnabled allows you to stop at every single view during scrolling.

React Native Full Page Width Swipeable Horizontal ScrollView

Click here to read more

Top comments (1)

Collapse
 
hariansyahhari2 profile image
hariansyahhari2

What if I dont want it to be 100%? I want my app shows 70% of active content, and the 30% is the preview for the next content. I tried using pagingEnabled but the second page is showing 40% of second content and 60% of third content. What if I want to show second page behave like the first page (70% - 30%)