Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Off behavior when #27

Open
Eljoy opened this issue Feb 4, 2022 · 0 comments · May be fixed by #28
Open

Off behavior when #27

Eljoy opened this issue Feb 4, 2022 · 0 comments · May be fixed by #28

Comments

@Eljoy
Copy link

Eljoy commented Feb 4, 2022

When itemWidth is less than the width of the actual content the content itself is being cut off.
This could be useful when one wants to have side items being visible.

Expected behavior:

image

Actual behavior:

image


export const Carousel = withCarouselContext(
  ({ extractImageUrl, ...props }: Props) => {
    const { width, height } = useWindowDimensions();
    return (
      <View>
        <CarouselRN
          style={styles.carousel}
          loop
          itemWidth={width - 60}
          inactiveOpacity={1}
          inactiveScale={0.82}
          renderItem={(data) => {
            return (
              <View
                style={{
                  borderRadius: 24,
                  width: width - 40,
                  height: 183,
                  overflow: 'hidden',
                  justifyContent: 'center',
                  zIndex: 300,
                }}
              >
                <Image
                  source={{ uri: data.item }}
                  style={[
                    { width: width },
                    styles.image,
                  ]}
                />
              </View>
            );
          }}
          {...props}
        />
      </View>
    );
  }
);

const styles = StyleSheet.create({
  image: {
    borderRadius: 24,
    height: 183,
  },
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant