Avoid overlapping stack cards with before and after elements

[creativemind1]

Hello,

I'm stumbling with my current layout as I've to put so many dirty hacks to avoid the elements get overlapped with swiping cards.

 <View style={{ marginBottom: 20 }}>
                            <Text>Big cars</Text>
                            <Text>
                                Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem
                                ipsum Lorem ipsum lorem ipsum
                            </Text>
                        </View>

                        <View
                            style={{
                                flex: 1,
                                minHeight: 300,
                            }}
                        >
                            <SwipeCards
                                containerStyle={styles.container}
                                dragY={false}
                                allowGestureTermination={false}
                                cards={newlyAdded}
                                renderCard={cardData => renderCard(cardData)}                               
                                stack={true}
                                stackDepth={newlyAdded.length < 5 ? 3 : 5}
                                stackOffsetX={4}
                                stackOffsetY={-stackOffSetY(newlyAdded.length)}
                                onClickHandler={() => null}
                                showYup={false}
                                showNope={false}
                                smoothTransition={true}
                            />
                        </View>

                        <View style={{ marginBottom: 20 }}>
                            <Text>Big cars</Text>
                            <Text>
                                Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem
                                ipsum Lorem ipsum lorem ipsum
                            </Text>
                        </View>

[eyalabs]

You can't use flex on the parent of SwipeCards just like that... for more info check #9.

TL;DR possible solutions:

1. You can make the height fixed and the width dynamic 100%
2. You can use a fixed height based on the screen size using Dimensions.get('window').height / 2 (this will take up half of the screen's height.
3. You can use onLayout = (event) => { const { width, height } = event.nativeEvent.layout; this.setState({ cardWidth: width, cardHeight: height }) }; to set the size of the swipe cards after you know what space is left for you to use...

[creativemind1]

I've tried all the above issues before except 2nd. Second one looks closer to my solution however, in all possibilities above, one thing is causing so much trouble and that is more space which is getting created when removing cards (in from stack of cards).

[eyalabs]

Sorry, but I can't understand the problem...

[creativemind1]

When more number of swiping takes place, more number of spacing gets created below the Swiper container if I adopt Dimension.window.height solution

[eyalabs]

It seems to me that you are looking for a fixed size of the swipe cards - so just make the parent of a fixed size or try to apply it to the SwipeCards style directly:

style={{
  //flex: 1, // <<-- remove this
  height: 300,
}}

[creativemind1]

No, I'm looking for a dynamic height for SwipeCards.

[eyalabs]

The problem here is not the swipe cards, I can't help you since it is up for you to figure out how to structure your screen to be responsive/looks as you want it.

From the code attached I can see a couple of styling problems that are not related to the lib.

We have an app working with a header and a footer for the cards and it is very responsive with the same solution I gave you earlier. Please note that the content or the cards can affect it's behavior on flexable layouts