Swiper Doesnt Render Anything

[mpaccione]

As far as I can tell this doesn't work in any fashion in this Expo app. I created a minimum test which does not render any values to the screen.

Version is

    "react-native-web-swiper": "^2.2.3",

My import is as follows

import Swiper from "react-native-web-swiper";

 <View>
        {true && (
          <>
            <Text>TEST</Text>
            <Swiper>
              <View>
                <Text>1</Text>
              </View>
              <View>
                <Text>2</Text>
              </View>
            </Swiper>
          </>
        )}
      </View>

The TEST text outputs.

My initial goal was something like this

<SwiperContainer>
        {photos && (
          <Swiper>
            {selectedProjectMedia.photos.map((p, idx) => (
              <MediaSlide key={idx} img={p} />
            ))}
          </Swiper>
        )}
      </SwiperContainer>

However since I can't get a basic anything working I am probably going to have to find another slider component.

Any ideas on the issue here?

[oxyii]

@mpaccione please add flex style to root View https://snack.expo.dev/@oxyii/issues-82

[mpaccione]

@mpaccione please add flex style to root View https://snack.expo.dev/@oxyii/issues-82

Gotcha, I saw that in the example. This was my mistake in assuming that it would still render to the screen albeit in a non functioning layout. It would seem that the underlying code relies on that otherwise you wont see any output.

Thank you kindly.

[mpaccione]

Okay, so I had anticipated this would solve it but it seems like the slider doesn't rerender?

In the below image I am consoling out the photo values which are mock base64...

  console.log({ photos });
  console.log(selectedProjectMedia.photos)

{photos && (
        <View style={{ flex: 1 }}>
          <Swiper>
            {selectedProjectMedia.photos.map((p, idx) => (
              <View style={{ backgroundImage: `url(${p})` }} key={idx}>
                <Text>{idx}</Text>
              </View>
            ))}
          </Swiper>
        </View>
      )}

Is there a manual rerender on this? I am assuming it is not rerendering as the console is outputting the react component rerendered values from redux.

[mpaccione]

Okay I am definitely closing this out. You simply will need to work around the reloading issue and get your data before displaying.