How can I have an equal margin around two objects in a horizontal scroll view?


I’m trying to style cards in React Native. I have them in a horizontal scroll view and I’m trying to make them have an even margin on both sides without it looking wonky.

Here’s what I’m trying to achieve.
enter image description here

But this is what I have right now..

enter image description here

The code provided first is my card component.

The second piece of code is the scrollview in my app.js just in case thats needed as well.

Thanks in advance to anyone who can help me!

      <Image source={props.image} />
      <AuthorPic source={props.authorpic} />

export default Card;

const Content = styled.View`
  padding-left: 20px;
  flex-direction: row;'
  align-items: center;
  height: 80px;

const AuthorPic = styled.Image`
  width: 44px;
  height: 44px;
  border-radius: 22px;

const Title = styled.Text`
  color: white;
  font-size: 20px;
  font-weight: 600;
`; // This is caption

const Author = styled.Text`
  color: #a4a4a4;
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  margin-top: 4px;

const Wrapper = styled.View`
  margin-left: 10px;

const Container = styled.View`
  background: #282828;
  width: 315px;
  height: 280px;
  border-radius: 14px;
  margin-left: 20px;
  margin-top: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);

const Cover = styled.View`
  width: 100%;
  height: 200px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  overflow: hidden;

Here’s the scrollview

  style={{ paddingBottom: 30 }}


On your Container styles, you’re using margin-left: 20px;, wich means every item is getting the margin, except the last one.
To solve this problem, add margin in your ScrollView component, to set the last item margin:

  style={{ paddingBottom: 30 }}
  contentContainerStyle={{ paddingRight: 20 }} //This line

If this doesn’t work, try using marginRight instead

Answered By – William Brochensque junior

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.