Basic typescript example need

[Sub-Zero-1]

Is there any basic typescript example available? I really having troubles to get in to run.

[OliverEvans96]

@erdalugur - could you try again to format that message?

[erdalugur]

@OliverEvans96 thanks for feedback

[SirKadogan]

I got a typescript example to run by merging @erdalugur 's example with the basic js example from the repository. Here it is:

import React, { Component } from "react";
import { Text, View, SafeAreaView } from "react-native";

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

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

// interface Props {
//   carouselItems?: ItemProps;
// }

interface State {
  activeIndex: number;
  carouselItems: ItemProps[];
}

class CustomCarousel extends Component<any, State> {
  ref = React.createRef<any>();
  state = {
    activeIndex: 0,
    carouselItems: [
      {
        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",
      },
    ],
  };
  renderItem = ({ item, index }: { item: ItemProps; index: number }) => {
    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>
    );
  };

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

export default CustomCarousel;

I left the props interface there as it could be used as reference for passing down props to your component. You just need to change any in the class declaration statement for your props interface

[SirKadogan]

I have also added a functional component example in the issue mentioned above, for those who are interested.

[grafficmedia]

@SirKadogan creating your ref with type any defeats the purpose. Can we get an example where you use the real type of the Carousel?

[jihoon416]

@grafficmedia There is a @types/react-native-snap-carousel library which has good types (not perfect tho) if you are still looking for it.

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[Rahmah001]

I have also added a functional component example in the issue mentioned above, for those who are interested.

DId you get any?

[Rahmah001]

Please let Documentation include both CLass and functional Component structures.

You can also add Typescript too.

I couldn't use this, as typescript complained