🚀 What layout style do you want?

[dohooo]

Writing here!

BTW, looking forward to your PR!~ 🍺

[dohooo]

[dohooo]

[dohooo]

[dohooo]

[dohooo]

[dohooo]

[yepMad]

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]

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]

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]

cool,let me a look

[dohooo]

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]

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. https://github.com/dohooo/react-native-reanimated-carousel/pull/139

[dohooo]

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]

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]

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]

@IAmNatch here, Let's discuss it

[testermumatstudio]

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

[testermumatstudio]

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

[dohooo]

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

What do you mean?

[testermumatstudio]

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]

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]

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]

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]

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

[testermumatstudio]

i have this code I can't get it to show 1, 2, 4, 6 items, I want to be able to use the count and make it work... on the other hand, create an issue to be able to pass style props or breakpoints of any library, can you help me, please

this is carousel:

const COUNT = 6

export interface Props {
}

interface State {
  width: number;
  data:any;
  PAGE_WIDTH:any;
  isVertical:any;
  user:any;
}

import CurrentUserStore from "../../../../stores/CurrentUserStore";
import ResponsiveWidthStore from "../../../../stores/ResponsiveWidthStore";
import { Collection } from "../../../../models/IdentityModels";

import CardCollectionsCarousel from '../../../Cards/CardsExplore/CardCollectionsCarousel/CardCollectionsCarousel'

import CardCollections from '../../../Cards/CardsFran/CardCollections/CardCollections'

export default class CarouselSales extends ComponentBase<Props, State> {

private r
protected _buildState(props: Props, initState: boolean) {

     const partialState: Partial<State> = {
      data: CurrentUserStore.getCollectionsSongbird().filter((value)=>value.name!==""),
      PAGE_WIDTH:ResponsiveWidthStore.getWidth(),
      width:ResponsiveWidthStore.getWidth(),
      user:CurrentUserStore.getUser(),
      isVertical:false
  };

this.r = React.createRef<ICarouselInstance | null>(null);
return partialState;
}

renderItem = ({item, index}:{item:Collection, index}) => {
console.log("item"+JSON.stringify(item))

    return (   
      <Box sx={styles.item} >
        <CardCollections key={index} index={index} userAvatar={item.userAvatar}  ownerAddress={item.owner} tokenAddress={item.collectionAddress}  user={this.state.user} name={item.name} description={item.description} filePath={item.filePath}  />
      </Box>
    );
  }

  private baseOptions =({
        vertical: false,
        width: 1300 / COUNT,
        height: 260,
        style: {
            width: 1300,
        },
    } as const);

render(){
return (

  <Stack  sx={{mx:15}}>
    <Stack  direction='row' sx={{alignItems:'center',justifyContent:'space-between', mb:5}}>

        <Typography sx={{ fontFamily:"Poppins_400Regular",color:"white" ,alignSelf:'center',fontSize:35,  }}>
          Hot Collections
        </Typography>

        <Stack direction='row' mt={2} spacing={5} sx={{alignItems:'center', alignSelf:'center',justifyContent:'center'}}>
          <FontAwesome5 name="arrow-left" size={24} color="white" onPress={() => this.r.current?.next()}/>
          <FontAwesome5 name="arrow-right" size={24} color="white" onPress={() => this.r.current?.prev()}/>
        </Stack>

    </Stack>

    <Box sx={{width:'100%', alignSelf:'center',justifyContent:'center'}}>
      <Carousel
        {...this.baseOptions}
        ref={this.r}
        data={this.state.data}
        renderItem={this.renderItem}
      />
    </Box>
  </Stack>
  )}
}

const styles ={
  container: {
    flex: 1,
    marginHorizontal:15
  },
  container2: {
    flex: 1,
    marginHorizontal:10
  },
  item: {
    alignSelf: 'center',
    justifyContent: 'center',
    marginHorizontal:5
  },
  itemInvisible: {
    backgroundColor: 'transparent',
  },
};

this is my card component:

  const useStyles = makeStyles(() => ({
    card: {
      backgroundColor:'#16151A',
      border: '0.5px solid #474747',
      borderRadius: 14,
      transition: '0.4s',
      '&:hover': {
        borderColor: '#676767',
      },
      width: 220,
      height:240,
      color:' #fff',
    },
    container: {
      justifyContent: 'center',
      alignItems:'center',
      fontWeight: 100,
    },

  }));

