Add functional component example to documentation

Is this a bug report, a feature request, or a question?

Feature request

Have you followed the required steps before opening a bug report?

Yes

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn't already been reported.
• I am using the latest plugin version.
• I am following the issue template closely in order to produce a useful bug report.

Description

I would suggest the the addition of a basic example using a functional component, as it is mostly the standard in React at the moment. Since the library also includes typescript, an example for that would be nice as well.

If you would introduce me how to submit these changes to the repo, I'd gladly do that.

I've submitted a typescript example here already: #642

And here's my suggestion for a basic functional component (also using typescript, but easy to update for JS):

import React, { useState, useCallback, useRef } from "react";
import { Text, View, SafeAreaView } from "react-native";

import Carousel from "react-native-snap-carousel";

interface ItemProps {
  title: string;
  text: string;
}

interface CustomCarouselProps {}
interface RenderItemProps {
  item: ItemProps;
  index: number;
}

const exampleItems = [
  {
    title: "Item 1",
    text: "Text 1",
  },
  {
    title: "Item 2",
    text: "Text 2",
  },
  {
    title: "Item 3",
    text: "Text 3",
  },
  {
    title: "Item 4",
    text: "Text 4",
  },
  {
    title: "Item 5",
    text: "Text 5",
  },
];

const CustomCarousel: React.SFC<CustomCarouselProps> = () => {
  const [activeIndex, setActiveIndex] = useState<number>(0);
  const [carouselItems, setCarouselItems] = useState<ItemProps[]>(exampleItems);
  const ref = useRef(null);

  const renderItem = useCallback(({ item, index }: RenderItemProps) => {
    return (
      <View
        style={{
          backgroundColor: "floralwhite",
          borderRadius: 5,
          height: 250,
          padding: 50,
          marginLeft: 25,
          marginRight: 25,
        }}
      >
        <Text style={{ fontSize: 30 }}>{item.title}</Text>
        <Text>{item.text}</Text>
      </View>
    );
  }, []);

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "rebeccapurple", paddingTop: 50 }}>
      <View style={{ flex: 1, flexDirection: "row", justifyContent: "center" }}>
        <Carousel
          layout={"default"}
          ref={ref}
          data={carouselItems}
          sliderWidth={300}
          itemWidth={300}
          renderItem={renderItem}
          onSnapToItem={(index: number) => setActiveIndex(index)}
        />
      </View>
    </SafeAreaView>
  );
};

export default CustomCarousel;

Start by reviewing the README and the project's dedicated documentation, then compare the related TypeScript example in issue #642. Add a basic functional React Native carousel example, and confirm that the documentation presents a usable example for readers.