ajsmth/react-native-pager

controllable pager component for react native

react-native-pager's Issues

flicker

I am trying out the examples. With the exception of one, the screen flickers each time the focus changes. Is this a known bug or could it have something to do with my setup?

Environment:
ios Device
react-native: 0.61.2
navigation: react-native-navigation
deeply nested styled-components.

Swipe not working in Expo v36?

Hi. I recently updated my app to Expo v36 and swiping on slides functionality is broken.

It works if you use a button to flip between slides but swiping with a finger always snaps back to slide[0].
Could this be something to do with the version of gestures "react-native-gesture-handler": "~1.5.0" or reanimated "react-native-reanimated": "~1.4.0", Expo installs?

I've troubleshoot as far as my knowledge can take me but now I need help. 😜

I can't get react-native-pager to install in Expo Snack so you have to build a local app to test.
If anyone is willing to try... fire up a new Expo app and paste this into the App.jsx to see the issue.

Thank you!

import {
  interpolateWithConfig,
  Pager,
  PagerProvider,
  useFocus,
  useIndex,
  useInterpolation,
  useOffset,
  useOnFocus,
  usePager,
} from '@crowdlinker/react-native-pager';
import React, { useState } from 'react';
import { Button, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import Animated from 'react-native-reanimated';

const children = Array.from({ length: 1000 }, (_, i) => <Slide key={i} />);

const App = () => (
  <PagerProvider>
    <App2 />
  </PagerProvider>
);

const App2 = () => {
  const [activeIndex, onChange] = usePager();

  return (
    <View style={{ flex: 1 }}>
      <Text
        style={{
          textAlign: 'center',
          marginBottom: 20,
        }}
      >
        {`Number of screens: ${children.length}`}
      </Text>

      <Pager>{children}</Pager>

      <NavigationButtons activeIndex={activeIndex} onChange={onChange} />
    </View>
  );
};

const colors = [
  'aquamarine',
  'coral',
  'gold',
  'cadetblue',
  'crimson',
  'darkorange',
  'darkmagenta',
  'salmon',
];

function Slide() {
  // const [count, setCount] = useState(0);
  const focused = useFocus();
  const index = useIndex();
  // const style = useInterpolation({
  //   transform: [
  //     {
  //       scale: {
  //         inputRange: [-1, 0, 1],
  //         outputRange: [0.9, 1, 0.9],
  //       },
  //     },
  //   ],
  // });

  return (
    <Animated.View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        marginHorizontal: 5,
        backgroundColor: colors[index % colors.length],
      }}
    >
      <Text>{`Screen: ${index}`}</Text>
      <Text>{`Focused: ${focused}`}</Text>
      {/* <TextInput placeholder="Test Update" />
      <Text>{`Count: ${count}`}</Text>
      <Button title="Inc" onPress={() => setCount(count + 1)} /> */}
    </Animated.View>
  );
}

interface iPagerConsumer {
  activeIndex: number;
  onChange: (nextIndex: number) => void;
  incrementBy?: number;
}

function NavigationButtons({ activeIndex, onChange, incrementBy = 1 }: iPagerConsumer) {
  return (
    <View
      style={{
        height: 75,
        width: '100%',
        backgroundColor: 'white',
        marginTop: 10,
      }}
    >
      <Text
        style={{
          fontSize: 16,
          height: 25,
          textAlign: 'center',
        }}
      >
        {`activeIndex: ${activeIndex}`}
      </Text>

      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'space-around',
          marginTop: 10,
        }}
      >
        <TouchableOpacity
          style={{
            borderWidth: 1,
            borderRadius: 4,
            alignItems: 'center',
            justifyContent: 'center',
            width: 150,
          }}
          onPress={() => onChange(activeIndex - incrementBy)}
        >
          <Text>{'<'}</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={{
            borderWidth: 1,
            borderRadius: 4,
            alignItems: 'center',
            justifyContent: 'center',
            width: 150,
          }}
          onPress={() => onChange(activeIndex + incrementBy)}
        >
          <Text>{'>'}</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

export default App;

Enable Swipe Gesture

