Using <> </> as a children of RNWSwiper create only one slide about react-native-web-swiper

[thanhtunguet]

I am trying to build a slide depending on a condition, for this reason, I have my JSX that look like following:

        <RNWSwiper
          from={0}
          minDistanceForAction={0.1}
        >
          {photoList.length > 0 ? photoList.map(({ filename }) => (
            <View
              key={filename}
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                backgroundColor: 'transparent',
              }}
            >
              <Image
                style={{ minHeight: '100%', minWidth: '100%' }}
                source={{ uri: `${urls.dataApi}/resources/${id}/lg/${filename}` }}
              />
            </View>
          )) : (
            <>
              <View
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'rgba(20,20,200,0.3)',
                }}
              >
                <Text>Slide 1</Text>
              </View>
              <View
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'rgba(20,200,20,0.3)',
                }}
              >
                <Text>Slide 2</Text>
              </View>
              <View
                style={{
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: 'center',
                  backgroundColor: 'rgba(200,20,20,0.3)',
                }}
              >
                <Text>Slide 3</Text>
              </View>
            </>
          )}
        </RNWSwiper>

This cause the 3 views to be stacked on top of each other and have only one page of slide.

While I was expecting to have 3 slides.

Any tought about this and the possible fix?

Do not wrap your slides in a Fragment element. As I see in the code, each child element will be treated as a slide.

[jarvisluong]

Instead of using Fragment in this case, you can wrap the Slides in an array