kkemple / react-native-sideswipe Goto Github PK

Sideswipe doesn't scroll when within React Native's modal component.
I believe it's related to this: facebook/react-native#14295

I'd love to keep using sideswipe, would there be any chance of a fix for this?

• I ran [envinfo](https://www.npmjs.com/package/envinfo) and added results to issue (if bug related) // <-- This is not needed since this is a usage question
• I created a reproduction example in expo (if bug related)

See Expo example at https://snack.expo.io/@evanchan/sideswipe-issue.

I want to use the sideswipe to display 1 image at a time in the center, which is similar to:

However, what I am getting is:

I don't want to show left and right neighbor of the image in the center. What is the right way to do it, or is it possible?

Hey @kkemple

Thanks for the great and simple library. I managed to get working for one of my project without any problem (once I had read #23 that is :-))

I found an issue when setting the index of the item to be rendered first. It really only works when setting the value is equal to 0.

I have created a snack to reproduce the issue.
Basically I am displaying a bunch of text in a view

const data = [
  { text: 'THIS IS TEXT 0' },
  { text: 'THIS IS TEXT 1' },
  { text: 'THIS IS TEXT 2' },
  { text: 'THIS IS TEXT 3' },
  { text: 'THIS IS TEXT 4' }
];

and setting the item to be displayed first to entry 3

<SideSwipe
          index={3}
...

What's happening is that THIS IS TEXT 0 shows up on screen first. As soon as I start swiping, even by the slightest swipe movement, the text updates to THIS IS TEXT 3 as expected.

To reproduce:

• Load snack
• Start swiping

Observe text changing from THIS IS TEXT 0 to THIS IS TEXT 3

Is it possible to pass a parameter to this component to specify whether the carousel runs vertically instead of horizontally?

Hello,

Could you please share the full project for the example you set with the planets swipe.
I would like to do something close to this philosophy.

Thank you very much

Thanks a lot for providing this excellent library but I wonder about the efficiency of this library for large data set say 2000 data in my data array.

How fast these 2000 data will be loaded and how smooth the scrolling between the individual cards (dynamic card).

Kindly suggest me.

Thanks in advance.

On right-to-left content, swiping moves the slides to the opposite direction.

I guess it should be an easy fix, probably checking I18nManager.isRTL and changing some -/+ would do the trick.

When swiping from close to the screen edge, the slider gets stuck, and a bit of the image in the next index is visible. I got it on the Emulator (Pixel 2) and device (Pixel). Couldn't get it on snack.

<Carousel
  itemWidth={width}
  style={{ width }}
  useVelocityForIndex={false}
  data={images}
  threshold={0}
  contentOffset={0}
  renderItem={({ item }) => (
    <View key={item.id} style={{ width, height: height * 0.4 }}>
      <Image source={item.source} />
    </View>
  )}
/>

• I couldn't reproduce it on snack, though is happening on a real device and on local virtual device.
• I ran envinfo:
  React Native Environment Info:
  System:
  OS: macOS High Sierra 10.13.6
  CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Memory: 1.53 GB / 16.00 GB
  Shell: 3.2.57 - /bin/bash
  Binaries:
  Node: 8.12.0 - /usr/local/bin/node
  Yarn: 1.12.3 - /usr/local/bin/yarn
  npm: 6.4.1 - /usr/local/bin/npm
  Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
  iOS SDK:
  Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
  Android SDK:
  API Levels: 23, 26, 27, 28
  Build Tools: 23.0.1, 26.0.1, 26.0.3, 27.0.3, 28.0.3
  System Images: android-26 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom
  IDEs:
  Android Studio: 3.2 AI-181.5540.7.32.5014246
  Xcode: 10.1/10B61 - /usr/bin/xcodebuild
  npmPackages:
  react: 16.5.0 => 16.5.0
  react-native: 0.57.0 => 0.57.0
  npmGlobalPackages:
  react-native-cli: 2.0.1
  react-native-git-upgrade: 0.2.7

This is not a bug it is something I have struggled with and I would like to share it with others, would gladly create a pull request in read me if agreed.

onPress not firing inside the carousel rendered items

On android and IOS real device if a user tries to press a TouchableWithoutFeedback element or touchableOpacity the event won't fire in most cases since the dragging/swipe starts with the touch. (onPress in emulator works perfectly)

To fix this issue I have added the following:

shouldSwipe:function({ dx, dy}){
   return  dx < -30 ||  dx > 30;
},
render: function(){
return (
   <SideSwipe
        ....
	shouldCapture={(gestureState) => this.shouldSwipe(gestureState)}
   />);
}

The code above utilizes the shouldCapture property to start the swiping event once the user drags the swipe element for a small bit which gives the onPress event a chance to fire before swiping

If I change orientations while a SideSwipe instance is rendered, the items will initially be misaligned, see screenshot below. If I swipe around a bit the carousel item will lock back into its proper place and work fine from that point on. The problem seems to only exist immediately after the orientation change. No idea if this is a bug or if there's something I can add to get around it, but any help would be very much appreciated!

Code:

    <View style={{flex: 1}}>
      <SideSwipe
        index={ix}
        itemWidth={width}
        style={{width}}
        data={images}
        contentOffset={0}
        onIndexChange={ix => setIx(ix)}
        renderItem={({item: image, itemIndex}) => {
          return (
            <GalleryImage image={image} index={itemIndex} navigation={navigation} />
          )
        }}
      />
  </View>

Example:

Initially loaded with portrait orientation:

Immediately after switching to landscape:

After swiping around in landscape:

Following your example:

import { View, Dimensions, ScrollView } from 'react-native';

export default class SweetCarousel extends Component {
  state = {
    currentIndex: 0,
  };

  render = () => {
    // center items on screen
    const { width } = Dimensions.get('window');
    const contentOffset = (width - Card.WIDTH) / 2;

    return (
      <ScrollView>
        <SideSwipe
          index={this.state.currentIndex}
          itemWidth={Card.WIDTH}
          style={{ width }}
          data={data}
          contentOffset={contentOffset}
          onIndexChange={index =>
            this.setState(() => ({ currentIndex: index }))
          }
          renderItem={({ itemIndex, currentIndex, item, animatedValue }) => (...)}
        />

        ...
      </ScrollView>
    );
  };
}

When using SideSwipe in a ScrollView, touch events on SideSwipe are unconditionnally captured and prevent the screen from scrolling. The culprit seems to be:

onStartShouldSetPanResponder: () => true,

It always makes SideSwipe the pan responder has soon has we touch it. SideSwipe should be a bit more lax about being the responder. Using the shouldCapture callback works fine for me:

onStartShouldSetPanResponder: () => this.handleGestureCapture,

I'm trying to make the first item the item at 1 index, but for some reason, the lib jumps to the end and don't allow me to do that. Any Help?

I am trying to use a carousel inside a TabNavigator. The problem is on iOS when I slide the carousel the tab navigator is also sliding. Tried to use the callback function from the carousel to set the parent tabNavigator swipeEnabled property to false. and then back to true when the touch is terminated but it didn’t work.
Do you have any suggestions. Many Thanks!

How can I do to prevent the user from moving around the different views? and manage the current changes Index for my own.
Basically what I want is to cancel the swipe.

Can someone help me?

It would be nice to have the ability to add logic when the drags start e.g. lock surrounding scroll view and unlock it again when the drag finishes.

Context: I use it in a Scrollview

Hi, I'd love to use this nice slim library in my recent project but I have to switch to something else mostly because it lacks RTL support (in RTL the swipe gesture moves slides to the opposite direction); I guess it should be an easy fix, probably checking I18nManager.isRTL and changing some -/+ would do the trick.
My other suggestions, if they fit in the scope of this project, would be adding the ability to loop through data by adding some paddings to the data and having autoplay option, just like a slide show.

Feature request, i want to be able to tap on an image to open it in a light box. All I really need is a onTap method that I can provide.

When I set the currentIndex = 1, the offset is not applied until the sideswipe is interacted with. Setting the currentIndex = 0 works correctly.

First load (incorrect):

After Interaction (correct):

Thank you!

If you guys put some demo code here, it'll be helpful for people to learn how to use it.
And for react native development, we really appreciate that you guys build such useful components.

I’m curious, why didn’t you choose to use the prop pagingEnabled on FlatList for snapping? Also why not use Animated.event and leverage useNativeDriver instead of setValue for mapping your Animated.Value?

After updating React-Native to v.0.59.1, I'm no longer able to disable the user's ability to swipe through cards in the SideSwipe component with shouldCapture={() => false}.

I've tried disabling this via the onIndexChange prop, but also no dice. I've also tried disabling gestures with the pointerEvents prop, but that also seemingly will not work for this use case.

This is an excerpt of our render method for the component that houses our instance of SideSwipe. Any help would be greatly appreciated!

<View style={styles.alignCenter}>
        <SideSwipe
          index={indexOfScreen}
          itemWidth={MACHINE_CARD_WIDTH + 8}
          style={styles.carousel}
          data={screens}
          shouldCapture={() => false}
          contentOffset={contentOffset}
          renderItem={({ currentIndex, item }) => this._renderCarouselItem({ currentIndex, item })}
        />
</View>

EnvInfo:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 3.20 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 11.9.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.10.2 - ~/.npm-global/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Utilities:
Make: 3.81 - /usr/bin/make
GCC: 10.14. - /usr/bin/gcc
Git: 2.20.1 - /usr/local/bin/git
Servers:
Apache: 2.4.34 - /usr/sbin/apachectl
Virtualization:
Docker: 18.09.2 - /usr/local/bin/docker
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 18, 19, 21, 23, 25, 26, 27, 28, 29
Build Tools: 27.0.3, 28.0.3
System Images: android-21 | ARM EABI v7a, android-21 | Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Atom: 1.38.2
Emacs: 22.1.1 - /usr/bin/emacs
Nano: 2.0.6 - /usr/bin/nano
VSCode: 1.36.1 - /usr/local/bin/code
Vim: 8.0 - /usr/bin/vim
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
Languages:
Bash: 3.2.57 - /bin/bash
Go: 1.12.5 - /usr/local/go/bin/go
Java: 1.8.0_201 - /usr/bin/javac
Perl: 5.18.4 - /usr/bin/perl
PHP: 7.3.4 - /usr/local/bin/php
Python: 2.7.10 - /usr/bin/python
Ruby: 2.3.7 - /usr/bin/ruby
Databases:
SQLite: 3.24.0 - /usr/bin/sqlite3
Browsers:
Chrome: 76.0.3809.87
Firefox Developer Edition: 69.0
Safari: 12.1.2

Please make sure these boxes are checked before submitting your issue!

• I ran [envinfo](https://www.npmjs.com/package/envinfo) and added results to issue (if bug related)
• I created a reproduction example in expo (if bug related)

Firstly, thanks for the work you've done on this library and for open sourcing it so that I have a great starting place. Also, loved your article on medium titled "I’m an imposter."

I'm finding it a little frustrating to implement in practice though, which may just be the result of a couple cognitive disconnects that could be easily cleared up with updates to the documentation.

If you'll allow me, let me first explain the problem I'm struggling to solve. This screenshot shows my implementation on the left and the target on the right (twitter's highlight card swiper), which is basically like this example of yours, which doesn't seem to have a snack associated with it. Or maybe I'm not looking hard enough.
.

And here's where I am with the code so far...

class EventList extends React.Component {
  state = {
    currentIndex: 0,
  };

  render() {
    const peek = 20;
    const gutter = peek / 4;
    const cardWidth = layout.window.width - gutter * 2 - peek * 2;
    // const offset = 25;
    const headerHeight = 80;
    return (
      <SideSwipe
        data={this.props.data && this.props.data.me.teams}
        extractKey={team => team.id}
        index={this.state.currentIndex}
        itemWidth={cardWidth}
        // style={{ width: layout.window.width }}
        contentContainerStyle={{ backgroundColor: colors.base.hint }}
        // contentOffset={offset}
        threshold={layout.window.width / 4}
        onIndexChange={idx =>
          this.setState(state => {
            const targetIndex = idx; // clamp to inc/dec by max 1/-1
            return { currentIndex: targetIndex };
          })
        }
        renderItem={({ itemIndex, currentIndex, item, animatedValue }) => {
          const backgroundColor = backgroundColors[itemIndex % backgroundColors.length];
          return (
            <View
              style={{
                width: cardWidth,
                height: layout.window.height - (headerHeight + peek),
                margin: gutter,
                backgroundColor,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={{ color: colors.white, fontSize: 25 }}>{item.event.title}</Text>
              <Text style={{ color: colors.white }}>currentIndex: {currentIndex}</Text>
              <Text style={{ color: colors.white }}>itemIndex: {itemIndex}</Text>
              <Button
                title="Logout"
                onPress={this.props.screenProps.onLogout}
                accentColor={colors.white}
                hollow
                condensed
              />
            </View>
          );
        }}
      />
    );
  }
}

My problem is that I cannot seem to figure out how to keep the card centered in the view with equal parts of the sibling cards "peeking" out on either side. I've been playing with various values for itemWidth and contentOffset, which was my best guess as to the problem. I stopped trying to do math and started plugging in static values to see if I could get a better idea how inc/dec them affected the behavior. I'm lost. I went back to the docs to try and understand, but am left with these questions...

1. What is itemWidth exactly? The docs say // width of each child, but I'm unclear if the "child" includes my card width + the gutter on each side + the peek value of each sibling card (essentially the window.width) or it's really just the width of the card itself. I'm going with the latter.
2. What is contentOffset? The docs say // horizontal padding on carousel but I'm not sure what you mean by "carousel". Do you mean padding around the SideSwipe component, or around my card (e.g. peek + gutter)?
3. I was also confused about the difference between flatListStyle and style since both are documented with the exact same comment // style for the FlatList element

I'd probably be able to figure this all out if you'd point me to this reference implementation...

I have implemented slideSwipe, My page should show two sliders. Current issue is when i swipe left to right to first slider there is no issue. But when I swipe to 2nd Slider, first slider also moving

Any idea how to resolved.

     <View style={styles.outerContainer}>
          <SideSwipe
            index={currentIndex}
            itemWidth={WIDTH}
            style={{ width }}
            data={data}
            threshold={50}
            contentOffset={contentOffset}
            onIndexChange={(index) => setCurrentIndex(index)}
            renderItem={({ itemIndex, currentIndex, item, animatedValue }) => (
              <SliderItem
                {...item}
                data={item}
                type={type}
                index={itemIndex}
                currentIndex={currentIndex}
                animatedValue={animatedValue}
              />
            )}
          />
        </View>

I have separate components for both sliders. Any idea where i made a mistake

Frankly, the one thing you were working so hard to avoid, you achieved: a really poor scrolling experience. It just doesn't feel and move naturally (if I compare it against, for example, Foursquare's carousel, which works like a wonder).

Like I need to drag way over half a screen to get an item to scroll. If I decrease the threshold, it would still need a very long swipe and then scroll multiple items at a time. It just doesn't feel right.

I tried really hard to like this but I'm gonna have to dump it for something else.

Any way to disable swipe for some conditions?

Did it have any option to scroll animagtion with this package

It would be perfect if it supported auto-play

Please make sure these boxes are checked before submitting your issue!

I'm using this component (thanks for creating it!) and I want to add a previous/next image button on top of the control. I added the controls and hooked up the method to change the image via setState, and it works for one transition and then fails.

Here is my code:

  _renderItem({ itemIndex, currentIndex, item, animatedValue }) {
    console.log("uri: " + item);
    return (
      <Image
        source={{ uri: item }}
        style={{
          flexDirection: "row",
          backgroundColor: "#000",
          width: Dimensions.get("window").width,
          height: carouselHeight
        }}
        resizeMode={Image.resizeMode.contain}
      />
    );
  }

  nextImage = () => {
    const index = this.state.currentIndex + 1;
    this.setState({ currentIndex: index });
  };

  previousImage = () => {
    const index = this.state.currentIndex - 1;
    this.setState({ currentIndex: index });
  };

  render = () => {
    const self = this;
    console.log("render:" + self.state.currentIndex);
    const exercise = self.props.exercise;
    const imageURLs = exercise.images.map(image => image.url);
    const { width } = Dimensions.get("window");

    return (
      <View>
        <SideSwipe
          index={self.state.currentIndex}
          itemWidth={width}
          style={{ width, height: carouselHeight }}
          data={imageURLs}
          onIndexChange={index => {
            console.log("on index change: " + index);
            self.setState({ currentIndex: index });
          }}
          renderItem={self._renderItem}
        />

        <TouchableOpacity
          style={{
            position: "absolute",
            left: 20,
            top: carouselHeight / 2 - 7
          }}
          onPress={self.previousImage}
        >
          <Image
            source={previousIcon}
            style={styles.changeButton}
            resizeMode="center"
          />
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            position: "absolute",
            right: 20,
            top: carouselHeight / 2 - 7
          }}
          onPress={self.nextImage}
        >
          >
          <Image
            source={nextIcon}
            style={[styles.changeButton, { marginLeft: 36 }]}
            resizeMode="center"
          />
        </TouchableOpacity>
      </View>
    );
  };
}

repro step, tap on next image, image changes correctly, then tap on previous button: image does not change, tap again, error is thrown because index is -1.
The render method is called and the currentIndex is 0, but the component fails to transition to the previous image

expected:
after tapping on previous button, the first image is shown

 System:
    OS: macOS High Sierra 10.13.3
    CPU: x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
    Free Memory: 456.49 MB
    Total Memory: 24.00 GB
    Shell: /bin/bash - 3.2.57
  Binaries:
    Node: 8.9.4
    Yarn: 1.3.2
    npm: 4.6.1
    Watchman: 4.9.0
  Virtualization:
    Docker: 1.12.1, build 6f9534c
    Parallels: Not Found
    Virtualbox: Not Found
    VMware Fusion: Not Found
  SDKs:
    iOS:
      Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2
    Android:
      Build Tools: 22.0.1, 23.0.1, 24.0.1, 24.0.2, 25.0.1, 25.0.3, 26.0.1, 26.0.2, 27.0.3
      API Levels: 21, 22, 23, 24, 25, 26, 27
  IDEs:
    Android Studio: 3.0 AI-171.4443003
    Atom: 1.23.3
    VSCode: 1.21.0
    Sublime Text: Build 3114
    Xcode: Xcode 9.2 Build version 9C40b
  Languages:
    Bash: 3.2.57
    Go: 1.7.1
    Elixir: Not Found
    PHP: 7.1.7
    Python: 2.7.10
    Ruby: 2.3.0p0
  Browsers:
    Chrome: 65.0.3325.124
    Chrome Canary: Not Found
    Firefox: 35.0.1
    Firefox Developer Edition: Not Found
    Firefox Nightly: Not Found
    Safari: 11.0.3
    Safari Technology Preview: Not Found
  npmGlobalPackages:
    @angular/cli: 1.4.2
    @storybook/cli: 3.3.11
    angular-cli: 1.0.0-beta.28.3
    create-react-native-app: 1.0.0
    envinfo: 4.2.1
    express-generator: 4.14.1
    grunt-cli: 1.2.0
    hexo-cli: 1.0.2
    jshint: 2.9.4
    markdown-pdf: 7.0.0
    mocha: 2.5.3
    n: 2.1.0
    node-inspector: 0.12.8
    nodemon: 1.12.1
    npm: 4.6.1
    pg: 4.5.3
    pg-hstore: 2.3.2
    react-devtools: 3.1.0
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7
    react-native-rename: 2.2.2
    rnpm: 1.9.0
    sequelize-auto: 0.4.3
    sequelize-cli: 2.4.0
    skpm: 1.0.10
    swagger: 0.7.5
    swagger-jsdoc: 1.9.2
    typescript: 1.8.10
    uglify-js: 2.6.2
    wscat: 1.0.0

Hi! I'm trying to created a simple carousel based off the code from your planet example. Excuse how messy things are I'm just trying to get things going. So I created a new component called Card and when I include it and it's parameters in the Side Swipe component the offset makes things not centered after a few swipes. Here is my code:
app.js:

import React, { Component } from 'react';
import {
  ActivityIndicator,
  Image,
  Text,
  View,
  StyleSheet,
  Dimensions,
  StatusBar,
  Platform,
} from 'react-native';
import { Constants, Font } from 'expo';
import SideSwipe from 'react-native-sideswipe'; // Version can be specified in package.json

import { Planet, BottomBar } from './components';
import Card from "./src/Card.js"

const { width } = Dimensions.get('window');

const planets = [
  { title: '12323', value: '123123', abbr: 'SU123123N' },
  { title: 'Merc1234ury', value: 'mer454cury', abbr: 'M34qRC' },
  { title: 'Suasdn', value: 'sdfdfun', abbr: 'SdfsdfUN' },
  { title: 'Mezxczxcrcury', value: 'mervcbcvbcury', abbr: 'MzxcRC' },
  { title: 'Suhhhn', value: 'shhhun', abbr: 'ShhUN' },
  { title: 'Suasdn', value: 'sdfdfun', abbr: 'SdfsdfUN' },
  { title: 'Mezxczxcrcury', value: 'mervcbcvbcury', abbr: 'MzxcRC' },
  { title: 'Suhhhn', value: 'shhhun', abbr: 'ShhUN' },


];

export default class App extends Component {
  state = {
    currentIndex: 0,
    fontsLoaded: false,
  };

  componentDidMount = async () => {
    await Font.loadAsync({
      dhurjati: require('./assets/Dhurjati-Regular.ttf'),
      'inconsolata-regular': require('./assets/Inconsolata-Regular.ttf'),
      'inconsolata-bold': require('./assets/Inconsolata-Bold.ttf'),
      'libre-barcode-39': require('./assets/LibreBarcode39-Regular.ttf'),
    });

    this.setState({ fontsLoaded: true });
  };

  render = () => {
    const { width } = Dimensions.get('window');
    const offset = (width - Card.WIDTH)/2

    return !this.state.fontsLoaded
      ? <View style={[styles.container, { justifyContent: 'center' }]}>
          <ActivityIndicator color="white" />
        </View>
      : <View style={styles.container}>
          <StatusBar barStyle="light-content" />


          <SideSwipe
            data={planets}
            shouldCapture={() => true}
            style={{ width }}
            contentContainerStyle={{  paddingTop: 50, }}
            itemWidth={Card.WIDTH }
            threshold={Card.WIDTH}

            extractKey={item => item.value}
            contentOffset={offset}
            onIndexChange={index =>
              this.setState(() => ({ currentIndex: index }))}
            renderItem={({ itemIndex, currentIndex, item, animatedValue }) => (
              <Card

                planet={item}
                index={itemIndex}
                currentIndex={currentIndex}
                animatedValue={animatedValue}
              ></Card>
            )}
          />

        </View>;
  };



}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#2196f3',
  },
  fill: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  title: {
    fontFamily: 'dhurjati',
    fontSize: 32,
    color: 'white',
    backgroundColor: 'transparent',
    textAlign: 'center',
    marginTop: 8,
    letterSpacing: 1.6,
    zIndex: 2,
    alignSelf: 'center'
  },
  titlePlatformSpecific: Platform.select({
    ios: {
      marginBottom: 10,
    },
  }),
});

