react native snap carousel, next card preview same height

Question

I am using react native snap carousel and I am trying to have the preview of the next card look the same height as the current card. Originally the preview is set to look centered but smaller. I would like the preview to look the same exact size.

I tried setting the containerCustomStyle to alignItems center which made it look closer to the result I wanted but the sizes are not the same. If you remove the contrainerCustomStyle you can see an exaggerated version of what I do NOT want.

I have a snack expo recreating my problem here as well as some code below. If I need to add a picture to clarify the result I would like, let me know!

I appreciate any insight at all more than you know.

renderCarouselItem = ({ item }) => {
    return <View style={styles.cardContainer}>
      <Text style={styles.name}>{item.name}</Text>
    </View>;
  };
  render() {
    return (
        <Carousel
          ref={(c) => {
            this._carousel = c;
          }}
          data={this.state.coordinates}
          renderItem={this.renderCarouselItem}
          containerCustomStyle={styles.carousel}
          sliderWidth={Dimensions.get('window').width}
          itemWidth={300}
          removeClippedSubviews={false}
        />

    );
  }
}

const styles = StyleSheet.create({
  cardContainer: {
    backgroundColor: 'red',
    height: 100,
    width: 300,
    borderRadius: 10,
  },

  name: {
    color: 'black',
    fontSize: 22,
  },
  carousel: {
    alignItems: 'center',

  }
  
});

Answer 1

react-native-snap-carousel is deprecated. You should try react-native-reanimated-carousel