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?