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.33k stars 2.28k forks source link

[Carousel] support automatic/default slider width/height #510

Open gi opened 5 years ago

gi commented 5 years ago

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

Feature Request: Automatic/Default Slider Width/Height

It would be incredibly helpful to have built-in support for automatically calculating the sliderWidth (horizontal carousel) or sliderHeight (vertical carousel). The implementation could support percentage values of those properties as well.

<Carousel data={data} renderItem={renderItem} {/* sliderWidth defaults to '100%' */} />
<Carousel data={data} renderItem={renderItem} sliderWidth={'100%'} />

It's possible an implementation might utilize the View component's prop onLayout:

<View onLayout={this.onLayout} {...props} />
onLayout(event) {
  const { width, height } = event.nativeEvent.layout;
  this.setState({ layout: { width, height } });
}

The width and height can then be used to calculate the sliderWidth, replacing the value used in

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

Environment

(Write your answer here.)

Expected Behavior

Automatically layout the component using reasonable defaults (e.g. 100% width).

Actual Behavior

The slider width or height is required to be calculated by the containing application.

Reproducible Demo

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

TBD. (Sorry)

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