Doesn't work with SafeAreaView and margin 0

[willedanielsson]

So the swiper works correctly but it overflows the parents and therefore the SafeAreaView for on example iOS.

          <Swiper
            ref={swiperEl}
            cards={....}
            renderCard={(prop) => (
             <View style={styles.card}>
                dataEtcetc={....}
              />
            )}
            backgroundColor="transparent"
            stackSize={3}
            verticalSwipe={false}
            infinite={true}
            cardVerticalMargin={5}
            cardHorizontalMargin={5}
            marginBottom={0}
            swipeBackCard
          />
        </View>

  card: {
    flex: 1,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: Colors.mainColor,
    backgroundColor: Colors.backgroundColor,
    overflow: 'hidden',
  },

So if having marginBottom: 0 (to have it feel the whole screen) lets the swiper cover the SafeAreaView as well and not be contained in the parent. Does anyone else have the same problem or is it just us?

[webraptor]

The resolution for this one is the same as the one for this other concern.

The swiper renders absolutely to the size of the screen, so your renderCard methods should accommodate for any safe areas. You can use different packages that return device sizes w/ or w/out safe areas, or use Dimensions from react-native itself. One idea would be useSafeAreaInsets from react-native-safe-area-context

[willedanielsson]

@webraptor Ahaa it uses the whole screen. Ill fix that and thanks for the fast response!