single direction scroll

[deepakaggarwal7]

Feature Request:

Adding a property something like "ScrollDirection = LeftOnly|RightOnly|Both(default)"

I've read in some old threads of several ways to handle this:

1. enableScroll = false (but then scrolling is completely disabled)
2. check onScroll = but by the time I check that use would already scroll to undesired direction which gives bad user experience
3. Another option is to remove previous items. However, that works but there's only one aesthetic glitch - You don't see a partially visible previous card and also pagination might mess up (user should still see the step they are on)

Why is such a feature important? Imagine you want users to fill a sectioned form where they should not go to previous ones or maybe a game where you don't want user to peek previous cards.

thanks

[maxto024]

+1 I feel this is important

[ffMathy]

Did you ever find a workaround to this?

[St1ma]

Hello everybody Just end with some hacky workaround I have tried to work with dynamic data array (according to some business logic, I need to block swipe to the first page). It also works for cases, when you are blocked with some actions on the current page (agreements, fields validation, etc), so you are not allowed to move forward. So at first active page my data list looks like:

[
  { index: 0, page: 'Disclamer' },
  { index: 1, page: 'Title 1' },
  { index: 2, page: 'Title 2' },
  { index: 3, page: 'Title 3' },
  ....
]

When on second page it will be slice(1):

[
  { index: 1, page: 'Title 1' },
  { index: 2, page: 'Title 2' },
  { index: 3, page: 'Title 3' },
  ....
]

It works absolutely as expected for iOS builds, but as for Android you will not be able to see correct render, as the second page will disappear till you click on page once again. So it should be added another approach to render first (limited element). I've added another wrapper ScrollView to Carousel and lock scrollEnabled right after swiping to second page:

        <ScrollView
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onScrollBeginDrag={this.handleChangeLayout}
          scrollEnabled={activePageIndex === 0}
        >
          <CarouselItem {...data} />
          <Carousel
            data={data.slice(1)}
            renderItem={this.renderItem}
          />
        </ScrollView>

Hope it will handle someone's problem

[hannojg]

+1

[hannojg]

+1

[antl3x]

just use loop={true}

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2