import { Stack, StackItem, StackTitle } from "react-gesture-stack";
// optional styles
import "react-gesture-stack/src/styles.css";

function Simple() {
  const [index, setIndex] = React.useState(0);

  return (
    <Stack
      onIndexChange={i => setIndex(i)}
      index={index}
      style={{ width: "400px", height: "600px" }}
      items={[
        {
          title: <StackTitle title="First title" />,
          content: (
            <StackItem>
              <button onClick={() => setIndex(index + 1)}>View 2</button>
            </StackItem>
          )
        },
        {
          title: <StackTitle title="Second title" />,
          content: (
            <StackItem>
              <button onClick={() => setIndex(index + 1)}>View 3</button>
            </StackItem>
          )
        },
        {
          title: <StackTitle title="Third title" />,
          content: (
            <StackItem>
              <div>No more!</div>
            </StackItem>
          )
        }
      ]}
    />
  );
}