🚀 What layout style do you want? #88

dohooo · 2022-01-07T16:36:35Z

Writing here!

BTW, looking forward to your PR!~ 🍺

give an example to show how to customize animation style #88

#88

dohooo · 2022-01-08T15:28:22Z

dohooo · 2022-01-09T13:27:36Z

dohooo · 2022-01-09T13:27:51Z

dohooo · 2022-01-11T04:23:49Z

dohooo · 2022-01-11T04:23:54Z

dohooo · 2022-01-11T04:24:01Z

yepMad · 2022-02-26T20:17:09Z

Hello,

I want to do something like this. I believe the current "Parallax" solves this, but I have doubts about how to change the size of the item that is not in focus.

dohooo · 2022-02-26T22:48:49Z

Hello,

I want to do something like this. I believe the current "Parallax" solves this, but I have doubts about how to change the size of the item that is not in focus.

https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/layouts/ParallaxLayout.tsx#L75 here

yepMad · 2022-02-27T00:25:51Z

https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/layouts/ParallaxLayout.tsx#L75 here

Thank you! I actually turned this change into a property. In case you find it interesting, I can make a commit with it.

dohooo · 2022-02-27T00:30:03Z

cool,let me a look

dohooo · 2022-02-27T00:31:15Z

https://github.com/dohooo/react-native-reanimated-carousel/blob/main/src/layouts/ParallaxLayout.tsx#L75 here

Thank you! I actually turned this change into a property. In case you find it interesting, I can make a commit with it.

You are the first one to submit layout, thank you for your contribution!~

yepMad · 2022-02-27T00:50:36Z

You are the first one to submit layout, thank you for your contribution!~

I am happy with that! You can see what I did in this PR. It was simple changes, and a little quick, let me know if there are any side effects or problems.
#139

dohooo · 2022-02-28T12:04:18Z

You are the first one to submit layout, thank you for your contribution!~

I am happy with that! You can see what I did in this PR. It was simple changes, and a little quick, let me know if there are any side effects or problems. #139

I released v2.3.1 just now, THX!~ @yepMad

IAmNatch · 2022-03-02T20:39:14Z

It would be great to have support for multiple items per a page. I was able to achieve this by setting the width to 50%, and adding a style of overflow: "visible", but this seems a bit hacky, as it's actually leaving the carousel wrapper entirely. As well, you'll notice when not looping the last element can still be scrolled to, leaving an awkward space. Ideally we could customize maxPages to something like data.length - itemsPerPage in order to prohibit the last swipe.

Happy to spend some time contributing to this if you could point me in the right direction.

IAmNatch · 2022-03-02T20:42:36Z

One other request: "Auto Height" for horizontal layouts. I know this might not be possible, as the items are currently all positioned absolutely, but it would be great to be able to size to height of the carousel based on the height of the contents. This was achievable in snap-carousel, but they may have been using a very different strategy.

dohooo · 2022-03-03T02:00:20Z

@IAmNatch here, Let's discuss it

testermumatstudio · 2022-04-08T06:50:21Z

@IAmNatch were you able to figure this out, thanks for the help if you can

testermumatstudio · 2022-04-08T06:51:39Z

hello, where can I find an example to show more than one item

dohooo · 2022-04-08T07:01:18Z

hello, where can I find an example to show more than one item

What do you mean?

testermumatstudio · 2022-04-09T03:11:18Z

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

dohooo · 2022-04-09T06:02:23Z

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

I added an example. You can look at this demo in home page, and click that gif it will navigate you to code example. 🍺

dohooo · 2022-04-09T06:04:53Z

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

BTW, This code will control the number of items that displaied.

testermumatstudio · 2022-04-10T07:14:51Z

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

BTW, This code will control the number of items that displaied.

grateful for your help and your time, really thanks, I'm going to try and study the code

Nadimkhan120 · 2022-04-11T11:58:17Z

@dohooo hi thanks for this amazing library,
can we use this as a swiper like tinder?

testermumatstudio · 2022-05-25T19:47:35Z

