Instructions.js

// @flow

import * as React from "react";
import { Component, StyleSheet, Text, View, Button } from "react-native";
import Swiper from "react-native-swiper";
import { graphql } from "react-apollo";
import PropTypes from "prop-types";

import SET_INSTRUCTIONS_SHOWN from "../graphql/mutations/setInstructinosShown";

const Slide = ({ style, styleText, text }) => (
  <View style={style}>
    <Text style={styleText}>{text}</Text>
  </View>
);

Slide.propTypes = {
  style: PropTypes.number,
  styleText: PropTypes.number,
  text: PropTypes.string.isRequired
};

Slide.defaultProps = {
  style: {},
  styleText: {}
};

class Introductions extends Component {
  constructor({ setInstructionsShown }) {
    super();
    this.setInstructionsShown = setInstructionsShown;
  }
  state = {
    buttonText: "Weiter >"
  };
  onClick = () => {
    if (this.swiper.state.index < this.swiper.state.total - 1) {
      this.swiper.scrollBy(1);
    } else {
      this.setInstructionsShown({
        variables: {
          isInstructionsShown: true
        }
      });
    }
    if (this.swiper.state.index === this.swiper.state.total - 1) {
      this.state.buttonText = "Los gehts!";
    }
  };
  render = () => (
    <View style={styles.container}>
      <Swiper
        ref={function(sw) {
          this.swiper = sw;
        }}
        style={styles.wrapper}
        loop={false}
      >
        <Slide
          style={styles.slide1}
          styleText={styles.text}
          text="Hello Swiper"
        />
        <Slide style={styles.slide2} styleText={styles.text} text="Beautiful" />
        <Slide
          style={styles.slide3}
          styleText={styles.text}
          text="And simple"
        />
      </Swiper>
      <Button
        style={styles.button}
        onPress={onClick}
        title={state.buttonText}
        accessibilityLabel={state.buttonText}
      />
    </View>
  );
}
/* const Introductions = ({ setInstructionsShown }) => {
  const state = {
    buttonText: "Weiter >"
  };

  const onClick = () => {
    if (swiper.state.index < swiper.state.total - 1) {
      swiper.scrollBy(1);
    } else {
      setInstructionsShown({
        variables: {
          isInstructionsShown: true
        }
      });
    }
    if (swiper.state.index === swiper.state.total - 1) {
      state.buttonText = "Los gehts!";
    }
  };
  return (
    <View style={styles.container}>
      <Swiper
        ref={function(sw) {
          swiper = sw;
        }}
        style={styles.wrapper}
        loop={false}
      >
        <Slide
          style={styles.slide1}
          styleText={styles.text}
          text="Hello Swiper"
        />
        <Slide style={styles.slide2} styleText={styles.text} text="Beautiful" />
        <Slide
          style={styles.slide3}
          styleText={styles.text}
          text="And simple"
        />
      </Swiper>
      <Button
        style={styles.button}
        onPress={onClick}
        title={state.buttonText}
        accessibilityLabel={state.buttonText}
      />
    </View>
  );
}; */

Introductions.propTypes = {
  setInstructionsShown: PropTypes.func.isRequired
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  wrapper: {},
  button: {
    alignSelf: "flex-end",
    position: "absolute",
    bottom: 35
  },
  slide1: {
    flex: 1,
    backgroundColor: "#9DD6EB",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  },
  slide2: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#97CAE5"
  },
  slide3: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#92BBD9"
  },
  text: {
    color: "#fff",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default graphql(SET_INSTRUCTIONS_SHOWN, {
  name: "setInstructionsShown"
})(Introductions);