Search code examples
react-nativeexposcrollview

React Native Horizontal ScrollView not scrolling

I'm new to react native and I'm trying to do horizontal scrolling with scroll view but it is not scrolling at all.. it is completely static I'm currently using react-native: "0.68.2", expo: "~45.0.0"

This is my code

<ScrollView
        horizontal
        showsHorizontalScrollIndicator={true}
        contentContainerStyle={{flexGrow:1}}
        >
          <BookCard/>
          <BookCard/>

        </ScrollView>

and the code for the Book Card is

const BookCard = styled.View
 background-color: ${(props) => props.theme.colors.bg.primary};
  border-radius: 5px;
  margin-left: 5px;
  flex-direction: row;
  height: 150px;
  border-radius: 5px;
  width: 70%;

I have also added a View with flex:1 around the scroll view but it still doesn't work... please what am I getting wrong?

Solution

  • actually i just worked out the issue ... It was because i set the width of the bookcards to a percentage value that is why it didn't work i.e like if you set the cards to width:50% and you put 4 cards in the scrollview , it only scrolls to 2 cards because the 2 cards add up to 100% of the scrollview (i was quite dumb lol)

    I replaced the percentage values with px values and no matter the amount of items, it's scrolling perfectly now.. Thank you