¿Hola como estás? tengo un error no se si es mio o del carrusel a ver si me puedes ayudar el carrusel que tengo es web y horizontal cuando quiero hacer scroll la version web la version movil no me deja hacer scroll el dom el carrusel se mueve correctamente horizontalmente, pero no puedo hacer scroll si presiono la tarjeta que esta dentro del carrusel horizontal como lo soluciono, pongo el ejemplo en gif de regalo

¡Hola! Lamento que hayas pasado por esto. Esto está cubierto en README, como una buena práctica para ScrollView y FlatList (creo que también funciona en la web)

perfect, thank you very much for answering, I will try and commit, if I had read it but had not understood what this was for, I thought it was to move it in reference to which point could be made to slide inside the carousel on the x axis, the values of the activeoffsetx -10 10: could you tell me what they are for? since I don't have them clear from the documentation in a short summary, and should I use them in the carousel I have with activeoffsety ? since the carousel is horizontal?

yepMad · 2022-05-25T19:59:00Z

perfect, thank you very much for answering, I will try and commit, if I had read it but had not understood what this was for, I thought it was to move it in reference to which point could be made to slide inside the carousel on the x axis, the values of the activeoffsetx -10 10: could you tell me what they are for? since I don't have them clear from the documentation in a short summary, and should I use them in the carousel I have with activeoffsety ? since the carousel is horizontal?

activeOffsetX should already solve your issue, it is intended for horizontal carousels (side to side) that are inside a scroll view. The "panGestureHandlerProps" property is from react-reanimated itself.

From the documentation of reanimated itself:

Range along X axis (in points) where fingers travels without activation of handler. Moving outside of this range implies activation of handler. Range can be given as an array or a single number. If range is set as an array, first value must be lower or equal to 0, a the second one higher or equal to 0. If only one number p is given a range of (-inf, p) will be used if p is higher or equal to 0 and (-p, inf) otherwise.

OlehDeneka-docode · 2022-06-03T16:08:22Z

@dohooo how can i disable bouncing?
And is there a way to display items like this without having to scale them?

dohooo · 2022-06-03T17:00:46Z

@dohooo how can i disable bouncing?
And is there a way to display items like this without having to scale them?

Disable bouncing

> Without scale.

https://github.com/dohooo/react-native-reanimated-carousel/blob/main/docs/custom-animation.md
You can customize the animation, Like this #128 , #128 (comment)

OlehDeneka-docode · 2022-06-03T19:44:33Z

oh man, thank you so much) guess i didnt look good enough in docs and issues

quicksilverr · 2022-06-16T09:40:28Z

Just had a query regarding this, how can we make the highlighter from centre?

wqcstrong · 2022-06-18T13:51:32Z

https://user-images.githubusercontent.com/15078788/156445400-0c2a7f6c-7da2-40a9-9872-2669134bf535.gif some like this, display multiple items in carousel, where can i get this example , as mentioned @IAmNatch, if I want to display 1, 2, 4, 6 elements

I added an example. You can look at this demo in home page, and click that gif it will navigate you to code example. 🍺

How to center the active item?

dohooo · 2022-06-18T14:03:59Z

@wqcstrong @quicksilverr

Here.
Fold example

Tab-bar example

aditya-keri-betterhalf · 2022-06-23T11:07:06Z

@dohooo - Great work on this library, thank you for all the efforts on this!

I would love to know how I can implement this vertical stack animation in the Carousel ?

https://www.youtube.com/shorts/-lvrU34Jt50

I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

dohooo · 2022-06-24T11:00:09Z

@dohooo - Great work on this library, thank you for all the efforts on this!

I would love to know how I can implement this vertical stack animation in the Carousel ?

https://www.youtube.com/shorts/-lvrU34Jt50

I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

aditya-keri-betterhalf · 2022-06-24T11:11:22Z

@dohooo - Great work on this library, thank you for all the efforts on this!
I would love to know how I can implement this vertical stack animation in the Carousel ?
https://www.youtube.com/shorts/-lvrU34Jt50
I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

Would like to know how!

dohooo · 2022-06-24T11:36:48Z

@dohooo - Great work on this library, thank you for all the efforts on this!
I would love to know how I can implement this vertical stack animation in the Carousel ?
https://www.youtube.com/shorts/-lvrU34Jt50
I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

