chitezh/react-native-swiper-animated

Tinder-like swiper for react-native

react-native-swiper-animated's Issues

onFinish impossible to reach in stack

Because the PanHandlers are removed when you're on the last card in a stack, it's impossible to advance to the onFinish code. I've opened a pull request that adds a swipeThroughStack prop to the component which allows you to swipe on the last card in the stack. If your onFinish function does nothing, the last card will just reappear. (#38 )

Can it handle a large number of views

I wondered if it can handle a large number of cards, like in the case of a book that's 100's of pages long?

forceLeftSwipe() is not working properly

I have the following component with the swiper in which I want to trigger the swipe left and swipe right actions from 2 buttons:

export default class Events extends Component {
  constructor(props) {
    super(props);

    this.dislike = this.dislike.bind(this);
    this.like = this.like.bind(this);
  }

  dislike() {
    this.swiper.forceLeftSwipe();
  }

  like() {
    this.swiper.forceRightSwipe();
  }

  render() {
    return (
      <View style={styles.base}>
        <Swiper
          ref={ref => this.swiper = ref}
          style={styles.wrapper}
          showPagination={false}
          smoothTransition
          stack>
          <Slide
            image={{ uri: 'https://picsum.photos/400/300/?image=142' }}
            title="Card 1" />
          <Slide
            image={{ uri: 'https://picsum.photos/400/300/?image=240' }}
            title="Card 2" />
          <Slide
            image={{ uri: 'https://picsum.photos/400/300/?image=250' }}
            title="Card 3" />
          <Slide
            image={{ uri: 'https://picsum.photos/400/300/?image=255' }}
            title="Card 4" />

          <View style={styles.emptyStack}>
            <Text style={styles.text}>No more cards</Text>
          </View>
        </Swiper>

        <View>
          <TouchableOpacity onPress={this.dislike}>
            <Text>Dislike</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.like}>
            <Text>Like</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

When I click the "dislike" button that I have the swiper runs the swipe left animation until the end, but it's somehow put the card back, so the first card reappears. When I trigger the like button everything works as expected.

This happens on any other cards. For example, let's say I have 4 cards and I swipe right until I reach the Card 4, then when I am on the Card 4, I swipe left, so the Card 3 is reappearing.

jumpToIndex animation / inverted animations

Thanks for the great lib.
I've forked it to add support to animations when using jumpToIndex.
However I'm not making a PR because I've inverted the swiping directions. I think it makes more sense to swipe left to load the next cards and the opposite. It feels more natural to me, for example it's the same when using iBooks to change pages. (related article: https://ux.stackexchange.com/questions/71910/swipe-in-which-direction-to-get-to-the-next-newest-article)
Maybe it'd be useful to add a property to inverse the animations.

Also FWI I had to run additional commands to get the examples to run:

npm i # root folder
# in examples
npm i buffer
npm i react-native-vector-icons

swipedirection to left without stack not working

Is it possible to swipe left in normal mode without stack.
swipeDirection="left" is not working.

Invariant Violation error

Hi,

I am getting Invariant Violation error. "Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

I tried it with 1.3.1 and 1.4.0 versions. But still, I am facing the same issue.

In my component, I am running Swiper as

<Swiper stack loop showPagination={false} style={{padding:10}}> 
<View style={styles.slide1}>
    <Text style={styles.text}>Hello Swiper</Text>
  </View>
  <View style={styles.slide2}>
    <Text style={styles.text}>Beautiful</Text>
  </View>
</Swiper>

It is just like shown in the example.

Unable custom Dot??

how to custom style for Dot? . I want dot bigger in my app. Can you help me?

Unable to resolve module `buffer

Hello,
Just hooked up a raw react-native project and try to use this fancy animation.
After install react-native-swiper-animated using npm
Try to run the example code.
But always got a problem:

bundling: UnableToResolveError: Unable to resolve module `buffer` from `/Users/kevinlee/trunk_souceTree/ReactMobile/node_modules/randombytes/node_modules/safe-buffer/index.js`: Module does not exist in the module map or in these directories:
  /Users/kevinlee/trunk_souceTree/ReactMobile/node_modules/randombytes/node_modules
,   /Users/kevinlee/trunk_souceTree/ReactMobile/node_modules
,   /Users/kevinlee/trunk_souceTree/node_modules

Tried all the methods suggested like

1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.

Still got this problem, and can not run successfully.

Can I update array-data dynamically?

Thanks for the great module. I am trying to replace an array that provides data to swiper cards. I tried it using setState() inside onFinish() function. But it is not working.

How to use forceRightSwipe ?

Hello, I add a button in the view. When I click the button, I want to swipe right automatically. However, I don't know how to use the method forceRightSwipe. Cold you please give me a help?

Objects on swiper don't update with state

I've noticed that when state changes the components referencing the state variables don't update unless I swipe to the next card and then back again. Am I missing something I need to do?

swipeDirection left not working with loop

This is the smooth swiper library from others. I want to implement loop in stack mode with left swipe. But swipeDirection left is not working when stack and loop is enabled. Is there any way to achieve this functionality.

How can I get index of the current card? Can I jump on the specific card index?

Thanks for the great module. I want to know when I reach at the end of array. Is there some way I can detect swipeLeft and swipeRight events? I could track the index using those.

Textinputs carry text from one slide to the other

If you enter text in one slide's text input and swipe, the same text appears in the next slide

Need to show back side cards in the right side

Hi
I am using your module and now I am getting the design like this :

But the back cards are displaying in the bottom but I want to display them on right side
Can you tell me how to do that ?

swipe on android

i use this on android not working, any idea about that? thanks

Can not swiper the last card of stack

can i enable swipe of the last card of stack?

its normal?

disable Top Swipe and Bottom Swipe

how to disable Top Swipe and Bottom Swipe ?

Is there any function call like "onFinishLoop()"?

Hi thanks for the awesome package. I want to update state after finish every round. onFinish() function work only we set loop to {false}. Thanks.

Constructors of Child components are called every time I changed page

Hey, thanks for cool library. I got problems with rendering of heavy components in stack.

I have static large array of items with static unique keys.

 <Swiper
        paginationLeft={""}
	paginationRight={""}
	smoothTransition
	stack
	dragDownToBack
        stackOffsetY={-7}
	stackDepth={3}
	swiper={false}
	showToolbar={false}
	showPagination={false}
	dragY={false}
  >
    {items.map(item => (
      <FooBar key={item.id}>
      </FooBar>
      ))}
</Swiper>

Those FooBar components are heavy, I have WebView inside. So I want them to update, not create on each page changing.

I believe that reason is static keys here:

react-native-swiper-animated/src/Swiper.js

Lines 613 to 620 in d11913c

	return (
	<Animated.View
	key={i}
	style={animatedCardStyles}
	{...panHandlers}
	>
	{card}
	</Animated.View>);

where is the leaf style ?

hi @chitezh , thanks for your great work.
is there styles for the leaf.gif ?

v2 - Reimplement using react-native-gesture-handler

Change direction

Is it possible for me to change the swipe direction?
Currently when I swipe to the right it moves to next page, I need to go to next page by swiping to the left.

Unable to make swipe methods to make work with stack

    onRightSwipe: () => {},
    onLeftSwipe: () => {},
    onRemoveCard: () => {},

Detected swipe left or right

Thank your good library.
My card has swipe left or right. But how to detected swipe left or right and callback function?
@chitezh

It is possible in this package?

Warning: BackAndroid is deprecated. Please use BackHandler instead.

Got this warning after using this library. Probably somewhere in this library or its dependencies?

Potential solution reference: react-navigation/react-navigation#1597

Loop in Stack mode

Is it possible?

Can I render the Swiper children dynamically instead of hard-coded?

I need to decide the number of cards to render in real-time. How can I do that instead of hard-coding all children in advance?