ScrollView making the View inside goes beyond the screen

I'm making a component that goes like this:

ScrollView (Vertical) -> ScrollView (Horizontal) -> View (Card)

The main container is the vertical scroll view, the inside of this I have a horizontal scroll view then inside this horizontal I'm going to place a Card that'll be a combination of multiple views, texts, and images. I'm doing all of this in one file at the moment later I'll put the cad code in a separate .js file and call it under a loop where the user will be able to horizontally scroll through.

        <ScrollView style={styles.container}>              <Text style={styles.headText}>This is a text used as a message box on top of screen</Text>              <ScrollView style={styles.cards}                  horizontal={true}                  showsHorizontalScrollIndicator={false}                  pagingEnabled={true}>                    <View style={styles.cardContainer}>                      {/* Card Components Will come here */}                  </View>                    <View style={styles.cardContainer}>                      {/* Card Components Will come here */}                  </View>                </ScrollView>          </ScrollView>  

Here is how it looks like:

And if the user horizontally scrolls:

As the views are end to end so I need to add padding, so I added padding in cards styles, and here is how styles are:

    container: {          flex: 1,          backgroundColor: '#fff',      },      cards: {          padding: 10,      },      headText: {          fontSize: 12,          color: "#707070",      },      cardContainer: {          backgroundColor: 'tomato',          borderRadius: 8,          borderWidth: 1,          borderColor: '#EBEBEB',          padding: 15,          width: Dimensions.get('window').width - 10,      }  

Now my assumption is that the content that'll come inside cardContainer will wrap inside but the. problem is that after doing this much code the cardContainer view is putting the second cardContainer view out of the screen as shown in the image below:

I don't want to fix the size I just want to adjust the width of cardContainer to say 90% of the screen. Think of it like Tinder or other swiping cards like apps but less fancy.

https://stackoverflow.com/questions/66486179/scrollview-making-the-view-inside-goes-beyond-the-screen March 05, 2021 at 11:04AM