{"action":"opened","issue":{"url":"https://api.github.com/repos/kkemple/react-native-sideswipe/issues/22","repository_url":"https://api.github.com/repos/kkemple/react-native-sideswipe","labels_url":"https://api.github.com/repos/kkemple/react-native-sideswipe/issues/22/labels{/name}","comments_url":"https://api.github.com/repos/kkemple/react-native-sideswipe/issues/22/comments","events_url":"https://api.github.com/repos/kkemple/react-native-sideswipe/issues/22/events","html_url":"https://github.com/kkemple/react-native-sideswipe/issues/22","id":305064960,"number":22,"title":"changing image via buttons","user":{"login":"otusweb","id":1069914,"avatar_url":"https://avatars0.githubusercontent.com/u/1069914?v=4","gravatar_id":"","url":"https://api.github.com/users/otusweb","html_url":"https://github.com/otusweb","followers_url":"https://api.github.com/users/otusweb/followers","following_url":"https://api.github.com/users/otusweb/following{/other_user}","gists_url":"https://api.github.com/users/otusweb/gists{/gist_id}","starred_url":"https://api.github.com/users/otusweb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/otusweb/subscriptions","organizations_url":"https://api.github.com/users/otusweb/orgs","repos_url":"https://api.github.com/users/otusweb/repos","events_url":"https://api.github.com/users/otusweb/events{/privacy}","received_events_url":"https://api.github.com/users/otusweb/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-03-14T08:35:48Z","updated_at":"2018-03-14T08:35:48Z","closed_at":null,"author_association":"NONE","body":"\r\nPlease make sure these boxes are checked before submitting your issue!\r\n\r\nI'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.\r\n\r\nHere is my code:\r\n```\r\n  _renderItem({ itemIndex, currentIndex, item, animatedValue }) {\r\n    console.log(\"uri: \" + item);\r\n    return (\r\n      <Image\r\n        source={{ uri: item }}\r\n        style={{\r\n          flexDirection: \"row\",\r\n          backgroundColor: \"#000\",\r\n          width: Dimensions.get(\"window\").width,\r\n          height: carouselHeight\r\n        }}\r\n        resizeMode={Image.resizeMode.contain}\r\n      />\r\n    );\r\n  }\r\n\r\n  nextImage = () => {\r\n    const index = this.state.currentIndex + 1;\r\n    this.setState({ currentIndex: index });\r\n  };\r\n\r\n  previousImage = () => {\r\n    const index = this.state.currentIndex - 1;\r\n    this.setState({ currentIndex: index });\r\n  };\r\n\r\n  render = () => {\r\n    const self = this;\r\n    console.log(\"render:\" + self.state.currentIndex);\r\n    const exercise = self.props.exercise;\r\n    const imageURLs = exercise.images.map(image => image.url);\r\n    const { width } = Dimensions.get(\"window\");\r\n\r\n    return (\r\n      <View>\r\n        <SideSwipe\r\n          index={self.state.currentIndex}\r\n          itemWidth={width}\r\n          style={{ width, height: carouselHeight }}\r\n          data={imageURLs}\r\n          onIndexChange={index => {\r\n            console.log(\"on index change: \" + index);\r\n            self.setState({ currentIndex: index });\r\n          }}\r\n          renderItem={self._renderItem}\r\n        />\r\n\r\n        <TouchableOpacity\r\n          style={{\r\n            position: \"absolute\",\r\n            left: 20,\r\n            top: carouselHeight / 2 - 7\r\n          }}\r\n          onPress={self.previousImage}\r\n        >\r\n          <Image\r\n            source={previousIcon}\r\n            style={styles.changeButton}\r\n            resizeMode=\"center\"\r\n          />\r\n        </TouchableOpacity>\r\n        <TouchableOpacity\r\n          style={{\r\n            position: \"absolute\",\r\n            right: 20,\r\n            top: carouselHeight / 2 - 7\r\n          }}\r\n          onPress={self.nextImage}\r\n        >\r\n          >\r\n          <Image\r\n            source={nextIcon}\r\n            style={[styles.changeButton, { marginLeft: 36 }]}\r\n            resizeMode=\"center\"\r\n          />\r\n        </TouchableOpacity>\r\n      </View>\r\n    );\r\n  };\r\n}\r\n```\r\n\r\nrepro 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.\r\nThe render method is called and the currentIndex is 0, but the component fails to transition to the previous image\r\n\r\nexpected:\r\nafter tapping on previous button, the first image is shown\r\n\r\n\r\n\r\n```\r\n System:\r\n    OS: macOS High Sierra 10.13.3\r\n    CPU: x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz\r\n    Free Memory: 456.49 MB\r\n    Total Memory: 24.00 GB\r\n    Shell: /bin/bash - 3.2.57\r\n  Binaries:\r\n    Node: 8.9.4\r\n    Yarn: 1.3.2\r\n    npm: 4.6.1\r\n    Watchman: 4.9.0\r\n  Virtualization:\r\n    Docker: 1.12.1, build 6f9534c\r\n    Parallels: Not Found\r\n    Virtualbox: Not Found\r\n    VMware Fusion: Not Found\r\n  SDKs:\r\n    iOS:\r\n      Platforms: iOS 11.2, macOS 10.13, tvOS 11.2, watchOS 4.2\r\n    Android:\r\n      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\r\n      API Levels: 21, 22, 23, 24, 25, 26, 27\r\n  IDEs:\r\n    Android Studio: 3.0 AI-171.4443003\r\n    Atom: 1.23.3\r\n    VSCode: 1.21.0\r\n    Sublime Text: Build 3114\r\n    Xcode: Xcode 9.2 Build version 9C40b\r\n  Languages:\r\n    Bash: 3.2.57\r\n    Go: 1.7.1\r\n    Elixir: Not Found\r\n    PHP: 7.1.7\r\n    Python: 2.7.10\r\n    Ruby: 2.3.0p0\r\n  Browsers:\r\n    Chrome: 65.0.3325.124\r\n    Chrome Canary: Not Found\r\n    Firefox: 35.0.1\r\n    Firefox Developer Edition: Not Found\r\n    Firefox Nightly: Not Found\r\n    Safari: 11.0.3\r\n    Safari Technology Preview: Not Found\r\n  npmGlobalPackages:\r\n    @angular/cli: 1.4.2\r\n    @storybook/cli: 3.3.11\r\n    angular-cli: 1.0.0-beta.28.3\r\n    create-react-native-app: 1.0.0\r\n    envinfo: 4.2.1\r\n    express-generator: 4.14.1\r\n    grunt-cli: 1.2.0\r\n    hexo-cli: 1.0.2\r\n    jshint: 2.9.4\r\n    markdown-pdf: 7.0.0\r\n    mocha: 2.5.3\r\n    n: 2.1.0\r\n    node-inspector: 0.12.8\r\n    nodemon: 1.12.1\r\n    npm: 4.6.1\r\n    pg: 4.5.3\r\n    pg-hstore: 2.3.2\r\n    react-devtools: 3.1.0\r\n    react-native-cli: 2.0.1\r\n    react-native-git-upgrade: 0.2.7\r\n    react-native-rename: 2.2.2\r\n    rnpm: 1.9.0\r\n    sequelize-auto: 0.4.3\r\n    sequelize-cli: 2.4.0\r\n    skpm: 1.0.10\r\n    swagger: 0.7.5\r\n    swagger-jsdoc: 1.9.2\r\n    typescript: 1.8.10\r\n    uglify-js: 2.6.2\r\n    wscat: 1.0.0\r\n```"}}
{"actor":{"display_login":"otusweb"}}