meliorence / react-native-snap-carousel

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.
BSD 3-Clause "New" or "Revised" License
10.27k stars 2.27k forks source link

Is it possible to put Carousel inside GiftedChat #689

Open Egizas opened 4 years ago

Egizas commented 4 years ago

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

I am using: "react-native-gifted-chat": "^0.13.0", "react-native-snap-carousel": "^3.8.4",

Is it possible to use carousel component inside gifted-chat?

If I try to place carousel inside a custom message bubble, I am getting these warnings: 1) "Warning: Failed prop type: The prop renderItem is marked as required in Carousel, but its value is undefined." 2) If I live reload/refresh the app, I get: image

Code:

<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', }}>
  <Carousel
    ref={ref => this.carousel = ref}
    layout={'default'}
    data={[{title: "Item 1", text: "Text 1" }, { title: "Item 2",  text: "Text 2" }]}
    renderItem={this.renderCarCard}
    sliderWidth={WIDTH}
    itemWidth={WIDTH}
    slideStyle={{ paddingHorizontal: 20 }}
  />
</View>
  renderCarCard = ({ item, index }) => {
    return (
      <View>
        <Text style={{ color: 'white' }}>{item.text}</Text>
      </View>
    );
  }

p.s. If it helps, horizontal scrollView works inside of the giftedChat

dohooo commented 2 years ago

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