Would like to know how!

RPReplay_Final1656070531.MP4

aditya-keri-betterhalf · 2022-06-24T11:43:55Z

@dohooo - Great work on this library, thank you for all the efforts on this!
I would love to know how I can implement this vertical stack animation in the Carousel ?
https://www.youtube.com/shorts/-lvrU34Jt50
I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

Would like to know how!

RPReplay_Final1656070531.MP4

This is great! Exactly what I need. Could you please help me with the props you've used to achieve this ? or an example you've created ?

dohooo · 2022-06-25T11:08:43Z

@dohooo - Great work on this library, thank you for all the efforts on this!

I would love to know how I can implement this vertical stack animation in the Carousel ?

https://www.youtube.com/shorts/-lvrU34Jt50

I was able to achieve something similar on the horizontal with mode="stack" and snapDirection="left". I think if there was an option of snapDirection="bottom" or "top", I should be able to achieve the above animation ?

It's very easy..

Would like to know how!

RPReplay_Final1656070531.MP4

This is great! Exactly what I need. Could you please help me with the props you've used to achieve this ? or an example you've created ?

I have added to examples.

in2progress · 2022-08-29T13:40:49Z

Stellar work on this library. Wondering if a combination of vertical and horizontal mode is possible.

dohooo · 2022-08-29T13:42:57Z

Stellar work on this library. Wondering if a combination of vertical and horizontal mode is possible.

Thank you. It seems that it is not possible at present. More modifications are needed.

IAmNatch · 2022-10-31T20:15:26Z

Hey @dohooo, I've been looking at your multiple example again, and I've been hitting an issue which I would call "overscrolling".

When the carousel is set to "loop", everything works as expected, however when loop is disabled, you can scroll the last element all the way to "position 1" instead of it being the last item in the carousel.

Current Implementation:

Slot 1	Slot 2	Slot 3
LastItem	Empty	Empty

Ideal Implementation

Slot 1	Slot 2	Slot 3
ThirdLastItem	SecondLastItem	LastItem

I've attached a minimal reproduction in expo here:
https://snack.expo.dev/@srobbins/reanimated-carousel-overscroll-example

I think this would be made possible by allowing us to set maxPages on the ScrollViewGesture, where maxPages would be totalItems.length - numberOfItemsOnScreen, however there would still be a slight problem of navigating to the last item.

Curious what you think about this!

Edit: I believe this is the same issue as #240.

IAmNatch · 2022-10-31T20:55:38Z

@dohooo I have a PR that adds support for this here:
#295

dohooo · 2023-01-10T08:45:00Z

@dohooo I have a PR that adds support for this here: #295

Solved in #297.

ijhar-nivoda · 2023-01-23T05:37:42Z

hey @dohooo , how can do style like this ? is it possible without parallax ?

vbylen · 2023-05-27T11:39:33Z

stacked card animations that look like this would be amazing:

https://www.youtube.com/watch?v=xPbRsca_l7c

SinanAldefai · 2023-06-07T09:51:23Z

One other request: "Auto Height" for horizontal layouts. I know this might not be possible, as the items are currently all positioned absolutely, but it would be great to be able to size to height of the carousel based on the height of the contents. This was achievable in snap-carousel, but they may have been using a very different strategy.

Has someone already found a way for this? Or is it just not possible?

rbhuzwandar · 2023-08-21T05:52:22Z

How to use parallax mode, but hide the left nad right item. so the active item will show full width screen ?

estebanfdiazp · 2023-11-09T22:25:37Z

Which layout should I use to achieve something like this?

guircoelho · 2024-08-08T21:59:35Z

Hi! I managed to dynamically retrieve the height of the carousel items. While it requires a bit more effort, it is possible as shown below:

How It Works:

Measure Item Heights: Each item is rendered invisibly off-screen to capture its height using the measure function.
Set Initial Height: The maximum height of all items is set as the initial height of the carousel.
Update on Scroll: As the carousel scrolls, the height is dynamically updated based on the height of the currently visible item.

