Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

changing image via buttons

See original GitHub issue

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