Estoy tratando de diseñar tarjetas en React Native. Los tengo en una vista de desplazamiento horizontal y estoy tratando de que tengan un margen uniforme en ambos lados sin que se vea torcido.

Esto es lo que estoy tratando de lograr.

Pero esto es lo que tengo ahora..

El código provisto primero es el componente de mi tarjeta.

El segundo fragmento de código es la vista de desplazamiento en mi app.js en caso de que también sea necesario.

Gracias de antemano a quien me pueda ayudar!

 <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; `;

Aquí está la vista de desplazamiento

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