const Advertising = () => {
  const items = []; // TODO

  const carouselRef = React.useRef<ICarouselInstance>(null);
  const [activeSlide, setActiveSlide] = useState(0);
  const {width: screenWidth} = useWindowDimensions();
  const [itemHeights, setItemHeights] = useState([]);
  const [carouselHeight, setCarouselHeight] = useState(0);
  const itemRefs = useRef([]);

  useEffect(() => {
    const heights = items.map((item, index) => {
      return new Promise(resolve => {
        itemRefs.current[index]?.measure((x, y, width, height) => {
          resolve(height);
        });
      });
    });

    Promise.all(heights).then(heights => {
      setItemHeights(heights);
      setCarouselHeight(Math.max(...heights)); // Set the initial height to the maximum item height
    });
  }, [items]);

  const handleScrollEnd = (index: number) => {
    setCarouselHeight(itemHeights[index]);
    setActiveSlide(index);
  };

  const renderItem = ({
    item,
    index,
    renderHidden,
  }: {
    item: AdsProps;
    index: number;
    renderHidden: boolean;
  }) => {
    return (
      <View
        key={item.cd_matia}
        style={[
          styles.listItem,
          renderHidden && {opacity: 0, zIndex: -1, position: 'absolute'},
          !renderHidden && {height: itemHeights[index]},
        ]}
        ref={ref => renderHidden && (itemRefs.current[index] = ref)}>
        <TouchableOpacity
          activeOpacity={0.7}
          onPress={() => openNewsDetails(item.ds_matia_link)}>
          <CustomImage url={item.imagem} width={120} height={96} />
        </TouchableOpacity>
        <View style={styles.textContainer}>
          <NewsItemSubject subject={item.ds_matia_assun} />
          <TouchableOpacity onPress={() => openNewsDetails(item.ds_matia_link)}>
            <TextPrimary style={styles.listItemTitle}>
              {item.ds_matia_titulo}
            </TextPrimary>
          </TouchableOpacity>
        </View>
      </View>
    );
  };

  const moveAnimation = useRef(new Animated.Value(0)).current;
  const moveOffset = 90;

  useEffect(() => {
    const toValue = -((moveOffset / items.length) * activeSlide);
    if (!isNaN(toValue)) {
      Animated.timing(moveAnimation, {
        toValue: toValue,
        duration: 1000,
        useNativeDriver: true,
        easing: Easing.out(Easing.cubic),
      }).start();
    }
  }, [moveAnimation, activeSlide]);

  return (
    <View style={styles.container}>
      <View style={styles.rowContainer}>
        {items &&
          items.map((item, index) =>
            renderItem({item, index, renderHidden: true}),
          )}
        {/* {items &&
          items.map((item, index) => (
            <View
              key={`measure-${index}`}
              ref={ref => (itemRefs.current[index] = ref)}
              style={[
                styles.listItem,
                {opacity: 0, zIndex: 2, position: 'absolute'},
              ]}>
              <TouchableOpacity
                activeOpacity={0.7}
                onPress={() => openNewsDetails(item.ds_matia_link)}>
                <CustomImage url={item.imagem} width={120} height={96} />
              </TouchableOpacity>
              <View style={styles.textContainer}>
                <NewsItemSubject subject={item.ds_matia_assun} />
                <TouchableOpacity
                  onPress={() => openNewsDetails(item.ds_matia_link)}>
                  <TextPrimary style={styles.listItemTitle}>
                    {item.ds_matia_titulo}
                  </TextPrimary>
                </TouchableOpacity>
              </View>
            </View>
          ))} */}
        <Carousel
          ref={carouselRef}
          data={items}
          width={screenWidth}
          height={carouselHeight || 50}
          loop={true}
          renderItem={({item, index}) =>
            renderItem({item, index, render: false})
          }
          onScrollEnd={handleScrollEnd}
          pagingEnabled={true}
          style={{width: '100%'}}
        />
      </View>
    </View>
  );

dohooo added the enhancement New feature or request label Jan 7, 2022

dohooo self-assigned this Jan 7, 2022

dohooo pinned this issue Jan 7, 2022

gxxgcn added a commit that referenced this issue Jan 8, 2022

docs: new example: advanced-parallax

b78bc27

give an example to show how to customize animation style #88

gxxgcn added a commit that referenced this issue Jan 8, 2022

docs: new example: fade-in-out

ac2c115

#88

dohooo mentioned this issue Apr 19, 2022

FEATURE REQUEST: add tinder animation #166

Open

dohooo changed the title ~~What layout style do you want?~~ 🚀 What layout style do you want? Sep 15, 2022

dohooo mentioned this issue Sep 15, 2022

🚨 Common issues. #268

Closed

dohooo closed this as completed Sep 15, 2022

LeeAlephium mentioned this issue Sep 19, 2022

Tokens list alephium/mobile-wallet#62

Merged

dohooo mentioned this issue Nov 1, 2022

[FEATURE REQUEST] Let the last item stop to the end of container. #297

Closed

🚀 What layout style do you want? #88

🚀 What layout style do you want? #88

Comments

dohooo commented Jan 7, 2022

dohooo commented Jan 8, 2022

dohooo commented Jan 9, 2022

dohooo commented Jan 9, 2022

dohooo commented Jan 11, 2022

dohooo commented Jan 11, 2022

dohooo commented Jan 11, 2022

yepMad commented Feb 26, 2022

dohooo commented Feb 26, 2022

yepMad commented Feb 27, 2022 • edited Loading

dohooo commented Feb 27, 2022

dohooo commented Feb 27, 2022

yepMad commented Feb 27, 2022

dohooo commented Feb 28, 2022

IAmNatch commented Mar 2, 2022

IAmNatch commented Mar 2, 2022

dohooo commented Mar 3, 2022

testermumatstudio commented Apr 8, 2022

testermumatstudio commented Apr 8, 2022

dohooo commented Apr 8, 2022

testermumatstudio commented Apr 9, 2022 • edited Loading

dohooo commented Apr 9, 2022 • edited Loading

dohooo commented Apr 9, 2022

testermumatstudio commented Apr 10, 2022

Nadimkhan120 commented Apr 11, 2022

testermumatstudio commented May 25, 2022 • edited Loading

yepMad commented May 25, 2022 • edited Loading

OlehDeneka-docode commented Jun 3, 2022 • edited Loading

dohooo commented Jun 3, 2022 • edited Loading

OlehDeneka-docode commented Jun 3, 2022

quicksilverr commented Jun 16, 2022

wqcstrong commented Jun 18, 2022

dohooo commented Jun 18, 2022

aditya-keri-betterhalf commented Jun 23, 2022

dohooo commented Jun 24, 2022

aditya-keri-betterhalf commented Jun 24, 2022

dohooo commented Jun 24, 2022

aditya-keri-betterhalf commented Jun 24, 2022

dohooo commented Jun 25, 2022 • edited Loading

in2progress commented Aug 29, 2022

dohooo commented Aug 29, 2022

IAmNatch commented Oct 31, 2022 • edited Loading

IAmNatch commented Oct 31, 2022

dohooo commented Jan 10, 2023

ijhar-nivoda commented Jan 23, 2023 • edited Loading

vbylen commented May 27, 2023 • edited Loading

SinanAldefai commented Jun 7, 2023 • edited Loading

rbhuzwandar commented Aug 21, 2023

estebanfdiazp commented Nov 9, 2023 • edited Loading

guircoelho commented Aug 8, 2024

yepMad commented Feb 27, 2022 •

edited

Loading

testermumatstudio commented Apr 9, 2022 •

edited

Loading

dohooo commented Apr 9, 2022 •

edited

Loading

testermumatstudio commented May 25, 2022 •

edited

Loading

yepMad commented May 25, 2022 •

edited

Loading

OlehDeneka-docode commented Jun 3, 2022 •

edited

Loading

dohooo commented Jun 3, 2022 •

edited

Loading

dohooo commented Jun 25, 2022 •

edited

Loading

IAmNatch commented Oct 31, 2022 •

edited

Loading

ijhar-nivoda commented Jan 23, 2023 •

edited

Loading

vbylen commented May 27, 2023 •

edited

Loading

SinanAldefai commented Jun 7, 2023 •

edited

Loading

estebanfdiazp commented Nov 9, 2023 •

edited

Loading