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

Issue

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!

  <Container>
    <Cover>
      <Image source={props.image} />
      <Category>{props.category}</Category>
    </Cover>
    <Content>
      <AuthorPic source={props.authorpic} />
      <Wrapper>
        <Title>{props.title}</Title>
        <Author>{props.author}</Author>
      </Wrapper>
    </Content>
  </Container>
);

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

<ScrollView
  horizontal={true}
  style={{ paddingBottom: 30 }}
  showsHorizontalScrollIndicator={false}
>

Solution

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:

<ScrollView
  horizontal={true}
  style={{ paddingBottom: 30 }}
  contentContainerStyle={{ paddingRight: 20 }} //This line
  showsHorizontalScrollIndicator={false}
>

If this doesn’t work, try using marginRight instead

Answered By – William Brochensque junior

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published