export default function CardPrincipal( props): JSX.Element {
    const styles = useStyles();
    const { index } = props;
    return ( 
<Box className={styles.card}>

    <CardMedia
      component="img"
      sx={{      
      width: '100%',
      height:120,
      borderTopLeftRadius:14,
      borderTopRightRadius:14 }}
      src="https://www.xtrafondos.com/wallpapers/montanas-minimalista-flat-3128.jpg" 
      alt="Image Perfil NFT" />

    <Box className={styles.container} >
      <Typography 
        sx={{
          fontFamily:"Poppins_600SemiBold",
          color:"white",
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          fontSize:18
        }}>
          Lily Rose { index }
      </Typography>

      <Typography 
        sx={{
          fontFamily:"Poppins_400Regular",
          color:"#838990",
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          fontSize:12
        }}>
          ERC-1155
      </Typography>
    </Box>

</Box>
)}

Here is an example of how it looks, the black space on the right allows me to move the ccarousel with the mouse but it does not render the other card

https://gateway.pinata.cloud/ipfs/QmeMVb6VDGFNrHWZFv8Qv6TAi6cjgrNCsmvJigseki29wS https://gateway.pinata.cloud/ipfs/QmUFcsKi2eHMrV7At4wXnvkRRyNJU7GJHTGzcwdA7fWa7o

and in this example I would like to pass mui props or any library that allows me to break points, and grab the automatic width or height as how much one places width:'100%' in mui, here is the example

  private baseOptions =({
        vertical: false,
        width: '100%'/ COUNT, <======  HERE is the problem 
        height: 260,
        style: {
            width:  {xs:200,sm: 250, md: 500, lg: 800}, <======  HERE is the problem  
        },
    } as const);

I hope you can help me thanks

[louisholley]

@dohooo hey, thanks so much for this it's working great! +1 request for auto height, is this currently possible with react-native-reanimated-carousel?

[Nadeemkhan122]

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

hi, you have closed the request, have you implemented it, or you have just closed it.

[dohooo]

@dohooo hey, thanks so much for this it's working great! +1 request for auto height, is this currently possible with react-native-reanimated-carousel?

uh.. auto height doesn't match our current implementation. Because currently is the absolute layout, if u haven't set height it will show nothing.

[dohooo]

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

hi, you have closed the request, have you implemented it, or you have just closed it.

I just closed it 😐. I think tinder animation isn't look like carousel.

[marcoturi]

+1 for dynamic height @louisholley @IAmNatch Did you find a way to implement it? Or an alternative lib?

[IAmNatch]

+1 for dynamic height @louisholley @IAmNatch Did you find a way to implement it? Or an alternative lib?

I was helping someone out with their implementation, so I'm not 100% sure where it landed, but I believe they ended up using a fixed height. If you really needed this functionality, you could probably measure the height of your card after it layouts, and then dynamically update the height of the carousel. It would likely work, but would not be incredibly performance. -- Alternatively, snap carousel does have a beta v4 with some improvements, but its as far as I can tell its not getting much maintenance, and you don't get the performance benefits we get from this reanimated-carousel's use of reanimated (powered by JSI).

As @doohoo mentioned, the position absolute based implementation used in this lib isn't well suited to auto height, so I don't imagine it will gain support for this feature without a significant rework of the library, likely with breaking changes.

Hope this is helpful!

[yasircodingcrafts]

@dohooo thanks for the amazing library, can we disable swiping to previous item? i.e user can only swipe to one direction?

[dohooo]

@dohooo thanks for the amazing library, can we disable swiping to previous item? i.e user can only swipe to one direction?

Good point! https://github.com/dohooo/react-native-reanimated-carousel/issues/194

[testermumatstudio]

Hello how are you? I have an error I don't know if it's mine or the carousel let's see if you can help me, the carousel I have is web and horizontal when I want to scroll the web version the mobile version doesn't let me scroll the dom the carousel moves correctly horizontally , but I can not scroll if I press the card that is inside the horizontal carousel how can I solve it, I put the example in gif gift

[yepMad]

Hello how are you? I have an error I don't know if it's mine or the carousel let's see if you can help me, the carousel I have is web and horizontal when I want to scroll the web version the mobile version doesn't let me scroll the dom the carousel moves correctly horizontally , but I can not scroll if I press the card that is inside the horizontal carousel how can I solve it, I put the example in gif gift

Hi! Sorry you went through this. This is covered in the README, as a good practice for ScrollView and FlatList (I believe it also works on the web)

[testermumatstudio]

¿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]

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]

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

[dohooo]

@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 , https://github.com/dohooo/react-native-reanimated-carousel/issues/128#issuecomment-1024846208

[OlehDeneka-docode]

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

[quicksilverr]

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

[wqcstrong]

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]

@wqcstrong @quicksilverr

Here. Fold example

Tab-bar example

[aditya-keri-betterhalf]

@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]

@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]

@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]

@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!

https://user-images.githubusercontent.com/32405058/175526683-dc9e7a7f-f0b8-4716-9459-a268e82553fd.MP4

[aditya-keri-betterhalf]

@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]

@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]

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