I was implementing this and I am facing difficulty in enabling Swipe Gesture, How can I enable it on the cards ?
Thanks in advance.

Can't set initialIndex

When I try to set the initialIndex, nothing changes. Also tried to set the activeIndex based on my props, but it didn't work.

The only way I could set the index was to useEffect

import React, { useState, useEffect } from 'react';
import { Pager, PagerProvider } from '@crowdlinker/react-native-pager';
import StoryItemView from "../../storyItem/view/storyItemView";

const Stories = (props) => {

    const { stories } = props;
    const [activeIndex, onChange] = useState(1);


    useEffect(() => {
        onChange(props.index);
    }, [props.index]);

    return (
            <PagerProvider activeIndex={activeIndex} onChange={onChange}>
                <Pager adjacentChildOffset={1} type={'horizontal'}>
                    {stories
                        .map((story, i) => (
                            <StoryItemView
                                key={i}
                                {...{story}}
                            />
                        ))
                    }
                </Pager>
            </PagerProvider>

    );
}

export default Stories;

But now, when I open my Modal (which contains the pager), it quickly swipes to it. How can I disable the animation for the initial opening?

Crashing on android

Version 10 (haven't tested on any other version)

Error while updating property 'accessibilityRole' of a view managed by: RCTView

null

Invalid accessibility role value: tablist
updateViewProp
    ViewManagersPropertyCache.java:95
setProperty
    ViewManagerPropertyUpdater.java:132
updateProps
    ViewManagerPropertyUpdater.java:51
updateProperties
    ViewManager.java:37
createView
    NativeViewHierarchyManager.java:245
execute
    UIViewOperationQueue.java:200
dispatchPendingNonBatchedOperations
    UIViewOperationQueue.java:1109
doFrameGuarded
    UIViewOperationQueue.java:1080
doFrame
    GuardedFrameCallback.java:29
doFrame
    ReactChoreographer.java:166
doFrame
    ChoreographerCompat.java:84
run
    Choreographer.java:964
doCallbacks
    Choreographer.java:790
doFrame
    Choreographer.java:721
run
    Choreographer.java:951
handleCallback
    Handler.java:883
dispatchMessage
    Handler.java:100
loop
    Looper.java:214
main
    ActivityThread.java:7356
invoke
    Method.java
run
    RuntimeInit.java:492
main
    ZygoteInit.java:930

More example code?

Hello, thanks for the awesome library. I can see multiple example images on README, can you put the code into example folder too?

How to set flexible width for Pager?

Thanks for a great component!
I can't find example with flexible percentage based width like:
<Pager style={{ width:'80%'}}>
Is it possible?

Request to Add Product in Start Flutter

Hello,

I am Maheshwari from team GeekyAnts.

On behalf of Start React, we add open source products which we find helpful to the community & also we provide credits to author itself.

Let me know if you are interested showcase your product in our open source website.

If yes, then I request you to add MIT Licence in your repo.

Looking forward to hear from you.

Performance with large amount of data

Hi, your component looks great and very promising. I was about to build something using FlatList horizontal and pagingEnabled, because I need to handle up to thousands of slides. Will this be still performant with your library? I haven’t digged in very deeply so far into your codebase, but it looks like you already kinda lazy render the elements, right?

Thank you!

Gesture Handler issues

I open the Pager in Fullscreen using react-native-modalize and a Portal (to hide Navigation tabs). Modalize has a feature "flick / swipe to dismiss", so when I swipe down vertically, I can pull the modal down to close it. (following the finger till threshold)

Pager seems not to bubbling up the gestures, therefore, my vertical pull never reaches the wrapping modal. Is there any chance I could stop preventing the gesture? (horizontal is fine for me, I need to bubble up the vertical one)

Swipe not working with React Native CLI Project for version 0.2.2 published on npm

Expected Behavior

I am trying to create a sample pager like the one depicted in the README.md.

Actual Behavior

The Swipe is not working. It is just stuck on the first Slide.
To rule out any issue with my current project (e.g. missconfiguration like in #22), the swipe work with v0.2.1 published on npm.

Environment

React: 16.9.0
React native: 0.61.5
@crowdlinker/react-native-pager: 0.2.2
react-native-gesture-handler: 1.6.0
react-native-reanimated: 1.7.0

Target Platform:
iOS & Android

---

EDIT: It looks like the difference between 0.2.1 and 0.2.2 is linked to this PR which is not merged yet on this project (maybe you just publish on npm and forgot to push the merge on github?)

There is an example how to interpolate two colors?

RTL Support

Hi, thank you for this wonderful package. I was wondering how can I flip the pages for RTL applications where cards appear to the left instead of the right.

I have used the sample inline-cards as a basis in my implementation and it works fine for LTR but I am not sure where to start to flip the direction. I have tried changing the flexDirection on the Pager container style but that didn't work.

I appreciate your help.

Swipe not working with React Native CLI Project

Hi,

Expected Behavior

I am trying to create a sample application like https://snack.expo.io/H1p6iMCTB using your library.

Actual Behavior

The same project when I try it with react native CLI, then the Swipe is not working. It is just Stuck on the first Slide.
To rule out any issue with my current project, I have created a fresh react native project and have only used 3 dependencies mentioned in your documentation:

 yarn add react-native-gesture-handler
 yarn add react-native-reanimated
 yarn add @crowdlinker/react-native-pager

But, I am still facing the issue.

Reproducible Demo

I have put my Sample project at https://github.com/rohitkum28/react-native-pager-test.

NOTE: Also, https://github.com/CrowdLinker/react-native-pager/tree/master/example works on the same device so I don't think it is device issue.

Environment

React: 16.9.0
React native: 0.61.5
@crowdlinker/react-native-pager: ^0.2.1
react-native-gesture-handler: ^1.5.2
react-native-reanimated: ^1.4.0

Target Platform:
Android (6.0)

Problem with zIndex

Hey!

First of all thank you for this amazing library!
It's really performant and easy to use.

I just have one problem:
The z-index handling seems to be wrong for me
I just have following code:

  <Pager
       clamp={{ next: 0 }}
       pageInterpolation={swipeCards}
       style={{ height: 180 }}>
              <View style={{ backgroundColor: "red", height: 50 }}>
                <Text>1</Text>
              </View>
              <View style={{ backgroundColor: "blue", height: 50 }}>
                <Text>2</Text>
              </View>
 </Pager>

Card with "1" is behind "2" but it should be the other way around.
When I start swiping the 1 behind 2 gets swiped away.

I tried to understand the code but was not able to fix it by myself. Do I need to handle zIndex somehow by myself?

Thanks again!

Scroll Flatlist when touch started from Pager

A have a Flatlist and the Pager is inside ListHeaderComponent prop. So I want to achieve scrolling the Flatlist from Pager area.
For example, I will touch the screen in the red square and will try to scroll up.

<FlatList
  onScroll={onScroll}
  showsVerticalScrollIndicator={false}
  data={data}
  renderItem={...}
  ListHeaderComponent={() => (
    <Pager
      activeIndex={activeSlide}
      onChange={setActiveSlide}
      clamp={{ prev: 0 }}
      clampDrag={{ prev: activeSlide === 0 ? 0 : 1 }}
      style={{ flex: 1, overflow: 'hidden', width: windowWidth }}
    >
          {thumbnails.map(img => (
          <Image
              key={img}
              source={{ uri: img }}
              resizeMode="cover"
              style={styles.mainImage}
            />
          ))}
   </Pager>
  )}
  ListFooterComponent={this._renderFooterComponent}
/>

Disable swipe gesture

I want to use only on click navigation.How I can stop swipe left/right functionality using finger swipe?

Vertical ScrollViews childs

Hi! I'm working with this library and i notice we can't put vertical scrollview inside the pager.

I found this bug in Android 9, with react native v0.61.5.

some idea?

interpolateNode instead of interpolate

Hi,

interpolate() is deprecated in reanimated2 and expo sdk 41.

Please upgrade to interpolateNode

const { interpolateNode } = require('react-native-reanimated');

and change all interpolate() calls to interpolateNode().

This might break for older versions though?

Cannot set Initial Index

Hello, I am using this library for a simple vertical slider, where the initial index needs to be set to 1. However, it renders at index 0 initially, until I start swiping or the page re-renders. I cannot seem to figure out why. It does not work horizontally, or even with PageProvider wrapping this. Here is an example of what I am doing, inside a functional component. Thanks.

const [activeIndex, onChange] = useState(1);
  return (
    <Pager
      onChange={onChange}
      initialIndex={1}
      activeIndex={activeIndex}
      style={{ flex: 1 }}
      type='vertical'>
      <Animated.View style={{ backgroundColor: '#777', flex: 1 }/>
      <Animated.View style={{ backgroundColor: '#555', flex: 1 }}>
      <Animated.View style={{ backgroundColor: '#333', flex: 1 }}>
    </Pager>
  );
};

Allow tinder like left and right swiping.

Hi Crowdlinker Team,

Thank you for the library, I've just tried it out and it felt really responsive. I was looking at a specific use case where the pager can register right-swiping to allow for the current card to be swiped right, rather than bringing the previous screen back. I was going through the props but I couldn't find anything that I could use.

Let me know if you need any other details regarding the usecase.

Super buggy behaviour after upgrade to EXPO 36

Hi,

I just upgraded to EXPO SDK 36 which includes React Native 0.61.4 and react-native-reanimated 1.4.0 and react-native-gesture-handler 1.5.0.

After upgrading, the whole Pager is broken for me.
I've uploaded you a video.

https://www.youtube.com/watch?v=COA_LwrWfK4&

So the first image is always working, but any index > 1 will start to act super weird. They stay in the transitioned position until I touch the screen and move it by 1 pixel. If I chose to take an element which is out of my adjacentChildOffset, it just displays nothing until I touch and move for a pixel.

Is there any chance you could have a quick look into this? My schedule on this app is for friday and I spent a decent amount of time upgrading to SDK 36 and this is the last puzzle piece that is broken now for me :(

Issues on low-end devices

Hi,

testing on low-end devices (iPhone 5, old Android and "not so old" android), I can see some heavy drops in FPS, which is fine so far. The real problem is that when I swipe fast, it happens to jump back again.

Lets say I am on slide 10 and swipe really fast to 17, it jumps back to 16 and back to 17. It looks like the activeIndex value gets the update "to late" while it was already transitioned to another screen and therefore, it jumps back and forth. If I keep swiping at a normal pace, it doesn't happen.

You have any idea how to optimize this or to prevent this? Changing SpringConfig? Somehow blocking swipe until some condition?

How to enable gesture in card stack, it is not working by default.

Android scrollable area isn't calculated correctly

First thanks for putting this pager out there!

It seems that recent changes to reanimated have changed how the scrollable are is being calculated on android. Our use case is using this library to horizontally page through smaller visible cards. On android the scrollable / swipeable are is only as large as the Page width, active indexed element, ie the green date below.

We have solved this by adding page width and height to the Page element. I can push up a PR with these changes, if this is how this should be solved. I am unaware of another solution.

How to use vertical infinite scrolling flatlist inside horizontal pager?

Not able to use both horizontal pager and children vertical scroll.

" > @crowdlinker/[email protected]" has incorrect peer dependency "react-native@^0.60.5"

Crash (iOS) setObject:atIndexedSubscript object cannot be nil

Sometimes, if I am to quick, I receive following crash:

It also happened while testing your example app. It's rare, but it happens now and then

TypeError in tests: Cannot read property 'ACTIVE' of undefined

I'm getting a TypeError when rendering a component which uses this package with react-test-renderer:

    TypeError: Cannot read property 'ACTIVE' of undefined

      at ACTIVE (node_modules/@crowdlinker/react-native-pager/src/pager.tsx:301:32)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6156:18)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8690:13)
      at beginWork$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10058:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14708:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14681:22)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14380:11)
      at node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2063:24
      at unstable_runWithPriority (node_modules/react-test-renderer/node_modules/scheduler/cjs/scheduler.development.js:697:12)
      at runWithPriority (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2013:10)

It comes down to the State object imported from react-native-gesture-handler, which I see is mocked in the jest setup file of this library. I also have it mocked, but no matter what I do (delete the mock, etc), my tests crash with the above error.