Card.js:

import React, { Component } from 'react';
import { StyleSheet, Text, View, Dimensions  } from 'react-native';

//Card component
const { width: screenWidth } = Dimensions.get('window');
const width = screenWidth - 50;
export class Card extends Component {
  static WIDTH = width;
  render() {
    return (
      <View style={styles.viewStyle}>
        <Text style={styles.bigblue}>YOYOYO</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  bigblue: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 30,
  },
  viewStyle: {
  backgroundColor: '#fff',
  justifyContent: 'center',

  width: 300,
  shadowColor: '#000000',
  shadowOffset: {
    width: 0,
    height: 3
  },
  flex: 1,
  borderRadius: 3,
  shadowOpacity: .2,
  margin: 10,
  height: 500,



  },
});


export default Card;
``

I tried implementing the code from an example of sideswipe (https://snack.expo.io/@kkemple/sideswipe-example), but kept running into an "Invariant Violation: Element type is invalid" error. I've tried everything I could, but couldn't get rid of it. Looking at the other open issues, it looks like this repo might be incompatible with the latest version of Expo / React Native, as the Snack linked above gets an error as well.

I have a sideswipe view that contains a data array that the user can add and remove items to. However, when I try sliding the view to another item in the array, the carousel locks itself to the item with index 0, even though the container's currentIndex state and the matching prop on the items themselves are some other index.

envinfo results:
System:
OS: Linux 4.4 Ubuntu 16.04.3 LTS (Xenial Xerus)
CPU: x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Memory: 5.82 GB / 15.89 GB
Shell: 4.3.48 - /bin/bash
Binaries:
Node: 8.9.1 - /usr/bin/node
npm: 6.2.0 - /usr/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
Utilities:
Make: 4.1 - /usr/bin/make
GCC: 5.4.0 - /usr/bin/gcc
Git: 2.7.4 - /usr/bin/git
IDEs:
Nano: 2.5.3 - /bin/nano
Vim: 7.4 - /usr/bin/vim
Languages:
Bash: 4.3.48 - /bin/bash
Java: 1.8.0 - /usr/bin/javac
Perl: 5.22.1 - /usr/bin/perl
Python: 2.7.12 - /usr/bin/python
Ruby: 2.2.7 - /usr/share/rvm/rubies/ruby-2.2.7/bin/ruby
Databases:
SQLite: 3.11.0 - /usr/bin/sqlite3
Browsers:
Chrome: 62.0.3202.94

Please make sure these boxes are checked before submitting your issue!

• [ X ] envinfo results
• [ X ] I created a reproduction example here (if bug related)

Added keyboardShouldPersistTaps={'always'} under <AnimatedFlatlist on line 119 of carousel fixes issue.

Basically, ScrollViews have a default behaviour where any touches are, of course, sent back to the ScrollView. Adding the above fixes the issue where any touches to update anything inside the SideSwipes children are first consumed to remove the keyboard. The above fixes this!.

Swipe animation is not smooth in android deviece. for refrejce you can check your space sideswape project

https://snack.expo.io/@kkemple/spaced-sideswipe

Please make sure these boxes are checked before submitting your issue!

• I ran [envinfo](https://www.npmjs.com/package/envinfo) and added results to issue (if bug related)
• I created a reproduction example in expo (if bug related)