Skip to content

Carousel not working on react-native-web #1765

Closed
@likeSo

Description

@likeSo

Description

Carousel component works incorrect in react-native-web:

  • The pages inside the Carousel are arranged vertically, not horizontal;
  • The autoplay feature not working;

Related to

  • Components
  • Demo
  • Docs
  • Typings

Steps to reproduce

Expected behavior

Actual behavior

More Info

Code snippet

 <ScrollView flex={'1'}>
        <Carousel
          // autoplay
          // autoplayInterval={2000}
          itemSpacings={0}
          pageWidth={dimensions.width}
          allowAccessibleLayout
          containerStyle={{ height: dimensions.width, width: dimensions.width }}
          loop
        >
          {imageList.map((value, index) => (
            <Image
              source={{
                uri: 'https://t7.baidu.com/it/u=3569419905,626536365&fm=193&f=GIF',
              }}
              alt={'Image'}
              flex={1}
              resizeMode={'cover'}
              width={dimensions.width + 'px'}
              height={dimensions.width + 'px'}
              key={index}
            />
          ))}
        </Carousel>
      </ScrollView>

Screenshots/Video

Just check out my repro:
https://snack.expo.dev/@likeso/arrogant-salsa

Environment

  • React Native: 0.64.3
  • React Native UI Lib: v6.6.2

Affected platforms

  • Android
  • iOS
  • Web

Metadata

Metadata

Assignees

No one assigned

    Labels

    buga bug in one of the componentswontfix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions